react-arborist 2.0.0 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/README.md +3 -3
  2. package/dist/components/default-node.d.ts +1 -2
  3. package/dist/components/default-row.d.ts +1 -2
  4. package/dist/components/provider.d.ts +2 -3
  5. package/dist/components/row-container.d.ts +1 -2
  6. package/dist/components/tree.d.ts +1 -2
  7. package/dist/context.d.ts +1 -2
  8. package/dist/data/create-index.d.ts +1 -2
  9. package/dist/data/create-list.d.ts +1 -2
  10. package/dist/data/create-root.d.ts +1 -2
  11. package/dist/data/simple-tree.d.ts +5 -4
  12. package/dist/dnd/drag-hook.d.ts +1 -2
  13. package/dist/hooks/use-fresh-node.d.ts +1 -2
  14. package/dist/hooks/use-simple-tree.d.ts +5 -6
  15. package/dist/hooks/use-validated-props.d.ts +1 -2
  16. package/dist/index.js +21 -11
  17. package/dist/index.js.map +1 -1
  18. package/dist/interfaces/node-api.d.ts +2 -3
  19. package/dist/interfaces/tree-api.d.ts +3 -3
  20. package/dist/module.js +21 -11
  21. package/dist/module.js.map +1 -1
  22. package/dist/types/handlers.d.ts +10 -4
  23. package/dist/types/renderers.d.ts +2 -3
  24. package/dist/types/tree-props.d.ts +10 -10
  25. package/dist/types/utils.d.ts +1 -1
  26. package/package.json +1 -1
  27. package/src/components/default-drag-preview.tsx +1 -1
  28. package/src/components/default-node.tsx +3 -3
  29. package/src/components/default-row.tsx +1 -1
  30. package/src/components/provider.tsx +2 -2
  31. package/src/components/row-container.tsx +1 -1
  32. package/src/components/tree.tsx +1 -1
  33. package/src/context.ts +1 -1
  34. package/src/data/create-index.ts +1 -1
  35. package/src/data/create-list.ts +3 -3
  36. package/src/data/create-root.ts +2 -2
  37. package/src/data/simple-tree.ts +5 -5
  38. package/src/dnd/drag-hook.ts +5 -4
  39. package/src/hooks/use-fresh-node.ts +1 -1
  40. package/src/hooks/use-simple-tree.ts +12 -7
  41. package/src/hooks/use-validated-props.ts +1 -3
  42. package/src/interfaces/node-api.ts +2 -2
  43. package/src/interfaces/tree-api.ts +26 -15
  44. package/src/types/handlers.ts +12 -4
  45. package/src/types/renderers.ts +2 -2
  46. package/src/types/tree-props.ts +10 -10
  47. package/src/types/utils.ts +1 -1
package/README.md CHANGED
@@ -262,7 +262,7 @@ function App() {
262
262
  These are all the props you can pass to the Tree component.
263
263
 
264
264
  ```ts
265
- interface TreeProps<T extends IdObj> {
265
+ interface TreeProps<T> {
266
266
  /* Data Options */
267
267
  data?: T[];
268
268
  initialData?: T[];
@@ -327,7 +327,7 @@ interface TreeProps<T extends IdObj> {
327
327
  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.
328
328
 
329
329
  ```ts
330
- type RowRendererProps<T extends IdObj> = {
330
+ type RowRendererProps<T> = {
331
331
  node: NodeApi<T>;
332
332
  innerRef: (el: HTMLDivElement | null) => void;
333
333
  attrs: HTMLAttributes<any>;
@@ -342,7 +342,7 @@ The _\<NodeRenderer\>_ is responsible for attaching the drag ref, the node style
342
342
  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.
343
343
 
344
344
  ```ts
345
- export type NodeRendererProps<T extends IdObj> = {
345
+ export type NodeRendererProps<T> = {
346
346
  style: CSSProperties;
347
347
  node: NodeApi<T>;
348
348
  tree: TreeApi<T>;
@@ -1,4 +1,3 @@
1
1
  /// <reference types="react" />
2
2
  import { NodeRendererProps } from "../types/renderers";
3
- import { IdObj } from "../types/utils";
4
- export declare function DefaultNode<T extends IdObj>(props: NodeRendererProps<T>): JSX.Element;
3
+ export declare function DefaultNode<T>(props: NodeRendererProps<T>): JSX.Element;
@@ -1,4 +1,3 @@
1
1
  /// <reference types="react" />
2
2
  import { RowRendererProps } from "../types/renderers";
3
- import { IdObj } from "../types/utils";
4
- export declare function DefaultRow<T extends IdObj>({ node, attrs, innerRef, children, }: RowRendererProps<T>): JSX.Element;
3
+ export declare function DefaultRow<T>({ node, attrs, innerRef, children, }: RowRendererProps<T>): JSX.Element;
@@ -1,11 +1,10 @@
1
1
  import { ReactNode } from "react";
2
2
  import { TreeApi } from "../interfaces/tree-api";
3
- import { IdObj } from "../types/utils";
4
3
  import { TreeProps } from "../types/tree-props";
5
- declare type Props<T extends IdObj> = {
4
+ declare type Props<T> = {
6
5
  treeProps: TreeProps<T>;
7
6
  imperativeHandle: React.Ref<TreeApi<T> | undefined>;
8
7
  children: ReactNode;
9
8
  };
10
- export declare function TreeProvider<T extends IdObj>({ treeProps, imperativeHandle, children, }: Props<T>): JSX.Element;
9
+ export declare function TreeProvider<T>({ treeProps, imperativeHandle, children, }: Props<T>): JSX.Element;
11
10
  export {};
@@ -1,8 +1,7 @@
1
1
  import React from "react";
2
- import { IdObj } from "../types/utils";
3
2
  declare type Props = {
4
3
  style: React.CSSProperties;
5
4
  index: number;
6
5
  };
7
- export declare const RowContainer: React.MemoExoticComponent<(<T extends IdObj>({ index, style, }: Props) => JSX.Element)>;
6
+ export declare const RowContainer: React.MemoExoticComponent<(<T>({ index, style, }: Props) => JSX.Element)>;
8
7
  export {};
@@ -1,5 +1,4 @@
1
1
  /// <reference types="react" />
2
2
  import { TreeApi } from "../interfaces/tree-api";
3
3
  import { TreeProps } from "../types/tree-props";
4
- import { IdObj } from "../types/utils";
5
- 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;
4
+ 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 CHANGED
@@ -1,8 +1,7 @@
1
1
  import React from "react";
2
2
  import { TreeApi } from "./interfaces/tree-api";
3
- import { IdObj } from "./types/utils";
4
3
  export declare const TreeApiContext: React.Context<TreeApi<any> | null>;
5
- export declare function useTreeApi<T extends IdObj>(): TreeApi<T>;
4
+ export declare function useTreeApi<T>(): TreeApi<T>;
6
5
  export declare const NodesContext: React.Context<import("redux").CombinedState<{
7
6
  focus: import("./state/focus-slice").FocusState;
8
7
  edit: import("./state/edit-slice").EditState;
@@ -1,5 +1,4 @@
1
1
  import { NodeApi } from "../interfaces/node-api";
2
- import { IdObj } from "../types/utils";
3
- export declare const createIndex: <T extends IdObj>(nodes: NodeApi<T>[]) => {
2
+ export declare const createIndex: <T>(nodes: NodeApi<T>[]) => {
4
3
  [id: string]: number;
5
4
  };
@@ -1,4 +1,3 @@
1
1
  import { NodeApi } from "../interfaces/node-api";
2
2
  import { TreeApi } from "../interfaces/tree-api";
3
- import { IdObj } from "../types/utils";
4
- export declare function createList<T extends IdObj>(tree: TreeApi<T>): NodeApi<T>[];
3
+ export declare function createList<T>(tree: TreeApi<T>): NodeApi<T>[];
@@ -1,5 +1,4 @@
1
- import { IdObj } from "../types/utils";
2
1
  import { NodeApi } from "../interfaces/node-api";
3
2
  import { TreeApi } from "../interfaces/tree-api";
4
3
  export declare const ROOT_ID = "__REACT_ARBORIST_INTERNAL_ROOT__";
5
- export declare function createRoot<T extends IdObj>(tree: TreeApi<T>): NodeApi<T>;
4
+ export declare function createRoot<T>(tree: TreeApi<T>): NodeApi<T>;
@@ -1,8 +1,9 @@
1
- declare type IdObj = {
1
+ declare type SimpleData = {
2
2
  id: string;
3
- children?: IdObj[];
3
+ name: string;
4
+ children?: SimpleData[];
4
5
  };
5
- export declare class SimpleTree<T extends IdObj> {
6
+ export declare class SimpleTree<T extends SimpleData> {
6
7
  root: SimpleNode<T>;
7
8
  constructor(data: T[]);
8
9
  get data(): T[];
@@ -25,7 +26,7 @@ export declare class SimpleTree<T extends IdObj> {
25
26
  }): void;
26
27
  find(id: string, node?: SimpleNode<T>): SimpleNode<T> | null;
27
28
  }
28
- declare class SimpleNode<T extends IdObj> {
29
+ declare class SimpleNode<T extends SimpleData> {
29
30
  data: T;
30
31
  parent: SimpleNode<T> | null;
31
32
  id: string;
@@ -1,4 +1,3 @@
1
1
  import { ConnectDragSource } from "react-dnd";
2
2
  import { NodeApi } from "../interfaces/node-api";
3
- import { IdObj } from "../types/utils";
4
- export declare function useDragHook<T extends IdObj>(node: NodeApi<T>): ConnectDragSource;
3
+ export declare function useDragHook<T>(node: NodeApi<T>): ConnectDragSource;
@@ -1,2 +1 @@
1
- import { IdObj } from "../types/utils";
2
- export declare function useFreshNode<T extends IdObj>(index: number): import("..").NodeApi<T>;
1
+ export declare function useFreshNode<T>(index: number): import("..").NodeApi<T>;
@@ -1,13 +1,12 @@
1
1
  import { CreateHandler, DeleteHandler, MoveHandler, RenameHandler } from "../types/handlers";
2
- import { IdObj } from "../types/utils";
3
2
  export declare type SimpleTreeData = {
4
3
  id: string;
5
4
  name: string;
6
5
  children?: SimpleTreeData[];
7
6
  };
8
- export declare function useSimpleTree<T extends IdObj>(initialData: T[]): readonly [T[], {
9
- onMove: MoveHandler;
10
- onRename: RenameHandler;
11
- onCreate: CreateHandler;
12
- onDelete: DeleteHandler;
7
+ export declare function useSimpleTree<T>(initialData: readonly T[]): readonly [readonly T[], {
8
+ onMove: MoveHandler<T>;
9
+ onRename: RenameHandler<T>;
10
+ onCreate: CreateHandler<T>;
11
+ onDelete: DeleteHandler<T>;
13
12
  }];
@@ -1,3 +1,2 @@
1
1
  import { TreeProps } from "../types/tree-props";
2
- import { IdObj } from "../types/utils";
3
- export declare function useValidatedProps<T extends IdObj>(props: TreeProps<T>): TreeProps<T>;
2
+ export declare function useValidatedProps<T>(props: TreeProps<T>): TreeProps<T>;
package/dist/index.js CHANGED
@@ -962,10 +962,13 @@ function $74bee24dbb0f3e2b$export$715c0d031ede7907(node) {
962
962
  // If they held down meta, we need to create a copy
963
963
  // if (drop.dropEffect === "copy")
964
964
  if (drop && drop.parentId) {
965
+ const parentId = drop.parentId === (0, $0d7f39915c1a8ae9$export$ec71a3379b43ae5c) ? null : drop.parentId;
965
966
  (0, $eb5355379510ac9b$export$c6d63370cef03886)(tree.props.onMove, {
966
967
  dragIds: item.dragIds,
967
- parentId: drop.parentId === (0, $0d7f39915c1a8ae9$export$ec71a3379b43ae5c) ? null : drop.parentId,
968
- index: drop.index
968
+ parentId: parentId,
969
+ index: drop.index,
970
+ dragNodes: item.dragIds.map((id)=>tree.get(id)),
971
+ parentNode: tree.get(drop.parentId)
969
972
  });
970
973
  tree.open(drop.parentId);
971
974
  }
@@ -1647,10 +1650,14 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
1647
1650
  });
1648
1651
  }
1649
1652
  async create(opts = {}) {
1653
+ const parentId = opts.parentId === undefined ? $eb5355379510ac9b$exports.getInsertParentId(this) : opts.parentId;
1654
+ const index = opts.index ?? $eb5355379510ac9b$exports.getInsertIndex(this);
1655
+ const type = opts.type ?? "leaf";
1650
1656
  const data = await $5c74fef433be2b0a$var$safeRun(this.props.onCreate, {
1651
- type: opts.type ?? "leaf",
1652
- parentId: opts.parentId === undefined ? $eb5355379510ac9b$exports.getInsertParentId(this) : opts.parentId,
1653
- index: opts.index ?? $eb5355379510ac9b$exports.getInsertIndex(this)
1657
+ type: type,
1658
+ parentId: parentId,
1659
+ index: index,
1660
+ parentNode: this.get(parentId)
1654
1661
  });
1655
1662
  if (data) {
1656
1663
  this.focus(data);
@@ -1664,11 +1671,13 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
1664
1671
  }
1665
1672
  async delete(node) {
1666
1673
  if (!node) return;
1667
- const nodes = Array.isArray(node) ? node : [
1674
+ const idents = Array.isArray(node) ? node : [
1668
1675
  node
1669
1676
  ];
1670
- const ids = nodes.map($5c74fef433be2b0a$var$identify);
1677
+ const ids = idents.map($5c74fef433be2b0a$var$identify);
1678
+ const nodes = ids.map((id)=>this.get(id)).filter((n)=>!!n);
1671
1679
  await $5c74fef433be2b0a$var$safeRun(this.props.onDelete, {
1680
+ nodes: nodes,
1672
1681
  ids: ids
1673
1682
  });
1674
1683
  }
@@ -1683,12 +1692,13 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
1683
1692
  $5c74fef433be2b0a$export$e2da3477247342d1.editPromise = resolve;
1684
1693
  });
1685
1694
  }
1686
- async submit(node, value) {
1687
- if (!node) return;
1688
- const id = $5c74fef433be2b0a$var$identify(node);
1695
+ async submit(identity, value) {
1696
+ if (!identity) return;
1697
+ const id = $5c74fef433be2b0a$var$identify(identity);
1689
1698
  await $5c74fef433be2b0a$var$safeRun(this.props.onRename, {
1690
1699
  id: id,
1691
- name: value
1700
+ name: value,
1701
+ node: this.get(id)
1692
1702
  });
1693
1703
  this.dispatch((0, $1297c48a54b69bac$export$e1a8e267487c59d1)(null));
1694
1704
  this.resolveEdit({