react-arborist 3.4.0 → 3.4.2

package/README.md

@@ -68,6 +68,8 @@ const data = [
 Use all the defaults. The _initialData_ prop makes the tree an uncontrolled component. Create, move, rename, and delete will be handled internally.
 
 ```jsx
+import { Tree } from 'react-arborist';
+
 function App() {
   return <Tree initialData={data} />;
 }
@@ -241,6 +243,20 @@ function App() {
 }
 ```
 
+### Dynamic sizing
+
+You can add a ref to it with this package [ZeeCoder/use-resize-observer](https://github.com/ZeeCoder/use-resize-observer)
+ 
+That hook will return the height and width of the parent whenever it changes. You then pass these numbers to the Tree.
+
+```js
+const { ref, width, height } = useResizeObserver();
+ 
+<div className="parent" ref={ref}>
+  <Tree height={height} width={width} />
+</div>
+```
+
 ## API Reference
 
 - Components

package/dist/main/components/cursor.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Cursor = void 0;
+exports.Cursor = Cursor;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const context_1 = require("../context");
 function Cursor() {
@@ -17,4 +17,3 @@ function Cursor() {
     const Cursor = tree.renderCursor;
     return (0, jsx_runtime_1.jsx)(Cursor, { top, left, indent });
 }
-exports.Cursor = Cursor;

package/dist/main/components/default-container.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultContainer = void 0;
+exports.DefaultContainer = DefaultContainer;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_window_1 = require("react-window");
 const context_1 = require("../context");
@@ -235,4 +235,3 @@ function DefaultContainer() {
                 tree.focus(node.id);
         }, children: (0, jsx_runtime_1.jsx)(react_window_1.FixedSizeList, { className: tree.props.className, outerRef: tree.listEl, itemCount: tree.visibleNodes.length, height: tree.height, width: tree.width, itemSize: tree.rowHeight, overscanCount: tree.overscanCount, itemKey: (index) => { var _a; return ((_a = tree.visibleNodes[index]) === null || _a === void 0 ? void 0 : _a.id) || index; }, outerElementType: list_outer_element_1.ListOuterElement, innerElementType: list_inner_element_1.ListInnerElement, onScroll: tree.props.onScroll, onItemsRendered: tree.onItemsRendered.bind(tree), ref: tree.list, children: row_container_1.RowContainer }) }));
 }
-exports.DefaultContainer = DefaultContainer;

package/dist/main/components/default-drag-preview.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultDragPreview = void 0;
+exports.DefaultDragPreview = DefaultDragPreview;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const context_1 = require("../context");
@@ -28,7 +28,6 @@ const getCountStyle = (offset) => {
 function DefaultDragPreview({ offset, mouse, id, dragIds, isDragging, }) {
     return ((0, jsx_runtime_1.jsxs)(Overlay, { isDragging: isDragging, children: [(0, jsx_runtime_1.jsx)(Position, { offset: offset, children: (0, jsx_runtime_1.jsx)(PreviewNode, { id: id, dragIds: dragIds }) }), (0, jsx_runtime_1.jsx)(Count, { mouse: mouse, count: dragIds.length })] }));
 }
-exports.DefaultDragPreview = DefaultDragPreview;
 const Overlay = (0, react_1.memo)(function Overlay(props) {
     if (!props.isDragging)
         return null;

package/dist/main/components/default-node.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultNode = void 0;
+exports.DefaultNode = DefaultNode;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 function DefaultNode(props) {
@@ -9,7 +9,6 @@ function DefaultNode(props) {
                     props.node.toggle();
                 }, children: props.node.isLeaf ? "🌳" : props.node.isOpen ? "🗁" : "🗀" }), " ", props.node.isEditing ? (0, jsx_runtime_1.jsx)(Edit, Object.assign({}, props)) : (0, jsx_runtime_1.jsx)(Show, Object.assign({}, props))] }));
 }
-exports.DefaultNode = DefaultNode;
 function Show(props) {
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("span", { children: props.node.data.name }) }));
 }

package/dist/main/components/default-row.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultRow = void 0;
+exports.DefaultRow = DefaultRow;
 const jsx_runtime_1 = require("react/jsx-runtime");
 function DefaultRow({ node, attrs, innerRef, children, }) {
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, attrs, { ref: innerRef, onFocus: (e) => e.stopPropagation(), onClick: node.handleClick, children: children })));
 }
-exports.DefaultRow = DefaultRow;

package/dist/main/components/drag-preview-container.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DragPreviewContainer = void 0;
+exports.DragPreviewContainer = DragPreviewContainer;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_dnd_1 = require("react-dnd");
 const context_1 = require("../context");
@@ -18,4 +18,3 @@ function DragPreviewContainer() {
     const DragPreview = tree.props.renderDragPreview || default_drag_preview_1.DefaultDragPreview;
     return ((0, jsx_runtime_1.jsx)(DragPreview, { offset: offset, mouse: mouse, id: (item === null || item === void 0 ? void 0 : item.id) || null, dragIds: (item === null || item === void 0 ? void 0 : item.dragIds) || [], isDragging: isDragging }));
 }
-exports.DragPreviewContainer = DragPreviewContainer;

package/dist/main/components/list-outer-element.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ListOuterElement: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<unknown>>;

package/dist/main/components/outer-drop.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OuterDrop = void 0;
+exports.OuterDrop = OuterDrop;
 const outer_drop_hook_1 = require("../dnd/outer-drop-hook");
 function OuterDrop(props) {
     (0, outer_drop_hook_1.useOuterDrop)();
     return props.children;
 }
-exports.OuterDrop = OuterDrop;

package/dist/main/components/provider.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TreeProvider = void 0;
+exports.TreeProvider = TreeProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const shim_1 = require("use-sync-external-store/shim");
@@ -49,4 +49,3 @@ function TreeProvider({ treeProps, imperativeHandle, children, }) {
     }, [api.props.searchTerm]);
     return ((0, jsx_runtime_1.jsx)(context_1.TreeApiContext.Provider, { value: api, children: (0, jsx_runtime_1.jsx)(context_1.DataUpdatesContext.Provider, { value: updateCount.current, children: (0, jsx_runtime_1.jsx)(context_1.NodesContext.Provider, { value: state.nodes, children: (0, jsx_runtime_1.jsx)(context_1.DndContext.Provider, { value: state.dnd, children: (0, jsx_runtime_1.jsx)(react_dnd_1.DndProvider, Object.assign({ backend: react_dnd_html5_backend_1.HTML5Backend, options: { rootElement: api.props.dndRootElement || undefined } }, (treeProps.dndManager && { manager: treeProps.dndManager }), { children: children })) }) }) }) }));
 }
-exports.TreeProvider = TreeProvider;

package/dist/main/components/tree-container.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TreeContainer = void 0;
+exports.TreeContainer = TreeContainer;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const context_1 = require("../context");
 const default_container_1 = require("./default-container");
@@ -9,4 +9,3 @@ function TreeContainer() {
     const Container = tree.props.renderContainer || default_container_1.DefaultContainer;
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Container, {}) }));
 }
-exports.TreeContainer = TreeContainer;

package/dist/main/components/tree.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { TreeApi } from "../interfaces/tree-api";
 import { TreeProps } from "../types/tree-props";
 declare function TreeComponent<T>(props: TreeProps<T>, ref: React.Ref<TreeApi<T> | undefined>): import("react/jsx-runtime").JSX.Element;
 export declare const Tree: <T>(props: TreeProps<T> & {
-    ref?: import("react").ForwardedRef<TreeApi<T> | undefined> | undefined;
+    ref?: React.ForwardedRef<TreeApi<T> | undefined>;
 }) => ReturnType<typeof TreeComponent>;
 export {};

package/dist/main/context.js

@@ -1,6 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDataUpdates = exports.DataUpdatesContext = exports.useDndContext = exports.DndContext = exports.useNodesContext = exports.NodesContext = exports.useTreeApi = exports.TreeApiContext = void 0;
+exports.DataUpdatesContext = exports.DndContext = exports.NodesContext = exports.TreeApiContext = void 0;
+exports.useTreeApi = useTreeApi;
+exports.useNodesContext = useNodesContext;
+exports.useDndContext = useDndContext;
+exports.useDataUpdates = useDataUpdates;
 const react_1 = require("react");
 exports.TreeApiContext = (0, react_1.createContext)(null);
 function useTreeApi() {
@@ -9,7 +13,6 @@ function useTreeApi() {
         throw new Error("No Tree Api Provided");
     return value;
 }
-exports.useTreeApi = useTreeApi;
 exports.NodesContext = (0, react_1.createContext)(null);
 function useNodesContext() {
     const value = (0, react_1.useContext)(exports.NodesContext);
@@ -17,7 +20,6 @@ function useNodesContext() {
         throw new Error("Provide a NodesContext");
     return value;
 }
-exports.useNodesContext = useNodesContext;
 exports.DndContext = (0, react_1.createContext)(null);
 function useDndContext() {
     const value = (0, react_1.useContext)(exports.DndContext);
@@ -25,9 +27,7 @@ function useDndContext() {
         throw new Error("Provide a DnDContext");
     return value;
 }
-exports.useDndContext = useDndContext;
 exports.DataUpdatesContext = (0, react_1.createContext)(0);
 function useDataUpdates() {
     (0, react_1.useContext)(exports.DataUpdatesContext);
 }
-exports.useDataUpdates = useDataUpdates;

package/dist/main/data/create-list.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createList = void 0;
+exports.createList = createList;
 function createList(tree) {
     if (tree.isFiltered) {
         return flattenAndFilterTree(tree.root, tree.isMatch.bind(tree));
@@ -9,7 +9,6 @@ function createList(tree) {
         return flattenTree(tree.root);
     }
 }
-exports.createList = createList;
 function flattenTree(root) {
     const list = [];
     function collect(node) {

package/dist/main/data/create-root.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createRoot = exports.ROOT_ID = void 0;
+exports.ROOT_ID = void 0;
+exports.createRoot = createRoot;
 const node_api_1 = require("../interfaces/node-api");
 exports.ROOT_ID = "__REACT_ARBORIST_INTERNAL_ROOT__";
 function createRoot(tree) {
@@ -40,4 +41,3 @@ function createRoot(tree) {
     });
     return root;
 }
-exports.createRoot = createRoot;

package/dist/main/data/make-tree.js

@@ -3,7 +3,7 @@
 // Each line is a node
 // The number of spaces at the beginning indicate the level
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeTree = void 0;
+exports.makeTree = makeTree;
 function makeTree(string) {
     const root = { id: "ROOT", name: "ROOT", isOpen: true };
     let prevNode = root;
@@ -37,4 +37,3 @@ function makeTree(string) {
     });
     return root;
 }
-exports.makeTree = makeTree;

package/dist/main/dnd/compute-drop.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.computeDrop = void 0;
+exports.computeDrop = computeDrop;
 const utils_1 = require("../utils");
 function measureHover(el, offset) {
     const rect = el.getBoundingClientRect();
@@ -140,4 +140,3 @@ function computeDrop(args) {
         cursor: lineCursor(above.rowIndex + 1, above.level + 1),
     };
 }
-exports.computeDrop = computeDrop;

package/dist/main/dnd/drag-hook.js

@@ -1,13 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDragHook = void 0;
+exports.useDragHook = useDragHook;
 const react_1 = require("react");
 const react_dnd_1 = require("react-dnd");
 const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
 const context_1 = require("../context");
 const dnd_slice_1 = require("../state/dnd-slice");
-const utils_1 = require("../utils");
-const create_root_1 = require("../data/create-root");
 function useDragHook(node) {
     const tree = (0, context_1.useTreeApi)();
     const ids = tree.selectedIds;
@@ -18,23 +16,10 @@ function useDragHook(node) {
             // This is fired once at the begging of a drag operation
             const dragIds = tree.isSelected(node.id) ? Array.from(ids) : [node.id];
             tree.dispatch(dnd_slice_1.actions.dragStart(node.id, dragIds));
-            return { id: node.id };
+            return { id: node.id, dragIds };
         },
         end: () => {
             tree.hideCursor();
-            let { parentId, index, dragIds } = tree.state.dnd;
-            // If they held down meta, we need to create a copy
-            // if (drop.dropEffect === "copy")
-            if (tree.canDrop()) {
-                (0, utils_1.safeRun)(tree.props.onMove, {
-                    dragIds,
-                    parentId: parentId === create_root_1.ROOT_ID ? null : parentId,
-                    index: index === null ? 0 : index, // When it's null it was dropped over a folder
-                    dragNodes: tree.dragNodes,
-                    parentNode: tree.get(parentId),
-                });
-                tree.open(parentId);
-            }
             tree.dispatch(dnd_slice_1.actions.dragEnd());
         },
     }), [ids, node]);
@@ -43,4 +28,3 @@ function useDragHook(node) {
     }, [preview]);
     return ref;
 }
-exports.useDragHook = useDragHook;

package/dist/main/dnd/drop-hook.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDropHook = void 0;
+exports.useDropHook = useDropHook;
 const react_dnd_1 = require("react-dnd");
 const context_1 = require("../context");
 const compute_drop_1 = require("./compute-drop");
 const dnd_slice_1 = require("../state/dnd-slice");
+const utils_1 = require("../utils");
+const create_root_1 = require("../data/create-root");
 function useDropHook(el, node) {
     const tree = (0, context_1.useTreeApi)();
     const [_, dropRef] = (0, react_dnd_1.useDrop)(() => ({
@@ -35,8 +37,16 @@ function useDropHook(el, node) {
         drop: (_, m) => {
             if (!m.canDrop())
                 return null;
+            let { parentId, index, dragIds } = tree.state.dnd;
+            (0, utils_1.safeRun)(tree.props.onMove, {
+                dragIds,
+                parentId: parentId === create_root_1.ROOT_ID ? null : parentId,
+                index: index === null ? 0 : index, // When it's null it was dropped over a folder
+                dragNodes: tree.dragNodes,
+                parentNode: tree.get(parentId),
+            });
+            tree.open(parentId);
         },
     }), [node, el.current, tree.props]);
     return dropRef;
 }
-exports.useDropHook = useDropHook;

package/dist/main/dnd/measure-hover.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.measureHover = void 0;
+exports.measureHover = measureHover;
 const utils_1 = require("../utils");
 function measureHover(el, offset, indent) {
     const nextEl = el.nextElementSibling;
@@ -18,4 +18,3 @@ function measureHover(el, offset, indent) {
     const level = (0, utils_1.bound)(Math.floor(x / indent), minLevel, maxLevel);
     return { level, inTopHalf, inBottomHalf, inMiddle };
 }
-exports.measureHover = measureHover;

package/dist/main/dnd/outer-drop-hook.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useOuterDrop = void 0;
+exports.useOuterDrop = useOuterDrop;
 const react_dnd_1 = require("react-dnd");
 const context_1 = require("../context");
 const compute_drop_1 = require("./compute-drop");
@@ -42,4 +42,3 @@ function useOuterDrop() {
     }), [tree]);
     drop(tree.listEl);
 }
-exports.useOuterDrop = useOuterDrop;

package/dist/main/hooks/use-fresh-node.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFreshNode = void 0;
+exports.useFreshNode = useFreshNode;
 const react_1 = require("react");
 const context_1 = require("../context");
 function useFreshNode(index) {
@@ -15,4 +15,3 @@ function useFreshNode(index) {
         // Return a fresh instance if the state values change
     }, [...Object.values(original.state), original]);
 }
-exports.useFreshNode = useFreshNode;

package/dist/main/hooks/use-simple-tree.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSimpleTree = void 0;
+exports.useSimpleTree = useSimpleTree;
 const react_1 = require("react");
 const simple_tree_1 = require("../data/simple-tree");
 let nextId = 0;
@@ -32,4 +32,3 @@ function useSimpleTree(initialData) {
     const controller = { onMove, onRename, onCreate, onDelete };
     return [data, controller];
 }
-exports.useSimpleTree = useSimpleTree;

package/dist/main/hooks/use-validated-props.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useValidatedProps = void 0;
+exports.useValidatedProps = useValidatedProps;
 const use_simple_tree_1 = require("./use-simple-tree");
 function useValidatedProps(props) {
     if (props.initialData && props.data) {
@@ -26,4 +26,3 @@ Use the data prop if you want to provide your own handlers.`);
         return props;
     }
 }
-exports.useValidatedProps = useValidatedProps;

package/dist/main/interfaces/tree-api.d.ts

@@ -62,11 +62,11 @@ export declare class TreeApi<T> {
             type: "SELECTION_ONLY";
             id: string;
         };
-        add: (id: string | IdObj | string[] | IdObj[]) => {
+        add: (id: string | string[] | IdObj | IdObj[]) => {
             type: "SELECTION_ADD";
             ids: string[];
         };
-        remove: (id: string | IdObj | string[] | IdObj[]) => {
+        remove: (id: string | string[] | IdObj | IdObj[]) => {
             type: "SELECTION_REMOVE";
             ids: string[];
         };
@@ -80,11 +80,11 @@ export declare class TreeApi<T> {
             mostRecent: string | null;
             type: "SELECTION_SET";
         };
-        mostRecent: (id: string | IdObj | null) => {
+        mostRecent: (id: string | null | IdObj) => {
             type: "SELECTION_MOST_RECENT";
             id: string | null;
         };
-        anchor: (id: string | IdObj | null) => {
+        anchor: (id: string | null | IdObj) => {
             type: "SELECTION_ANCHOR";
             id: string | null;
         };

package/dist/main/interfaces/tree-api.js

@@ -192,9 +192,9 @@ class TreeApi {
     createLeaf() {
         return this.create({ type: "leaf" });
     }
-    create(opts = {}) {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function* () {
+    create() {
+        return __awaiter(this, arguments, void 0, function* (opts = {}) {
+            var _a, _b;
             const parentId = opts.parentId === undefined
                 ? utils.getInsertParentId(this)
                 : opts.parentId;
@@ -347,6 +347,7 @@ class TreeApi {
             return;
         const id = identify(node);
         this.dispatch(selection_slice_1.actions.remove(id));
+        safeRun(this.props.onSelect, this.selectedNodes);
     }
     selectMulti(identity) {
         const node = this.get(identifyNull(identity));
@@ -588,14 +589,12 @@ class TreeApi {
         }
     }
     isEditable(data) {
-        var _a;
         const check = this.props.disableEdit || (() => false);
-        return (_a = !utils.access(data, check)) !== null && _a !== void 0 ? _a : true;
+        return !utils.access(data, check);
     }
     isDraggable(data) {
-        var _a;
         const check = this.props.disableDrag || (() => false);
-        return (_a = !utils.access(data, check)) !== null && _a !== void 0 ? _a : true;
+        return !utils.access(data, check);
     }
     isDragging(node) {
         const id = identifyNull(node);

package/dist/main/state/dnd-slice.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reducer = exports.actions = void 0;
+exports.actions = void 0;
+exports.reducer = reducer;
 const initial_1 = require("./initial");
 /* Actions */
 exports.actions = {
@@ -32,4 +33,3 @@ function reducer(state = (0, initial_1.initialState)()["dnd"], action) {
             return state;
     }
 }
-exports.reducer = reducer;

package/dist/main/state/drag-slice.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reducer = void 0;
+exports.reducer = reducer;
 const initial_1 = require("./initial");
 /* Reducer */
 function reducer(state = (0, initial_1.initialState)().nodes.drag, action) {
@@ -21,4 +21,3 @@ function reducer(state = (0, initial_1.initialState)().nodes.drag, action) {
             return state;
     }
 }
-exports.reducer = reducer;

package/dist/main/state/edit-slice.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reducer = exports.edit = void 0;
+exports.edit = edit;
+exports.reducer = reducer;
 /* Actions */
 function edit(id) {
     return { type: "EDIT", id };
 }
-exports.edit = edit;
 /* Reducer */
 function reducer(state = { id: null }, action) {
     if (action.type === "EDIT") {
@@ -15,4 +15,3 @@ function reducer(state = { id: null }, action) {
         return state;
     }
 }
-exports.reducer = reducer;

package/dist/main/state/focus-slice.js

@@ -1,16 +1,16 @@
 "use strict";
 /* Types */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reducer = exports.treeBlur = exports.focus = void 0;
+exports.focus = focus;
+exports.treeBlur = treeBlur;
+exports.reducer = reducer;
 /* Actions */
 function focus(id) {
     return { type: "FOCUS", id };
 }
-exports.focus = focus;
 function treeBlur() {
     return { type: "TREE_BLUR" };
 }
-exports.treeBlur = treeBlur;
 /* Reducer */
 function reducer(state = { id: null, treeFocused: false }, action) {
     if (action.type === "FOCUS") {
@@ -23,4 +23,3 @@ function reducer(state = { id: null, treeFocused: false }, action) {
         return state;
     }
 }
-exports.reducer = reducer;

package/dist/main/state/open-slice.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reducer = exports.actions = void 0;
+exports.actions = void 0;
+exports.reducer = reducer;
 /* Actions */
 exports.actions = {
     open(id, filtered) {
@@ -45,4 +46,3 @@ function reducer(state = { filtered: {}, unfiltered: {} }, action) {
         return Object.assign(Object.assign({}, state), { unfiltered: openMapReducer(state.unfiltered, action) });
     }
 }
-exports.reducer = reducer;

package/dist/main/state/root-reducer.d.ts

@@ -44,11 +44,11 @@ export declare const rootReducer: import("redux").Reducer<{
         type: "SELECTION_ONLY";
         id: string;
     };
-    add: (id: string | import("../types/utils").IdObj | string[] | import("../types/utils").IdObj[]) => {
+    add: (id: string | string[] | import("../types/utils").IdObj | import("../types/utils").IdObj[]) => {
         type: "SELECTION_ADD";
         ids: string[];
     };
-    remove: (id: string | import("../types/utils").IdObj | string[] | import("../types/utils").IdObj[]) => {
+    remove: (id: string | string[] | import("../types/utils").IdObj | import("../types/utils").IdObj[]) => {
         type: "SELECTION_REMOVE";
         ids: string[];
     };
@@ -62,11 +62,11 @@ export declare const rootReducer: import("redux").Reducer<{
         mostRecent: string | null;
         type: "SELECTION_SET";
     };
-    mostRecent: (id: string | import("../types/utils").IdObj | null) => {
+    mostRecent: (id: string | null | import("../types/utils").IdObj) => {
         type: "SELECTION_MOST_RECENT";
         id: string | null;
     };
-    anchor: (id: string | import("../types/utils").IdObj | null) => {
+    anchor: (id: string | null | import("../types/utils").IdObj) => {
         type: "SELECTION_ANCHOR";
         id: string | null;
     };

package/dist/main/state/selection-slice.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reducer = exports.actions = void 0;
+exports.actions = void 0;
+exports.reducer = reducer;
 const utils_1 = require("../utils");
 const initial_1 = require("./initial");
 /* Actions */
@@ -56,4 +57,3 @@ function reducer(state = (0, initial_1.initialState)()["nodes"]["selection"], ac
             return state;
     }
 }
-exports.reducer = reducer;

package/dist/main/utils.js

@@ -1,23 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInsertParentId = exports.getInsertIndex = exports.waitFor = exports.safeRun = exports.mergeRefs = exports.identify = exports.identifyNull = exports.access = exports.focusPrevElement = exports.focusNextElement = exports.walk = exports.dfs = exports.noop = exports.indexOf = exports.isDescendant = exports.isOpenWithEmptyChildren = exports.isClosed = exports.isItem = exports.bound = void 0;
+exports.indexOf = exports.isDescendant = void 0;
+exports.bound = bound;
+exports.isItem = isItem;
+exports.isClosed = isClosed;
+exports.isOpenWithEmptyChildren = isOpenWithEmptyChildren;
+exports.noop = noop;
+exports.dfs = dfs;
+exports.walk = walk;
+exports.focusNextElement = focusNextElement;
+exports.focusPrevElement = focusPrevElement;
+exports.access = access;
+exports.identifyNull = identifyNull;
+exports.identify = identify;
+exports.mergeRefs = mergeRefs;
+exports.safeRun = safeRun;
+exports.waitFor = waitFor;
+exports.getInsertIndex = getInsertIndex;
+exports.getInsertParentId = getInsertParentId;
 function bound(n, min, max) {
     return Math.max(Math.min(n, max), min);
 }
-exports.bound = bound;
 function isItem(node) {
     return node && node.isLeaf;
 }
-exports.isItem = isItem;
 function isClosed(node) {
     return node && node.isInternal && !node.isOpen;
 }
-exports.isClosed = isClosed;
 function isOpenWithEmptyChildren(node) {
     var _a;
     return node && node.isOpen && !((_a = node.children) === null || _a === void 0 ? void 0 : _a.length);
 }
-exports.isOpenWithEmptyChildren = isOpenWithEmptyChildren;
 /**
  * Is first param a descendant of the second param
  */
@@ -38,7 +51,6 @@ const indexOf = (node) => {
 };
 exports.indexOf = indexOf;
 function noop() { }
-exports.noop = noop;
 function dfs(node, id) {
     if (!node)
         return null;
@@ -53,7 +65,6 @@ function dfs(node, id) {
     }
     return null;
 }
-exports.dfs = dfs;
 function walk(node, fn) {
     fn(node);
     if (node.children) {
@@ -62,7 +73,6 @@ function walk(node, fn) {
         }
     }
 }
-exports.walk = walk;
 function focusNextElement(target) {
     const elements = getFocusable(target);
     let next;
@@ -76,7 +86,6 @@ function focusNextElement(target) {
     // @ts-ignore ??
     next === null || next === void 0 ? void 0 : next.focus();
 }
-exports.focusNextElement = focusNextElement;
 function focusPrevElement(target) {
     const elements = getFocusable(target);
     let next;
@@ -90,7 +99,6 @@ function focusPrevElement(target) {
     // @ts-ignore
     next === null || next === void 0 ? void 0 : next.focus();
 }
-exports.focusPrevElement = focusPrevElement;
 function nextItem(list, index) {
     if (index + 1 < list.length) {
         return list[index + 1];
@@ -117,18 +125,15 @@ function access(obj, accessor) {
         return obj[accessor];
     return accessor(obj);
 }
-exports.access = access;
 function identifyNull(obj) {
     if (obj === null)
         return null;
     else
         return identify(obj);
 }
-exports.identifyNull = identifyNull;
 function identify(obj) {
     return typeof obj === "string" ? obj : obj.id;
 }
-exports.identify = identify;
 function mergeRefs(...refs) {
     return (instance) => {
         refs.forEach((ref) => {
@@ -141,12 +146,10 @@ function mergeRefs(...refs) {
         });
     };
 }
-exports.mergeRefs = mergeRefs;
 function safeRun(fn, ...args) {
     if (fn)
         return fn(...args);
 }
-exports.safeRun = safeRun;
 function waitFor(fn) {
     return new Promise((resolve, reject) => {
         let tries = 0;
@@ -162,7 +165,6 @@ function waitFor(fn) {
         check();
     });
 }
-exports.waitFor = waitFor;
 function getInsertIndex(tree) {
     var _a, _b;
     const focus = tree.focusedNode;
@@ -174,7 +176,6 @@ function getInsertIndex(tree) {
         return focus.childIndex + 1;
     return 0;
 }
-exports.getInsertIndex = getInsertIndex;
 function getInsertParentId(tree) {
     const focus = tree.focusedNode;
     if (!focus)
@@ -185,4 +186,3 @@ function getInsertParentId(tree) {
         return focus.parent.id;
     return null;
 }
-exports.getInsertParentId = getInsertParentId;

package/dist/module/components/list-outer-element.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ListOuterElement: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<unknown>>;

package/dist/module/components/tree.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { TreeApi } from "../interfaces/tree-api";
 import { TreeProps } from "../types/tree-props";
 declare function TreeComponent<T>(props: TreeProps<T>, ref: React.Ref<TreeApi<T> | undefined>): import("react/jsx-runtime").JSX.Element;
 export declare const Tree: <T>(props: TreeProps<T> & {
-    ref?: import("react").ForwardedRef<TreeApi<T> | undefined> | undefined;
+    ref?: React.ForwardedRef<TreeApi<T> | undefined>;
 }) => ReturnType<typeof TreeComponent>;
 export {};

package/dist/module/dnd/drag-hook.js

@@ -3,8 +3,6 @@ import { useDrag } from "react-dnd";
 import { getEmptyImage } from "react-dnd-html5-backend";
 import { useTreeApi } from "../context";
 import { actions as dnd } from "../state/dnd-slice";
-import { safeRun } from "../utils";
-import { ROOT_ID } from "../data/create-root";
 export function useDragHook(node) {
     const tree = useTreeApi();
     const ids = tree.selectedIds;
@@ -15,23 +13,10 @@ export function useDragHook(node) {
             // This is fired once at the begging of a drag operation
             const dragIds = tree.isSelected(node.id) ? Array.from(ids) : [node.id];
             tree.dispatch(dnd.dragStart(node.id, dragIds));
-            return { id: node.id };
+            return { id: node.id, dragIds };
         },
         end: () => {
             tree.hideCursor();
-            let { parentId, index, dragIds } = tree.state.dnd;
-            // If they held down meta, we need to create a copy
-            // if (drop.dropEffect === "copy")
-            if (tree.canDrop()) {
-                safeRun(tree.props.onMove, {
-                    dragIds,
-                    parentId: parentId === ROOT_ID ? null : parentId,
-                    index: index === null ? 0 : index, // When it's null it was dropped over a folder
-                    dragNodes: tree.dragNodes,
-                    parentNode: tree.get(parentId),
-                });
-                tree.open(parentId);
-            }
             tree.dispatch(dnd.dragEnd());
         },
     }), [ids, node]);

package/dist/module/dnd/drop-hook.js

@@ -2,6 +2,8 @@ import { useDrop } from "react-dnd";
 import { useTreeApi } from "../context";
 import { computeDrop } from "./compute-drop";
 import { actions as dnd } from "../state/dnd-slice";
+import { safeRun } from "../utils";
+import { ROOT_ID } from "../data/create-root";
 export function useDropHook(el, node) {
     const tree = useTreeApi();
     const [_, dropRef] = useDrop(() => ({
@@ -32,6 +34,15 @@ export function useDropHook(el, node) {
         drop: (_, m) => {
             if (!m.canDrop())
                 return null;
+            let { parentId, index, dragIds } = tree.state.dnd;
+            safeRun(tree.props.onMove, {
+                dragIds,
+                parentId: parentId === ROOT_ID ? null : parentId,
+                index: index === null ? 0 : index, // When it's null it was dropped over a folder
+                dragNodes: tree.dragNodes,
+                parentNode: tree.get(parentId),
+            });
+            tree.open(parentId);
         },
     }), [node, el.current, tree.props]);
     return dropRef;

package/dist/module/interfaces/tree-api.d.ts

@@ -62,11 +62,11 @@ export declare class TreeApi<T> {
             type: "SELECTION_ONLY";
             id: string;
         };
-        add: (id: string | IdObj | string[] | IdObj[]) => {
+        add: (id: string | string[] | IdObj | IdObj[]) => {
             type: "SELECTION_ADD";
             ids: string[];
         };
-        remove: (id: string | IdObj | string[] | IdObj[]) => {
+        remove: (id: string | string[] | IdObj | IdObj[]) => {
             type: "SELECTION_REMOVE";
             ids: string[];
         };
@@ -80,11 +80,11 @@ export declare class TreeApi<T> {
             mostRecent: string | null;
             type: "SELECTION_SET";
         };
-        mostRecent: (id: string | IdObj | null) => {
+        mostRecent: (id: string | null | IdObj) => {
             type: "SELECTION_MOST_RECENT";
             id: string | null;
         };
-        anchor: (id: string | IdObj | null) => {
+        anchor: (id: string | null | IdObj) => {
             type: "SELECTION_ANCHOR";
             id: string | null;
         };

package/dist/module/interfaces/tree-api.js

@@ -166,9 +166,9 @@ export class TreeApi {
     createLeaf() {
         return this.create({ type: "leaf" });
     }
-    create(opts = {}) {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function* () {
+    create() {
+        return __awaiter(this, arguments, void 0, function* (opts = {}) {
+            var _a, _b;
             const parentId = opts.parentId === undefined
                 ? utils.getInsertParentId(this)
                 : opts.parentId;
@@ -321,6 +321,7 @@ export class TreeApi {
             return;
         const id = identify(node);
         this.dispatch(selection.remove(id));
+        safeRun(this.props.onSelect, this.selectedNodes);
     }
     selectMulti(identity) {
         const node = this.get(identifyNull(identity));
@@ -562,14 +563,12 @@ export class TreeApi {
         }
     }
     isEditable(data) {
-        var _a;
         const check = this.props.disableEdit || (() => false);
-        return (_a = !utils.access(data, check)) !== null && _a !== void 0 ? _a : true;
+        return !utils.access(data, check);
     }
     isDraggable(data) {
-        var _a;
         const check = this.props.disableDrag || (() => false);
-        return (_a = !utils.access(data, check)) !== null && _a !== void 0 ? _a : true;
+        return !utils.access(data, check);
     }
     isDragging(node) {
         const id = identifyNull(node);

package/dist/module/state/root-reducer.d.ts

@@ -44,11 +44,11 @@ export declare const rootReducer: import("redux").Reducer<{
         type: "SELECTION_ONLY";
         id: string;
     };
-    add: (id: string | import("../types/utils").IdObj | string[] | import("../types/utils").IdObj[]) => {
+    add: (id: string | string[] | import("../types/utils").IdObj | import("../types/utils").IdObj[]) => {
         type: "SELECTION_ADD";
         ids: string[];
     };
-    remove: (id: string | import("../types/utils").IdObj | string[] | import("../types/utils").IdObj[]) => {
+    remove: (id: string | string[] | import("../types/utils").IdObj | import("../types/utils").IdObj[]) => {
         type: "SELECTION_REMOVE";
         ids: string[];
     };
@@ -62,11 +62,11 @@ export declare const rootReducer: import("redux").Reducer<{
         mostRecent: string | null;
         type: "SELECTION_SET";
     };
-    mostRecent: (id: string | import("../types/utils").IdObj | null) => {
+    mostRecent: (id: string | null | import("../types/utils").IdObj) => {
         type: "SELECTION_MOST_RECENT";
         id: string | null;
     };
-    anchor: (id: string | import("../types/utils").IdObj | null) => {
+    anchor: (id: string | null | import("../types/utils").IdObj) => {
         type: "SELECTION_ANCHOR";
         id: string | null;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-arborist",
-  "version": "3.4.0",
+  "version": "3.4.2",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/main/index.js",
@@ -57,6 +57,6 @@
     "npm-run-all": "^4.1.5",
     "rimraf": "^5.0.5",
     "ts-jest": "^29.1.1",
-    "typescript": "^5.3.3"
+    "typescript": "^5.6.0"
   }
 }

package/src/dnd/drag-hook.ts

@@ -6,8 +6,6 @@ import { NodeApi } from "../interfaces/node-api";
 import { DragItem } from "../types/dnd";
 import { DropResult } from "./drop-hook";
 import { actions as dnd } from "../state/dnd-slice";
-import { safeRun } from "../utils";
-import { ROOT_ID } from "../data/create-root";
 
 export function useDragHook<T>(node: NodeApi<T>): ConnectDragSource {
   const tree = useTreeApi();
@@ -20,27 +18,14 @@ export function useDragHook<T>(node: NodeApi<T>): ConnectDragSource {
         // This is fired once at the begging of a drag operation
         const dragIds = tree.isSelected(node.id) ? Array.from(ids) : [node.id];
         tree.dispatch(dnd.dragStart(node.id, dragIds));
-        return { id: node.id };
+        return { id: node.id, dragIds };
       },
       end: () => {
         tree.hideCursor();
-        let { parentId, index, dragIds } = tree.state.dnd;
-        // If they held down meta, we need to create a copy
-        // if (drop.dropEffect === "copy")
-        if (tree.canDrop()) {
-          safeRun(tree.props.onMove, {
-            dragIds,
-            parentId: parentId === ROOT_ID ? null : parentId,
-            index: index === null ? 0 : index, // When it's null it was dropped over a folder
-            dragNodes: tree.dragNodes,
-            parentNode: tree.get(parentId),
-          });
-          tree.open(parentId);
-        }
         tree.dispatch(dnd.dragEnd());
       },
     }),
-    [ids, node]
+    [ids, node],
   );
 
   useEffect(() => {

package/src/dnd/drop-hook.ts

@@ -5,6 +5,8 @@ import { NodeApi } from "../interfaces/node-api";
 import { DragItem } from "../types/dnd";
 import { computeDrop } from "./compute-drop";
 import { actions as dnd } from "../state/dnd-slice";
+import { safeRun } from "../utils";
+import { ROOT_ID } from "../data/create-root";
 
 export type DropResult = {
   parentId: string | null;
@@ -13,7 +15,7 @@ export type DropResult = {
 
 export function useDropHook(
   el: RefObject<HTMLElement | null>,
-  node: NodeApi<any>
+  node: NodeApi<any>,
 ): ConnectDropTarget {
   const tree = useTreeApi();
   const [_, dropRef] = useDrop<DragItem, DropResult | null, void>(
@@ -41,9 +43,18 @@ export function useDropHook(
       },
       drop: (_, m) => {
         if (!m.canDrop()) return null;
+        let { parentId, index, dragIds } = tree.state.dnd;
+        safeRun(tree.props.onMove, {
+          dragIds,
+          parentId: parentId === ROOT_ID ? null : parentId,
+          index: index === null ? 0 : index, // When it's null it was dropped over a folder
+          dragNodes: tree.dragNodes,
+          parentNode: tree.get(parentId),
+        });
+        tree.open(parentId);
       },
     }),
-    [node, el.current, tree.props]
+    [node, el.current, tree.props],
   );
 
   return dropRef;

package/src/interfaces/tree-api.ts

@@ -342,6 +342,7 @@ export class TreeApi<T> {
     if (!node) return;
     const id = identify(node);
     this.dispatch(selection.remove(id));
+    safeRun(this.props.onSelect, this.selectedNodes);
   }
 
   selectMulti(identity: Identity) {
@@ -593,12 +594,12 @@ export class TreeApi<T> {
 
   isEditable(data: T) {
     const check = this.props.disableEdit || (() => false);
-    return !utils.access(data, check) ?? true;
+    return !utils.access(data, check);
   }
 
   isDraggable(data: T) {
     const check = this.props.disableDrag || (() => false);
-    return !utils.access(data, check) ?? true;
+    return !utils.access(data, check);
   }
 
   isDragging(node: string | IdObj | null) {