react-arborist 3.1.0 → 3.3.0-rc.1

package/dist/state/dnd-slice.d.ts

@@ -5,7 +5,7 @@ export declare type DndState = {
     cursor: Cursor;
     dragIds: string[];
     parentId: null | string;
-    index: number;
+    index: number | null;
 };
 export declare const actions: {
     cursor(cursor: Cursor): {
@@ -20,10 +20,10 @@ export declare const actions: {
     dragEnd(): {
         type: "DND_DRAG_END";
     };
-    hovering(parentId: string | null, index: number): {
+    hovering(parentId: string | null, index: number | null): {
         type: "DND_HOVERING";
         parentId: string | null;
-        index: number;
+        index: number | null;
     };
 };
 export declare function reducer(state: DndState | undefined, action: ActionTypes<typeof actions>): DndState;

package/dist/state/drag-slice.d.ts

@@ -2,6 +2,8 @@ import { ActionTypes } from "../types/utils";
 import { actions as dnd } from "./dnd-slice";
 export declare type DragSlice = {
     id: string | null;
-    idWillReceiveDrop: string | null;
+    selectedIds: string[];
+    destinationParentId: string | null;
+    destinationIndex: number | null;
 };
 export declare function reducer(state: DragSlice | undefined, action: ActionTypes<typeof dnd>): DragSlice;

package/dist/state/selection-slice.d.ts

@@ -20,9 +20,15 @@ export declare const actions: {
         type: "SELECTION_REMOVE";
         ids: string[];
     };
-    set: (ids: Set<string>) => {
-        type: "SELECTION_SET";
+    set: (args: {
+        ids: Set<string>;
+        anchor: string | null;
+        mostRecent: string | null;
+    }) => {
         ids: Set<string>;
+        anchor: string | null;
+        mostRecent: string | null;
+        type: "SELECTION_SET";
     };
     mostRecent: (id: string | null | IdObj) => {
         type: "SELECTION_MOST_RECENT";

package/dist/utils.d.ts

@@ -5,9 +5,9 @@ export declare function bound(n: number, min: number, max: number): number;
 export declare function isItem(node: NodeApi<any> | null): boolean | null;
 export declare function isClosed(node: NodeApi<any> | null): boolean | null;
 /**
- * Is first param a decendent of the second param
+ * Is first param a descendant of the second param
  */
-export declare const isDecendent: (a: NodeApi<any>, b: NodeApi<any>) => boolean;
+export declare const isDescendant: (a: NodeApi<any>, b: NodeApi<any>) => boolean;
 export declare const indexOf: (node: NodeApi<any>) => number;
 export declare function noop(): void;
 export declare function dfs(node: NodeApi<any>, id: string): NodeApi<any> | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-arborist",
-  "version": "3.1.0",
+  "version": "3.3.0-rc.1",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/index.js",

package/src/components/provider.tsx

@@ -14,7 +14,6 @@ import {
   TreeApiContext,
 } from "../context";
 import { TreeApi } from "../interfaces/tree-api";
-import { IdObj } from "../types/utils";
 import { initialState } from "../state/initial";
 import { rootReducer, RootState } from "../state/root-reducer";
 import { HTML5Backend } from "react-dnd-html5-backend";

package/src/dnd/compute-drop.ts

@@ -26,7 +26,7 @@ function getNodesAroundCursor(
   hover: HoverData
 ): [NodeApi | null, NodeApi | null] {
   if (!node) {
-    // We're hoving over the empty part of the list, not over an item,
+    // We're hovering over the empty part of the list, not over an item,
     // Put the cursor below the last item which is "prev"
     return [prev, null];
   }
@@ -83,7 +83,10 @@ export type ComputedDrop = {
   cursor: Cursor | null;
 };
 
-function dropAt(parentId: string | undefined, index: number): DropResult {
+function dropAt(
+  parentId: string | undefined,
+  index: number | null
+): DropResult {
   return { parentId: parentId || null, index };
 }
 
@@ -135,7 +138,7 @@ export function computeDrop(args: Args): ComputedDrop {
   /* Hovering over the middle of a folder */
   if (node && node.isInternal && hover.inMiddle) {
     return {
-      drop: dropAt(node.id, 0),
+      drop: dropAt(node.id, null),
       cursor: highlightCursor(node.id),
     };
   }

package/src/dnd/drag-hook.ts

@@ -31,7 +31,7 @@ export function useDragHook<T>(node: NodeApi<T>): ConnectDragSource {
           safeRun(tree.props.onMove, {
             dragIds,
             parentId: parentId === ROOT_ID ? null : parentId,
-            index,
+            index: index === null ? 0 : index, // When it's null it was dropped over a folder
             dragNodes: tree.dragNodes,
             parentNode: tree.get(parentId),
           });

package/src/dnd/drop-hook.ts

@@ -8,7 +8,7 @@ import { actions as dnd } from "../state/dnd-slice";
 
 export type DropResult = {
   parentId: string | null;
-  index: number;
+  index: number | null;
 };
 
 export function useDropHook(

package/src/interfaces/node-api.ts

@@ -130,6 +130,16 @@ export class NodeApi<T = any> {
     return this.parent?.children![i + 1] ?? null;
   }
 
+  isAncestorOf(node: NodeApi<T> | null) {
+    if (!node) return false;
+    let ancestor: NodeApi<T> | null = node;
+    while (ancestor) {
+      if (ancestor.id === this.id) return true;
+      ancestor = ancestor.parent;
+    }
+    return false;
+  }
+
   select() {
     this.tree.select(this);
   }

package/src/interfaces/tree-api.ts

@@ -370,21 +370,33 @@ export class TreeApi<T> {
   }
 
   deselectAll() {
-    this.dispatch(selection.clear());
-    this.dispatch(selection.anchor(null));
-    this.dispatch(selection.mostRecent(null));
+    this.setSelection({ ids: [], anchor: null, mostRecent: null });
     safeRun(this.props.onSelect, this.selectedNodes);
   }
 
   selectAll() {
-    this.dispatch(selection.set(new Set(Object.keys(this.idToIndex))));
+    this.setSelection({
+      ids: Object.keys(this.idToIndex),
+      anchor: this.firstNode,
+      mostRecent: this.lastNode,
+    });
     this.dispatch(focus(this.lastNode?.id));
-    this.dispatch(selection.anchor(this.firstNode));
-    this.dispatch(selection.mostRecent(this.lastNode));
     if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
     safeRun(this.props.onSelect, this.selectedNodes);
   }
 
+  setSelection(args: {
+    ids: (IdObj | string)[] | null;
+    anchor: IdObj | string | null;
+    mostRecent: IdObj | string | null;
+  }) {
+    const ids = new Set(args.ids?.map(identify));
+    const anchor = identifyNull(args.anchor);
+    const mostRecent = identifyNull(args.mostRecent);
+    this.dispatch(selection.set({ ids, anchor, mostRecent }));
+    safeRun(this.props.onSelect, this.selectedNodes);
+  }
+
   /* Drag and Drop */
 
   get cursorParentId() {
@@ -407,6 +419,18 @@ export class TreeApi<T> {
       .filter((n) => !!n) as NodeApi<T>[];
   }
 
+  get dragNode() {
+    return this.get(this.state.nodes.drag.id);
+  }
+
+  get dragDestinationParent() {
+    return this.get(this.state.nodes.drag.destinationParentId);
+  }
+
+  get dragDestinationIndex() {
+    return this.state.nodes.drag.destinationIndex;
+  }
+
   canDrop() {
     if (this.isFiltered) return false;
     const parentNode = this.get(this.state.dnd.parentId) ?? this.root;
@@ -416,7 +440,7 @@ export class TreeApi<T> {
     for (const drag of dragNodes) {
       if (!drag) return false;
       if (!parentNode) return false;
-      if (drag.isInternal && utils.isDecendent(parentNode, drag)) return false;
+      if (drag.isInternal && utils.isDescendant(parentNode, drag)) return false;
     }
 
     // Allow the user to insert their own logic
@@ -424,7 +448,7 @@ export class TreeApi<T> {
       return !isDisabled({
         parentNode,
         dragNodes: this.dragNodes,
-        index: this.state.dnd.index,
+        index: this.state.dnd.index || 0,
       });
     } else if (typeof isDisabled == "string") {
       // @ts-ignore
@@ -594,7 +618,8 @@ export class TreeApi<T> {
   willReceiveDrop(node: string | IdObj | null) {
     const id = identifyNull(node);
     if (!id) return false;
-    return id === this.state.nodes.drag.idWillReceiveDrop;
+    const { destinationParentId, destinationIndex } = this.state.nodes.drag;
+    return id === destinationParentId && destinationIndex === null;
   }
 
   /* Tree Event Handlers */

package/src/state/dnd-slice.ts

@@ -8,7 +8,7 @@ export type DndState = {
   cursor: Cursor;
   dragIds: string[];
   parentId: null | string;
-  index: number;
+  index: number | null;
 };
 
 /* Actions */
@@ -22,7 +22,7 @@ export const actions = {
   dragEnd() {
     return { type: "DND_DRAG_END" as const };
   },
-  hovering(parentId: string | null, index: number) {
+  hovering(parentId: string | null, index: number | null) {
     return { type: "DND_HOVERING" as const, parentId, index };
   },
 };

package/src/state/drag-slice.ts

@@ -1,27 +1,43 @@
 import { ActionTypes } from "../types/utils";
 import { actions as dnd } from "./dnd-slice";
+import { initialState } from "./initial";
 
 /* Types */
 
-export type DragSlice = { id: string | null; idWillReceiveDrop: string | null };
+export type DragSlice = {
+  id: string | null;
+  selectedIds: string[];
+  destinationParentId: string | null;
+  destinationIndex: number | null;
+};
 
 /* Reducer */
 
 export function reducer(
-  state: DragSlice = { id: null, idWillReceiveDrop: null },
+  state: DragSlice = initialState().nodes.drag,
   action: ActionTypes<typeof dnd>
-) {
+): DragSlice {
   switch (action.type) {
     case "DND_DRAG_START":
-      return { ...state, id: action.id };
+      return { ...state, id: action.id, selectedIds: action.dragIds };
     case "DND_DRAG_END":
-      return { ...state, id: null };
-    case "DND_CURSOR":
-      const c = action.cursor;
-      if (c.type === "highlight" && c.id !== state.idWillReceiveDrop) {
-        return { ...state, idWillReceiveDrop: c.id };
-      } else if (c.type !== "highlight" && state.idWillReceiveDrop !== null) {
-        return { ...state, idWillReceiveDrop: null };
+      return {
+        ...state,
+        id: null,
+        destinationParentId: null,
+        destinationIndex: null,
+        selectedIds: [],
+      };
+    case "DND_HOVERING":
+      if (
+        action.parentId !== state.destinationParentId ||
+        action.index != state.destinationIndex
+      ) {
+        return {
+          ...state,
+          destinationParentId: action.parentId,
+          destinationIndex: action.index,
+        };
       } else {
         return state;
       }

package/src/state/initial.ts

@@ -7,7 +7,12 @@ export const initialState = (props?: TreeProps<any>): RootState => ({
     open: { filtered: {}, unfiltered: props?.initialOpenState ?? {} },
     focus: { id: null, treeFocused: false },
     edit: { id: null },
-    drag: { id: null, idWillReceiveDrop: null },
+    drag: {
+      id: null,
+      selectedIds: [],
+      destinationParentId: null,
+      destinationIndex: null,
+    },
     selection: { ids: new Set(), anchor: null, mostRecent: null },
   },
   dnd: {

package/src/state/selection-slice.ts

@@ -28,9 +28,13 @@ export const actions = {
     ids: (Array.isArray(id) ? id : [id]).map(identify),
   }),
 
-  set: (ids: Set<string>) => ({
+  set: (args: {
+    ids: Set<string>;
+    anchor: string | null;
+    mostRecent: string | null;
+  }) => ({
     type: "SELECTION_SET" as const,
-    ids,
+    ...args,
   }),
 
   mostRecent: (id: string | null | IdObj) => ({
@@ -64,7 +68,12 @@ export function reducer(
       action.ids.forEach((id) => ids.delete(id));
       return { ...state, ids: new Set(ids) };
     case "SELECTION_SET":
-      return { ...state, ids: new Set(action.ids) };
+      return {
+        ...state,
+        ids: action.ids,
+        mostRecent: action.mostRecent,
+        anchor: action.anchor,
+      };
     case "SELECTION_MOST_RECENT":
       return { ...state, mostRecent: action.id };
     case "SELECTION_ANCHOR":

package/src/types/tree-props.ts

@@ -5,7 +5,7 @@ import { ElementType, MouseEventHandler } from "react";
 import { ListOnScrollProps } from "react-window";
 import { NodeApi } from "../interfaces/node-api";
 import { OpenMap } from "../state/open-slice";
-import { useDragDropManager } from "react-dnd"
+import { useDragDropManager } from "react-dnd";
 
 export interface TreeProps<T> {
   /* Data Options */
@@ -76,5 +76,5 @@ export interface TreeProps<T> {
   dndRootElement?: globalThis.Node | null;
   onClick?: MouseEventHandler;
   onContextMenu?: MouseEventHandler;
-  dndManager?: ReturnType<typeof useDragDropManager>
+  dndManager?: ReturnType<typeof useDragDropManager>;
 }

package/src/utils.ts

@@ -15,9 +15,9 @@ export function isClosed(node: NodeApi<any> | null) {
 }
 
 /**
- * Is first param a decendent of the second param
+ * Is first param a descendant of the second param
  */
-export const isDecendent = (a: NodeApi<any>, b: NodeApi<any>) => {
+export const isDescendant = (a: NodeApi<any>, b: NodeApi<any>) => {
   let n: NodeApi<any> | null = a;
   while (n) {
     if (n.id === b.id) return true;