react-arborist 2.0.0-rc.2 → 2.1.0

package/README.md

@@ -78,6 +78,10 @@ function App() {
 }
 ```
 
+<img width="214" alt="image" src="https://user-images.githubusercontent.com/3460638/198098015-d7dc6400-6391-4094-9f66-0f56a99433e9.png">
+
+[Demo](https://codesandbox.io/s/the-simplest-tree-7tbedw)
+
 ### Customize the Appearance
 
 We provide our own dimensions and our own `Node` component.
@@ -112,6 +116,10 @@ function Node({ node, style, dragHandle }) {
 }
 ```
 
+<img width="166" alt="image" src="https://user-images.githubusercontent.com/3460638/198100281-594a492d-2ea0-4ff0-883d-1dd79dbb5acd.png">
+
+[Demo](https://codesandbox.io/s/customize-appearance-f4g15v?file=/src/App.tsx)
+
 ### Control the Tree data
 
 Here we use the _data_ prop to make the tree a controlled component. We must handle all the data modifications ourselves using the props below.
@@ -254,7 +262,7 @@ function App() {
 These are all the props you can pass to the Tree component.
 
 ```ts
-interface TreeProps<T extends IdObj> {
+interface TreeProps<T> {
   /* Data Options */
   data?: T[];
   initialData?: T[];
@@ -319,7 +327,7 @@ interface TreeProps<T extends IdObj> {
 The _\<RowRenderer\>_ is responsible for attaching the drop ref, the row style (top, height) and the aria-attributes. The default should work fine for most use cases, but it can be replaced by your own component if you need. See the _renderRow_ prop in the _\<Tree\>_ component.
 
 ```ts
-type RowRendererProps<T extends IdObj> = {
+type RowRendererProps<T> = {
   node: NodeApi<T>;
   innerRef: (el: HTMLDivElement | null) => void;
   attrs: HTMLAttributes<any>;
@@ -334,7 +342,7 @@ The _\<NodeRenderer\>_ is responsible for attaching the drag ref, the node style
 There is a default renderer, but it's only there as a placeholder to get started. You'll want to create your own component for this. It is passed as the _\<Tree\>_ components only child.
 
 ```ts
-export type NodeRendererProps<T extends IdObj> = {
+export type NodeRendererProps<T> = {
   style: CSSProperties;
   node: NodeApi<T>;
   tree: TreeApi<T>;

package/dist/components/default-node.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 import { NodeRendererProps } from "../types/renderers";
-import { IdObj } from "../types/utils";
-export declare function DefaultNode<T extends IdObj>(props: NodeRendererProps<T>): JSX.Element;
+export declare function DefaultNode<T>(props: NodeRendererProps<T>): JSX.Element;

package/dist/components/default-row.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 import { RowRendererProps } from "../types/renderers";
-import { IdObj } from "../types/utils";
-export declare function DefaultRow<T extends IdObj>({ node, attrs, innerRef, children, }: RowRendererProps<T>): JSX.Element;
+export declare function DefaultRow<T>({ node, attrs, innerRef, children, }: RowRendererProps<T>): JSX.Element;

package/dist/components/provider.d.ts

@@ -1,11 +1,10 @@
 import { ReactNode } from "react";
 import { TreeApi } from "../interfaces/tree-api";
-import { IdObj } from "../types/utils";
 import { TreeProps } from "../types/tree-props";
-declare type Props<T extends IdObj> = {
+declare type Props<T> = {
     treeProps: TreeProps<T>;
     imperativeHandle: React.Ref<TreeApi<T> | undefined>;
     children: ReactNode;
 };
-export declare function TreeProvider<T extends IdObj>({ treeProps, imperativeHandle, children, }: Props<T>): JSX.Element;
+export declare function TreeProvider<T>({ treeProps, imperativeHandle, children, }: Props<T>): JSX.Element;
 export {};

package/dist/components/row-container.d.ts

@@ -1,8 +1,7 @@
 import React from "react";
-import { IdObj } from "../types/utils";
 declare type Props = {
     style: React.CSSProperties;
     index: number;
 };
-export declare const RowContainer: React.MemoExoticComponent<(<T extends IdObj>({ index, style, }: Props) => JSX.Element)>;
+export declare const RowContainer: React.MemoExoticComponent<(<T>({ index, style, }: Props) => JSX.Element)>;
 export {};

package/dist/components/tree.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
 import { TreeApi } from "../interfaces/tree-api";
 import { TreeProps } from "../types/tree-props";
-import { IdObj } from "../types/utils";
-export declare const Tree: <T extends IdObj>(props: TreeProps<T> & import("react").RefAttributes<TreeApi<T> | undefined>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export declare const Tree: <T>(props: TreeProps<T> & import("react").RefAttributes<TreeApi<T> | undefined>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/dist/context.d.ts

@@ -1,8 +1,7 @@
 import React from "react";
 import { TreeApi } from "./interfaces/tree-api";
-import { IdObj } from "./types/utils";
 export declare const TreeApiContext: React.Context<TreeApi<any> | null>;
-export declare function useTreeApi<T extends IdObj>(): TreeApi<T>;
+export declare function useTreeApi<T>(): TreeApi<T>;
 export declare const NodesContext: React.Context<import("redux").CombinedState<{
     focus: import("./state/focus-slice").FocusState;
     edit: import("./state/edit-slice").EditState;

package/dist/data/create-index.d.ts

@@ -1,5 +1,4 @@
 import { NodeApi } from "../interfaces/node-api";
-import { IdObj } from "../types/utils";
-export declare const createIndex: <T extends IdObj>(nodes: NodeApi<T>[]) => {
+export declare const createIndex: <T>(nodes: NodeApi<T>[]) => {
     [id: string]: number;
 };

package/dist/data/create-list.d.ts

@@ -1,4 +1,3 @@
 import { NodeApi } from "../interfaces/node-api";
 import { TreeApi } from "../interfaces/tree-api";
-import { IdObj } from "../types/utils";
-export declare function createList<T extends IdObj>(tree: TreeApi<T>): NodeApi<T>[];
+export declare function createList<T>(tree: TreeApi<T>): NodeApi<T>[];

package/dist/data/create-root.d.ts

@@ -1,5 +1,4 @@
-import { IdObj } from "../types/utils";
 import { NodeApi } from "../interfaces/node-api";
 import { TreeApi } from "../interfaces/tree-api";
 export declare const ROOT_ID = "__REACT_ARBORIST_INTERNAL_ROOT__";
-export declare function createRoot<T extends IdObj>(tree: TreeApi<T>): NodeApi<T>;
+export declare function createRoot<T>(tree: TreeApi<T>): NodeApi<T>;

package/dist/data/simple-tree.d.ts

@@ -1,8 +1,9 @@
-declare type IdObj = {
+declare type SimpleData = {
     id: string;
-    children?: IdObj[];
+    name: string;
+    children?: SimpleData[];
 };
-export declare class SimpleTree<T extends IdObj> {
+export declare class SimpleTree<T extends SimpleData> {
     root: SimpleNode<T>;
     constructor(data: T[]);
     get data(): T[];
@@ -25,7 +26,7 @@ export declare class SimpleTree<T extends IdObj> {
     }): void;
     find(id: string, node?: SimpleNode<T>): SimpleNode<T> | null;
 }
-declare class SimpleNode<T extends IdObj> {
+declare class SimpleNode<T extends SimpleData> {
     data: T;
     parent: SimpleNode<T> | null;
     id: string;

package/dist/dnd/drag-hook.d.ts

@@ -1,4 +1,3 @@
 import { ConnectDragSource } from "react-dnd";
 import { NodeApi } from "../interfaces/node-api";
-import { IdObj } from "../types/utils";
-export declare function useDragHook<T extends IdObj>(node: NodeApi<T>): ConnectDragSource;
+export declare function useDragHook<T>(node: NodeApi<T>): ConnectDragSource;

package/dist/hooks/use-fresh-node.d.ts

@@ -1,2 +1 @@
-import { IdObj } from "../types/utils";
-export declare function useFreshNode<T extends IdObj>(index: number): import("..").NodeApi<T>;
+export declare function useFreshNode<T>(index: number): import("..").NodeApi<T>;

package/dist/hooks/use-simple-tree.d.ts

@@ -1,13 +1,12 @@
 import { CreateHandler, DeleteHandler, MoveHandler, RenameHandler } from "../types/handlers";
-import { IdObj } from "../types/utils";
 export declare type SimpleTreeData = {
     id: string;
     name: string;
     children?: SimpleTreeData[];
 };
-export declare function useSimpleTree<T extends IdObj>(initialData: T[]): readonly [T[], {
-    onMove: MoveHandler;
-    onRename: RenameHandler;
-    onCreate: CreateHandler;
-    onDelete: DeleteHandler;
+export declare function useSimpleTree<T>(initialData: T[]): readonly [T[], {
+    onMove: MoveHandler<T>;
+    onRename: RenameHandler<T>;
+    onCreate: CreateHandler<T>;
+    onDelete: DeleteHandler<T>;
 }];

package/dist/hooks/use-validated-props.d.ts

@@ -1,3 +1,2 @@
 import { TreeProps } from "../types/tree-props";
-import { IdObj } from "../types/utils";
-export declare function useValidatedProps<T extends IdObj>(props: TreeProps<T>): TreeProps<T>;
+export declare function useValidatedProps<T>(props: TreeProps<T>): TreeProps<T>;

package/dist/index.js

@@ -962,10 +962,13 @@ function $74bee24dbb0f3e2b$export$715c0d031ede7907(node) {
                 // If they held down meta, we need to create a copy
                 // if (drop.dropEffect === "copy")
                 if (drop && drop.parentId) {
+                    const parentId = drop.parentId === (0, $0d7f39915c1a8ae9$export$ec71a3379b43ae5c) ? null : drop.parentId;
                     (0, $eb5355379510ac9b$export$c6d63370cef03886)(tree.props.onMove, {
                         dragIds: item.dragIds,
-                        parentId: drop.parentId === (0, $0d7f39915c1a8ae9$export$ec71a3379b43ae5c) ? null : drop.parentId,
-                        index: drop.index
+                        parentId: parentId,
+                        index: drop.index,
+                        dragNodes: item.dragIds.map((id)=>tree.get(id)),
+                        parentNode: tree.get(drop.parentId)
                     });
                     tree.open(drop.parentId);
                 }
@@ -1647,10 +1650,14 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
         });
     }
     async create(opts = {}) {
+        const parentId = opts.parentId === undefined ? $eb5355379510ac9b$exports.getInsertParentId(this) : opts.parentId;
+        const index = opts.index ?? $eb5355379510ac9b$exports.getInsertIndex(this);
+        const type = opts.type ?? "leaf";
         const data = await $5c74fef433be2b0a$var$safeRun(this.props.onCreate, {
-            type: opts.type ?? "leaf",
-            parentId: opts.parentId === undefined ? $eb5355379510ac9b$exports.getInsertParentId(this) : opts.parentId,
-            index: opts.index ?? $eb5355379510ac9b$exports.getInsertIndex(this)
+            type: type,
+            parentId: parentId,
+            index: index,
+            parentNode: this.get(parentId)
         });
         if (data) {
             this.focus(data);
@@ -1664,11 +1671,13 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
     }
     async delete(node) {
         if (!node) return;
-        const nodes = Array.isArray(node) ? node : [
+        const idents = Array.isArray(node) ? node : [
             node
         ];
-        const ids = nodes.map($5c74fef433be2b0a$var$identify);
+        const ids = idents.map($5c74fef433be2b0a$var$identify);
+        const nodes = ids.map((id)=>this.get(id)).filter((n)=>!!n);
         await $5c74fef433be2b0a$var$safeRun(this.props.onDelete, {
+            nodes: nodes,
             ids: ids
         });
     }
@@ -1683,12 +1692,13 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
             $5c74fef433be2b0a$export$e2da3477247342d1.editPromise = resolve;
         });
     }
-    async submit(node, value) {
-        if (!node) return;
-        const id = $5c74fef433be2b0a$var$identify(node);
+    async submit(identity, value) {
+        if (!identity) return;
+        const id = $5c74fef433be2b0a$var$identify(identity);
         await $5c74fef433be2b0a$var$safeRun(this.props.onRename, {
             id: id,
-            name: value
+            name: value,
+            node: this.get(id)
         });
         this.dispatch((0, $1297c48a54b69bac$export$e1a8e267487c59d1)(null));
         this.resolveEdit({