react-arborist 1.1.0 → 1.2.0

package/README.md

@@ -29,7 +29,7 @@ Render the tree data structure.
 ```jsx
 const data = {
   id: "A",
-  name: "Root"
+  name: "Root",
   children: [
     { id: "B", name: "Node 1" },
     { id: "C", name: "Node 2" },
@@ -85,22 +85,23 @@ If your data does not look like this, you can provide a `childrenAccessor` prop.
 
 Unlike other Tree Components, react-arborist is designed as a [controlled component](https://reactjs.org/docs/forms.html#controlled-components). This means the consumer will provide the tree data and the handlers to update it. The only state managed internally is for drag and drop, selection, and editing.
 
-| Prop             | Default    | Description                                                                                                                                                                                                                                            |
-| ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| data             | (required) | The tree data structure to render as described above.                                                                                                                                                                                                  |
-| width            | 300        | The width of the tree.                                                                                                                                                                                                                                 |
-| height           | 500        | The height of the tree. To dynamically fill it's container, use a [hook](https://github.com/ZeeCoder/use-resize-observer) or [component](https://github.com/bvaughn/react-virtualized-auto-sizer) to gather the width and height of the Tree's parent. |
-| rowHeight        | 24         | The height of each row.                                                                                                                                                                                                                                |
-| indent           | 24         | The number of pixels to indent child nodes.                                                                                                                                                                                                            |
-| hideRoot         | false      | Hide the root node so that the first set of children appear as the roots.                                                                                                                                                                              |
-| onToggle         | noop       | Handler called when a node is opened or closed. This and the subsequent functions should update the `data` prop for the tree to re-render.                                                                                                             |
-| onMove           | noop       | Handler called when a user moves one or more nodes by dragging and dropping.                                                                                                                                                                           |
-| onEdit           | noop       | Handler called when a user performs an inline edit of the node.                                                                                                                                                                                        |
-| childrenAccessor | "children" | Used to get a node's children if they exist on a property other than "children".                                                                                                                                                                       |
-| isOpenAccessor   | "isOpen"   | Used to get a node's openness state if it exists on a property other than "isOpen".                                                                                                                                                                    |
-| openByDefault    | true       | Choose if the node should be open or closed when it has an undefined openness state.                                                                                                                                                                   |
-| className        | undefined  | Adds a class to the containing div.                                                                                                                                                                                                                    |
-| dndRootElement   | undefined  | The element for react-dnd to bind it's events to. Defaults to window. See https://github.com/brimdata/react-arborist/pull/33                                                                                                                           |
+| Prop             | Default                               | Description                                                                                                                                                                                                                                                                                                                                                              |
+| ---------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| data             | (required)                            | The tree data structure to render as described above.                                                                                                                                                                                                                                                                                                                    |
+| width            | 300                                   | The width of the tree.                                                                                                                                                                                                                                                                                                                                                   |
+| height           | 500                                   | The height of the tree. To dynamically fill it's container, use a [hook](https://github.com/ZeeCoder/use-resize-observer) or [component](https://github.com/bvaughn/react-virtualized-auto-sizer) to gather the width and height of the Tree's parent.                                                                                                                   |
+| rowHeight        | 24                                    | The height of each row.                                                                                                                                                                                                                                                                                                                                                  |
+| indent           | 24                                    | The number of pixels to indent child nodes.                                                                                                                                                                                                                                                                                                                              |
+| hideRoot         | false                                 | Hide the root node so that the first set of children appear as the roots.                                                                                                                                                                                                                                                                                                |
+| onToggle         | noop                                  | Handler called when a node is opened or closed. This and the subsequent functions should update the `data` prop for the tree to re-render.                                                                                                                                                                                                                               |
+| onMove           | noop                                  | Handler called when a user moves one or more nodes by dragging and dropping.                                                                                                                                                                                                                                                                                             |
+| onEdit           | noop                                  | Handler called when a user performs an inline edit of the node.                                                                                                                                                                                                                                                                                                          |
+| childrenAccessor | "children"                            | Used to get a node's children if they exist on a property other than "children".                                                                                                                                                                                                                                                                                         |
+| isOpenAccessor   | "isOpen"                              | Used to get a node's openness state if it exists on a property other than "isOpen".                                                                                                                                                                                                                                                                                      |
+| openByDefault    | true                                  | Choose if the node should be open or closed when it has an undefined openness state.                                                                                                                                                                                                                                                                                     |
+| className        | undefined                             | Adds a class to the containing div.                                                                                                                                                                                                                                                                                                                                      |
+| dndRootElement   | undefined                             | The element for react-dnd to bind it's events to. Defaults to window. See https://github.com/brimdata/react-arborist/pull/33                                                                                                                                                                                                                                             |
+| dropCursor       | ({top, left, indent}) => ReactElement | Provide a custom render function for the drop cursor (the line you see as you drag an item around the tree). It recieves props {left, top, indent} which are all numbers. See the [DefaultDropCursor](https://github.com/brimdata/react-arborist/blob/main/packages/react-arborist/src/components/default-drop-cursor.tsx) for an example of how to create a custom one. |
 
 The only child of the Tree Component must be a NodeRenderer function as described below.
 

package/dist/components/default-drop-cursor.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DropCursorProps } from "../types";
+export declare function defaultDropCursor(props: DropCursorProps): JSX.Element;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ListOuterElement: (props: import("react").HTMLProps<HTMLDivElement> & import("react").RefAttributes<unknown>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/dist/components/list.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function List(props: {
+    className?: string;
+}): JSX.Element;

package/dist/components/outer-drop.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from "react";
+export declare function OuterDrop(props: {
+    children: ReactElement;
+}): ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/components/row.d.ts

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

package/dist/context.d.ts

@@ -1,18 +1,5 @@
-/// <reference types="react" />
-import { Cursor } from "./dnd/compute-drop";
-import { IdObj, SelectionState, StaticContext } from "./types";
-export declare const CursorParentId: import("react").Context<string | null>;
-export declare function useCursorParentId(): string | null;
-export declare const IsCursorOverFolder: import("react").Context<boolean>;
-export declare function useIsCursorOverFolder(): boolean;
-export declare const CursorLocationContext: import("react").Context<Cursor | null>;
-export declare function useCursorLocation(): Cursor | null;
-export declare const Static: import("react").Context<StaticContext<IdObj> | null>;
-export declare function useStaticContext(): StaticContext<IdObj>;
-export declare const DispatchContext: import("react").Context<null>;
-export declare function useDispatch(): never;
-export declare const SelectionContext: import("react").Context<SelectionState | null>;
-export declare function useSelectedIds(): string[];
-export declare function useIsSelected(): (index: number | null) => boolean;
-export declare const EditingIdContext: import("react").Context<string | null>;
-export declare function useEditingId(): string | null;
+import React from "react";
+import { TreeApi } from "./tree-api";
+import { IdObj } from "./types";
+export declare const TreeApiContext: React.Context<TreeApi<any> | null>;
+export declare function useTreeApi<T extends IdObj>(): TreeApi<T>;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 import { Tree } from "./components/tree";
 import { TreeApi } from "./tree-api";
-import type { NodeRenderer, NodeState, NodeHandlers } from "./types";
-export { Tree, TreeApi, NodeRenderer, NodeState, NodeHandlers };
+import type { NodeRenderer, NodeState, NodeHandlers, NodeRendererProps, DropCursorProps } from "./types";
+export { Tree, TreeApi, NodeRenderer, NodeState, NodeHandlers, NodeRendererProps, DropCursorProps, };