react-arborist 2.0.0 → 2.1.1

package/dist/types/handlers.d.ts

@@ -1,20 +1,26 @@
+import { NodeApi } from "../interfaces/node-api";
 import { IdObj } from "./utils";
-export declare type CreateHandler = (args: {
+export declare type CreateHandler<T> = (args: {
     parentId: string | null;
+    parentNode: NodeApi<T> | null;
     index: number;
     type: "internal" | "leaf";
 }) => (IdObj | null) | Promise<IdObj | null>;
-export declare type MoveHandler = (args: {
+export declare type MoveHandler<T> = (args: {
     dragIds: string[];
+    dragNodes: NodeApi<T>[];
     parentId: string | null;
+    parentNode: NodeApi<T> | null;
     index: number;
 }) => void | Promise<void>;
-export declare type RenameHandler = (args: {
+export declare type RenameHandler<T> = (args: {
     id: string;
     name: string;
+    node: NodeApi<T>;
 }) => void | Promise<void>;
-export declare type DeleteHandler = (args: {
+export declare type DeleteHandler<T> = (args: {
     ids: string[];
+    nodes: NodeApi<T>[];
 }) => void | Promise<void>;
 export declare type EditResult = {
     cancelled: true;

package/dist/types/renderers.d.ts

@@ -1,16 +1,15 @@
 import { CSSProperties, HTMLAttributes, ReactElement } from "react";
-import { IdObj } from "./utils";
 import { NodeApi } from "../interfaces/node-api";
 import { TreeApi } from "../interfaces/tree-api";
 import { XYCoord } from "react-dnd";
-export declare type NodeRendererProps<T extends IdObj> = {
+export declare type NodeRendererProps<T> = {
     style: CSSProperties;
     node: NodeApi<T>;
     tree: TreeApi<T>;
     dragHandle?: (el: HTMLDivElement | null) => void;
     preview?: boolean;
 };
-export declare type RowRendererProps<T extends IdObj> = {
+export declare type RowRendererProps<T> = {
     node: NodeApi<T>;
     innerRef: (el: HTMLDivElement | null) => void;
     attrs: HTMLAttributes<any>;

package/dist/types/tree-props.d.ts

@@ -1,24 +1,24 @@
-import { BoolFunc, IdObj } from "./utils";
+import { BoolFunc } from "./utils";
 import * as handlers from "./handlers";
 import * as renderers from "./renderers";
 import { ElementType, MouseEventHandler } from "react";
 import { ListOnScrollProps } from "react-window";
 import { NodeApi } from "../interfaces/node-api";
 import { OpenMap } from "../state/open-slice";
-export interface TreeProps<T extends IdObj> {
-    data?: T[];
-    initialData?: T[];
-    onCreate?: handlers.CreateHandler;
-    onMove?: handlers.MoveHandler;
-    onRename?: handlers.RenameHandler;
-    onDelete?: handlers.DeleteHandler;
+export interface TreeProps<T> {
+    data?: readonly T[];
+    initialData?: readonly T[];
+    onCreate?: handlers.CreateHandler<T>;
+    onMove?: handlers.MoveHandler<T>;
+    onRename?: handlers.RenameHandler<T>;
+    onDelete?: handlers.DeleteHandler<T>;
     children?: ElementType<renderers.NodeRendererProps<T>>;
     renderRow?: ElementType<renderers.RowRendererProps<T>>;
     renderDragPreview?: ElementType<renderers.DragPreviewProps>;
     renderCursor?: ElementType<renderers.CursorProps>;
     renderContainer?: ElementType<{}>;
     rowHeight?: number;
-    width?: number;
+    width?: number | string;
     height?: number;
     indent?: number;
     paddingTop?: number;
@@ -28,7 +28,7 @@ export interface TreeProps<T extends IdObj> {
     selectionFollowsFocus?: boolean;
     disableDrag?: string | boolean | BoolFunc<T>;
     disableDrop?: string | boolean | BoolFunc<T>;
-    childrenAccessor?: string | ((d: T) => T[]);
+    childrenAccessor?: string | ((d: T) => T[] | null);
     idAccessor?: string | ((d: T) => string);
     onActivate?: (node: NodeApi<T>) => void;
     onSelect?: (nodes: NodeApi<T>[]) => void;

package/dist/types/utils.d.ts

@@ -16,6 +16,6 @@ export declare type SelectOptions = {
     multi?: boolean;
     contiguous?: boolean;
 };
-export declare type NodesById<T extends IdObj> = {
+export declare type NodesById<T> = {
     [id: string]: NodeApi<T>;
 };

package/package.json

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

package/src/components/default-drag-preview.tsx

@@ -70,7 +70,7 @@ function Count(props: { count: number; mouse: XYCoord | null }) {
   else return null;
 }
 
-const PreviewNode = memo(function PreviewNode<T extends IdObj>(props: {
+const PreviewNode = memo(function PreviewNode<T>(props: {
   id: string | null;
   dragIds: string[];
 }) {

package/src/components/default-node.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from "react";
 import { NodeRendererProps } from "../types/renderers";
 import { IdObj } from "../types/utils";
 
-export function DefaultNode<T extends IdObj>(props: NodeRendererProps<T>) {
+export function DefaultNode<T>(props: NodeRendererProps<T>) {
   return (
     <div ref={props.dragHandle} style={props.style}>
       <span
@@ -18,7 +18,7 @@ export function DefaultNode<T extends IdObj>(props: NodeRendererProps<T>) {
   );
 }
 
-function Show<T extends IdObj>(props: NodeRendererProps<T>) {
+function Show<T>(props: NodeRendererProps<T>) {
   return (
     <>
       {/* @ts-ignore */}
@@ -27,7 +27,7 @@ function Show<T extends IdObj>(props: NodeRendererProps<T>) {
   );
 }
 
-function Edit<T extends IdObj>({ node }: NodeRendererProps<T>) {
+function Edit<T>({ node }: NodeRendererProps<T>) {
   const input = useRef<any>();
 
   useEffect(() => {

package/src/components/default-row.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { RowRendererProps } from "../types/renderers";
 import { IdObj } from "../types/utils";
 
-export function DefaultRow<T extends IdObj>({
+export function DefaultRow<T>({
   node,
   attrs,
   innerRef,

package/src/components/provider.tsx

@@ -23,7 +23,7 @@ import { TreeProps } from "../types/tree-props";
 import { createStore, Store } from "redux";
 import { actions as visibility } from "../state/open-slice";
 
-type Props<T extends IdObj> = {
+type Props<T> = {
   treeProps: TreeProps<T>;
   imperativeHandle: React.Ref<TreeApi<T> | undefined>;
   children: ReactNode;
@@ -31,7 +31,7 @@ type Props<T extends IdObj> = {
 
 const SERVER_STATE = initialState();
 
-export function TreeProvider<T extends IdObj>({
+export function TreeProvider<T>({
   treeProps,
   imperativeHandle,
   children,

package/src/components/row-container.tsx

@@ -10,7 +10,7 @@ type Props = {
   index: number;
 };
 
-export const RowContainer = React.memo(function RowContainer<T extends IdObj>({
+export const RowContainer = React.memo(function RowContainer<T>({
   index,
   style,
 }: Props) {

package/src/components/tree.tsx

@@ -8,7 +8,7 @@ import { TreeProps } from "../types/tree-props";
 import { IdObj } from "../types/utils";
 import { useValidatedProps } from "../hooks/use-validated-props";
 
-export const Tree = forwardRef(function Tree<T extends IdObj>(
+export const Tree = forwardRef(function Tree<T>(
   props: TreeProps<T>,
   ref: React.Ref<TreeApi<T> | undefined>
 ) {

package/src/context.ts

@@ -5,7 +5,7 @@ import { IdObj } from "./types/utils";
 
 export const TreeApiContext = createContext<TreeApi<any> | null>(null);
 
-export function useTreeApi<T extends IdObj>() {
+export function useTreeApi<T>() {
   const value = useContext<TreeApi<T> | null>(
     TreeApiContext as unknown as React.Context<TreeApi<T> | null>
   );

package/src/data/create-index.ts

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

package/src/data/create-list.ts

@@ -2,7 +2,7 @@ import { NodeApi } from "../interfaces/node-api";
 import { TreeApi } from "../interfaces/tree-api";
 import { IdObj } from "../types/utils";
 
-export function createList<T extends IdObj>(tree: TreeApi<T>) {
+export function createList<T>(tree: TreeApi<T>) {
   if (tree.isFiltered) {
     return flattenAndFilterTree(tree.root, tree.isMatch.bind(tree));
   } else {
@@ -10,7 +10,7 @@ export function createList<T extends IdObj>(tree: TreeApi<T>) {
   }
 }
 
-function flattenTree<T extends IdObj>(root: NodeApi<T>): NodeApi<T>[] {
+function flattenTree<T>(root: NodeApi<T>): NodeApi<T>[] {
   const list: NodeApi<T>[] = [];
   function collect(node: NodeApi<T>) {
     if (node.level >= 0) {
@@ -25,7 +25,7 @@ function flattenTree<T extends IdObj>(root: NodeApi<T>): NodeApi<T>[] {
   return list;
 }
 
-function flattenAndFilterTree<T extends IdObj>(
+function flattenAndFilterTree<T>(
   root: NodeApi<T>,
   isMatch: (n: NodeApi<T>) => boolean
 ): NodeApi<T>[] {

package/src/data/create-root.ts

@@ -4,7 +4,7 @@ import { TreeApi } from "../interfaces/tree-api";
 
 export const ROOT_ID = "__REACT_ARBORIST_INTERNAL_ROOT__";
 
-export function createRoot<T extends IdObj>(tree: TreeApi<T>): NodeApi<T> {
+export function createRoot<T>(tree: TreeApi<T>): NodeApi<T> {
   function visitSelfAndChildren(
     data: T,
     level: number,
@@ -44,7 +44,7 @@ export function createRoot<T extends IdObj>(tree: TreeApi<T>): NodeApi<T> {
     rowIndex: null,
   });
 
-  const data: T[] = tree.props.data ?? [];
+  const data: readonly T[] = tree.props.data ?? [];
 
   root.children = data.map((child) => {
     return visitSelfAndChildren(child, 0, root);

package/src/data/simple-tree.ts

@@ -1,6 +1,6 @@
-type IdObj = { id: string; children?: IdObj[] };
+type SimpleData = { id: string; name: string; children?: SimpleData[] };
 
-export class SimpleTree<T extends IdObj> {
+export class SimpleTree<T extends SimpleData> {
   root: SimpleNode<T>;
   constructor(data: T[]) {
     this.root = createRoot<T>(data);
@@ -48,20 +48,20 @@ export class SimpleTree<T extends IdObj> {
   }
 }
 
-function createRoot<T extends IdObj>(data: T[]) {
+function createRoot<T extends SimpleData>(data: T[]) {
   const root = new SimpleNode<T>({ id: "ROOT" } as T, null);
   root.children = data.map((d) => createNode(d as T, root));
   return root;
 }
 
-function createNode<T extends IdObj>(data: T, parent: SimpleNode<T>) {
+function createNode<T extends SimpleData>(data: T, parent: SimpleNode<T>) {
   const node = new SimpleNode<T>(data, parent);
   if (data.children)
     node.children = data.children.map((d) => createNode<T>(d as T, node));
   return node;
 }
 
-class SimpleNode<T extends IdObj> {
+class SimpleNode<T extends SimpleData> {
   id: string;
   children?: SimpleNode<T>[];
   constructor(public data: T, public parent: SimpleNode<T> | null) {

package/src/dnd/drag-hook.ts

@@ -10,9 +10,7 @@ import { actions as dnd } from "../state/dnd-slice";
 import { safeRun } from "../utils";
 import { ROOT_ID } from "../data/create-root";
 
-export function useDragHook<T extends IdObj>(
-  node: NodeApi<T>
-): ConnectDragSource {
+export function useDragHook<T>(node: NodeApi<T>): ConnectDragSource {
   const tree = useTreeApi();
   const ids = tree.selectedIds;
   const [_, ref, preview] = useDrag<DragItem, DropResult, void>(
@@ -33,10 +31,13 @@ export function useDragHook<T extends IdObj>(
         // If they held down meta, we need to create a copy
         // if (drop.dropEffect === "copy")
         if (drop && drop.parentId) {
+          const parentId = drop.parentId === ROOT_ID ? null : drop.parentId;
           safeRun(tree.props.onMove, {
             dragIds: item.dragIds,
-            parentId: drop.parentId === ROOT_ID ? null : drop.parentId,
+            parentId,
             index: drop.index,
+            dragNodes: item.dragIds.map((id) => tree.get(id)!),
+            parentNode: tree.get(drop.parentId),
           });
           tree.open(drop.parentId);
         }

package/src/hooks/use-fresh-node.ts

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import { useTreeApi } from "../context";
 import { IdObj } from "../types/utils";
 
-export function useFreshNode<T extends IdObj>(index: number) {
+export function useFreshNode<T>(index: number) {
   const tree = useTreeApi<T>();
   const original = tree.at(index);
   if (!original) throw new Error(`Could not find node for index: ${index}`);

package/src/hooks/use-simple-tree.ts

@@ -16,11 +16,16 @@ export type SimpleTreeData = {
 
 let nextId = 0;
 
-export function useSimpleTree<T extends IdObj>(initialData: T[]) {
+export function useSimpleTree<T>(initialData: readonly T[]) {
   const [data, setData] = useState(initialData);
-  const tree = useMemo(() => new SimpleTree<T>(data), [data]);
-
-  const onMove: MoveHandler = (args: {
+  const tree = useMemo(
+    () =>
+      new SimpleTree<// @ts-ignore
+      T>(data),
+    [data]
+  );
+
+  const onMove: MoveHandler<T> = (args: {
     dragIds: string[];
     parentId: null | string;
     index: number;
@@ -31,12 +36,12 @@ export function useSimpleTree<T extends IdObj>(initialData: T[]) {
     setData(tree.data);
   };
 
-  const onRename: RenameHandler = ({ name, id }) => {
+  const onRename: RenameHandler<T> = ({ name, id }) => {
     tree.update({ id, changes: { name } as any });
     setData(tree.data);
   };
 
-  const onCreate: CreateHandler = ({ parentId, index, type }) => {
+  const onCreate: CreateHandler<T> = ({ parentId, index, type }) => {
     const data = { id: `simple-tree-id-${nextId++}`, name: "" } as any;
     if (type === "internal") data.children = [];
     tree.create({ parentId, index, data });
@@ -44,7 +49,7 @@ export function useSimpleTree<T extends IdObj>(initialData: T[]) {
     return data;
   };
 
-  const onDelete: DeleteHandler = (args: { ids: string[] }) => {
+  const onDelete: DeleteHandler<T> = (args: { ids: string[] }) => {
     args.ids.forEach((id) => tree.drop({ id }));
     setData(tree.data);
   };

package/src/hooks/use-validated-props.ts

@@ -2,9 +2,7 @@ import { TreeProps } from "../types/tree-props";
 import { IdObj } from "../types/utils";
 import { SimpleTreeData, useSimpleTree } from "./use-simple-tree";
 
-export function useValidatedProps<T extends IdObj>(
-  props: TreeProps<T>
-): TreeProps<T> {
+export function useValidatedProps<T>(props: TreeProps<T>): TreeProps<T> {
   if (props.initialData && props.data) {
     throw new Error(
       `React Arborist Tree => Provide either a data or initialData prop, but not both.`

package/src/interfaces/node-api.ts

@@ -3,7 +3,7 @@ import { TreeApi } from "./tree-api";
 import { IdObj } from "../types/utils";
 import { ROOT_ID } from "../data/create-root";
 
-type Params<T extends IdObj> = {
+type Params<T> = {
   id: string;
   data: T;
   level: number;
@@ -15,7 +15,7 @@ type Params<T extends IdObj> = {
   tree: TreeApi<T>;
 };
 
-export class NodeApi<T extends IdObj = IdObj> {
+export class NodeApi<T = any> {
   tree: TreeApi<T>;
   id: string;
   data: T;

package/src/interfaces/tree-api.ts

@@ -23,7 +23,7 @@ import { createList } from "../data/create-list";
 import { createIndex } from "../data/create-index";
 
 const { safeRun, identify, identifyNull } = utils;
-export class TreeApi<T extends IdObj> {
+export class TreeApi<T> {
   static editPromise: null | ((args: EditResult) => void);
   root: NodeApi<T>;
   visibleNodes: NodeApi<T>[];
@@ -91,7 +91,9 @@ export class TreeApi<T extends IdObj> {
     const match =
       this.props.searchMatch ??
       ((node, term) => {
-        const string = JSON.stringify(Object.values(node.data));
+        const string = JSON.stringify(
+          Object.values(node.data as { [k: string]: unknown })
+        );
         return string.toLocaleLowerCase().includes(term.toLocaleLowerCase());
       });
     return (node: NodeApi<T>) => match(node, this.searchTerm);
@@ -190,13 +192,17 @@ export class TreeApi<T extends IdObj> {
       index?: null | number;
     } = {}
   ) {
+    const parentId =
+      opts.parentId === undefined
+        ? utils.getInsertParentId(this)
+        : opts.parentId;
+    const index = opts.index ?? utils.getInsertIndex(this);
+    const type = opts.type ?? "leaf";
     const data = await safeRun(this.props.onCreate, {
-      type: opts.type ?? "leaf",
-      parentId:
-        opts.parentId === undefined
-          ? utils.getInsertParentId(this)
-          : opts.parentId,
-      index: opts.index ?? utils.getInsertIndex(this),
+      type,
+      parentId,
+      index,
+      parentNode: this.get(parentId),
     });
     if (data) {
       this.focus(data);
@@ -211,9 +217,10 @@ export class TreeApi<T extends IdObj> {
 
   async delete(node: string | IdObj | null | string[] | IdObj[]) {
     if (!node) return;
-    const nodes = Array.isArray(node) ? node : [node];
-    const ids = nodes.map(identify);
-    await safeRun(this.props.onDelete, { ids });
+    const idents = Array.isArray(node) ? node : [node];
+    const ids = idents.map(identify);
+    const nodes = ids.map((id) => this.get(id)!).filter((n) => !!n);
+    await safeRun(this.props.onDelete, { nodes, ids });
   }
 
   edit(node: string | IdObj): Promise<EditResult> {
@@ -226,10 +233,14 @@ export class TreeApi<T extends IdObj> {
     });
   }
 
-  async submit(node: Identity, value: string) {
-    if (!node) return;
-    const id = identify(node);
-    await safeRun(this.props.onRename, { id, name: value });
+  async submit(identity: Identity, value: string) {
+    if (!identity) return;
+    const id = identify(identity);
+    await safeRun(this.props.onRename, {
+      id,
+      name: value,
+      node: this.get(id)!,
+    });
     this.dispatch(edit(null));
     this.resolveEdit({ cancelled: false, value });
     setTimeout(() => this.onFocus()); // Return focus to element;

package/src/types/handlers.ts

@@ -1,23 +1,31 @@
+import { NodeApi } from "../interfaces/node-api";
 import { IdObj } from "./utils";
 
-export type CreateHandler = (args: {
+export type CreateHandler<T> = (args: {
   parentId: string | null;
+  parentNode: NodeApi<T> | null;
   index: number;
   type: "internal" | "leaf";
 }) => (IdObj | null) | Promise<IdObj | null>;
 
-export type MoveHandler = (args: {
+export type MoveHandler<T> = (args: {
   dragIds: string[];
+  dragNodes: NodeApi<T>[];
   parentId: string | null;
+  parentNode: NodeApi<T> | null;
   index: number;
 }) => void | Promise<void>;
 
-export type RenameHandler = (args: {
+export type RenameHandler<T> = (args: {
   id: string;
   name: string;
+  node: NodeApi<T>;
 }) => void | Promise<void>;
 
-export type DeleteHandler = (args: { ids: string[] }) => void | Promise<void>;
+export type DeleteHandler<T> = (args: {
+  ids: string[];
+  nodes: NodeApi<T>[];
+}) => void | Promise<void>;
 
 export type EditResult =
   | { cancelled: true }

package/src/types/renderers.ts

@@ -4,7 +4,7 @@ import { NodeApi } from "../interfaces/node-api";
 import { TreeApi } from "../interfaces/tree-api";
 import { XYCoord } from "react-dnd";
 
-export type NodeRendererProps<T extends IdObj> = {
+export type NodeRendererProps<T> = {
   style: CSSProperties;
   node: NodeApi<T>;
   tree: TreeApi<T>;
@@ -12,7 +12,7 @@ export type NodeRendererProps<T extends IdObj> = {
   preview?: boolean;
 };
 
-export type RowRendererProps<T extends IdObj> = {
+export type RowRendererProps<T> = {
   node: NodeApi<T>;
   innerRef: (el: HTMLDivElement | null) => void;
   attrs: HTMLAttributes<any>;

package/src/types/tree-props.ts

@@ -1,4 +1,4 @@
-import { BoolFunc, IdObj } from "./utils";
+import { BoolFunc } from "./utils";
 import * as handlers from "./handlers";
 import * as renderers from "./renderers";
 import { ElementType, MouseEventHandler } from "react";
@@ -6,16 +6,16 @@ import { ListOnScrollProps } from "react-window";
 import { NodeApi } from "../interfaces/node-api";
 import { OpenMap, OpenSlice } from "../state/open-slice";
 
-export interface TreeProps<T extends IdObj> {
+export interface TreeProps<T> {
   /* Data Options */
-  data?: T[];
-  initialData?: T[];
+  data?: readonly T[];
+  initialData?: readonly T[];
 
   /* Data Handlers */
-  onCreate?: handlers.CreateHandler;
-  onMove?: handlers.MoveHandler;
-  onRename?: handlers.RenameHandler;
-  onDelete?: handlers.DeleteHandler;
+  onCreate?: handlers.CreateHandler<T>;
+  onMove?: handlers.MoveHandler<T>;
+  onRename?: handlers.RenameHandler<T>;
+  onDelete?: handlers.DeleteHandler<T>;
 
   /* Renderers*/
   children?: ElementType<renderers.NodeRendererProps<T>>;
@@ -26,7 +26,7 @@ export interface TreeProps<T extends IdObj> {
 
   /* Sizes */
   rowHeight?: number;
-  width?: number;
+  width?: number | string;
   height?: number;
   indent?: number;
   paddingTop?: number;
@@ -38,7 +38,7 @@ export interface TreeProps<T extends IdObj> {
   selectionFollowsFocus?: boolean;
   disableDrag?: string | boolean | BoolFunc<T>;
   disableDrop?: string | boolean | BoolFunc<T>;
-  childrenAccessor?: string | ((d: T) => T[]);
+  childrenAccessor?: string | ((d: T) => T[] | null);
   idAccessor?: string | ((d: T) => string);
 
   /* Event Handlers */

package/src/types/utils.ts

@@ -23,4 +23,4 @@ export type ActionTypes<
 
 export type SelectOptions = { multi?: boolean; contiguous?: boolean };
 
-export type NodesById<T extends IdObj> = { [id: string]: NodeApi<T> };
+export type NodesById<T> = { [id: string]: NodeApi<T> };