react-arborist 3.3.0-rc.1 → 3.3.1

package/dist/module/components/outer-drop.js

@@ -0,0 +1,5 @@
+import { useOuterDrop } from "../dnd/outer-drop-hook";
+export function OuterDrop(props) {
+    useOuterDrop();
+    return props.children;
+}

package/dist/module/components/provider.d.ts

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

package/dist/module/components/provider.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useImperativeHandle, useMemo, useRef, } from "react";
+import { useSyncExternalStore } from "use-sync-external-store/shim";
+import { DataUpdatesContext, DndContext, NodesContext, TreeApiContext, } from "../context";
+import { TreeApi } from "../interfaces/tree-api";
+import { initialState } from "../state/initial";
+import { rootReducer } from "../state/root-reducer";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { DndProvider } from "react-dnd";
+import { createStore } from "redux";
+import { actions as visibility } from "../state/open-slice";
+const SERVER_STATE = initialState();
+export function TreeProvider({ treeProps, imperativeHandle, children, }) {
+    const list = useRef(null);
+    const listEl = useRef(null);
+    const store = useRef(
+    // @ts-ignore
+    createStore(rootReducer, initialState(treeProps)));
+    const state = useSyncExternalStore(store.current.subscribe, store.current.getState, () => SERVER_STATE);
+    /* The tree api object is stable. */
+    const api = useMemo(() => {
+        return new TreeApi(store.current, treeProps, list, listEl);
+    }, []);
+    /* Make sure the tree instance stays in sync */
+    const updateCount = useRef(0);
+    useMemo(() => {
+        updateCount.current += 1;
+        api.update(treeProps);
+    }, [...Object.values(treeProps), state.nodes.open]);
+    /* Expose the tree api */
+    useImperativeHandle(imperativeHandle, () => api);
+    /* Change selection based on props */
+    useEffect(() => {
+        if (api.props.selection) {
+            api.select(api.props.selection, { focus: false });
+        }
+        else {
+            api.deselectAll();
+        }
+    }, [api.props.selection]);
+    /* Clear visability for filtered nodes */
+    useEffect(() => {
+        if (!api.props.searchTerm) {
+            store.current.dispatch(visibility.clear(true));
+        }
+    }, [api.props.searchTerm]);
+    return (_jsx(TreeApiContext.Provider, { value: api, children: _jsx(DataUpdatesContext.Provider, { value: updateCount.current, children: _jsx(NodesContext.Provider, { value: state.nodes, children: _jsx(DndContext.Provider, { value: state.dnd, children: _jsx(DndProvider, Object.assign({ backend: HTML5Backend, options: { rootElement: api.props.dndRootElement || undefined } }, (treeProps.dndManager && { manager: treeProps.dndManager }), { children: children })) }) }) }) }));
+}

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

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

package/dist/module/components/row-container.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { useDataUpdates, useNodesContext, useTreeApi } from "../context";
+import { useDragHook } from "../dnd/drag-hook";
+import { useDropHook } from "../dnd/drop-hook";
+import { useFreshNode } from "../hooks/use-fresh-node";
+export const RowContainer = React.memo(function RowContainer({ index, style, }) {
+    /* When will the <Row> will re-render.
+     *
+     * The row component is memo'd so it will only render
+     * when a new instance of the NodeApi class is passed
+     * to it.
+     *
+     * The TreeApi instance is stable. It does not
+     * change when the internal state changes.
+     *
+     * The TreeApi has all the references to the nodes.
+     * We need to clone the nodes when their state
+     * changes. The node class contains no state itself,
+     * It always checks the tree for state. The tree's
+     * state will always be up to date.
+     */
+    useDataUpdates(); // Re-render when tree props or visability changes
+    const _ = useNodesContext(); // So that we re-render appropriately
+    const tree = useTreeApi(); // Tree already has the fresh state
+    const node = useFreshNode(index);
+    const el = useRef(null);
+    const dragRef = useDragHook(node);
+    const dropRef = useDropHook(el, node);
+    const innerRef = useCallback((n) => {
+        el.current = n;
+        dropRef(n);
+    }, [dropRef]);
+    const indent = tree.indent * node.level;
+    const nodeStyle = useMemo(() => ({ paddingLeft: indent }), [indent]);
+    const rowStyle = useMemo(() => {
+        var _a, _b;
+        return (Object.assign(Object.assign({}, style), { top: parseFloat(style.top) +
+                ((_b = (_a = tree.props.padding) !== null && _a !== void 0 ? _a : tree.props.paddingTop) !== null && _b !== void 0 ? _b : 0) }));
+    }, [style, tree.props.padding, tree.props.paddingTop]);
+    const rowAttrs = {
+        role: "treeitem",
+        "aria-level": node.level + 1,
+        "aria-selected": node.isSelected,
+        style: rowStyle,
+        tabIndex: -1,
+        className: tree.props.rowClassName,
+    };
+    useEffect(() => {
+        var _a;
+        if (!node.isEditing && node.isFocused) {
+            (_a = el.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+        }
+    }, [node.isEditing, node.isFocused, el.current]);
+    const Node = tree.renderNode;
+    const Row = tree.renderRow;
+    return (_jsx(Row, { node: node, innerRef: innerRef, attrs: rowAttrs, children: _jsx(Node, { node: node, tree: tree, style: nodeStyle, dragHandle: dragRef }) }));
+});

package/dist/module/components/tree-container.d.ts

@@ -0,0 +1 @@
+export declare function TreeContainer(): import("react/jsx-runtime").JSX.Element;

package/dist/module/components/tree-container.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTreeApi } from "../context";
+import { DefaultContainer } from "./default-container";
+export function TreeContainer() {
+    const tree = useTreeApi();
+    const Container = tree.props.renderContainer || DefaultContainer;
+    return (_jsx(_Fragment, { children: _jsx(Container, {}) }));
+}

package/dist/module/components/tree.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TreeApi } from "../interfaces/tree-api";
+import { TreeProps } from "../types/tree-props";
+declare function TreeComponent<T>(props: TreeProps<T>, ref: React.Ref<TreeApi<T> | undefined>): import("react/jsx-runtime").JSX.Element;
+export declare const Tree: <T>(props: TreeProps<T> & {
+    ref?: import("react").ForwardedRef<TreeApi<T> | undefined> | undefined;
+}) => ReturnType<typeof TreeComponent>;
+export {};

package/dist/module/components/tree.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { TreeProvider } from "./provider";
+import { OuterDrop } from "./outer-drop";
+import { TreeContainer } from "./tree-container";
+import { DragPreviewContainer } from "./drag-preview-container";
+import { useValidatedProps } from "../hooks/use-validated-props";
+function TreeComponent(props, ref) {
+    const treeProps = useValidatedProps(props);
+    return (_jsxs(TreeProvider, { treeProps: treeProps, imperativeHandle: ref, children: [_jsx(OuterDrop, { children: _jsx(TreeContainer, {}) }), _jsx(DragPreviewContainer, {})] }));
+}
+export const Tree = forwardRef(TreeComponent);

package/dist/module/context.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { TreeApi } from "./interfaces/tree-api";
+export declare const TreeApiContext: React.Context<TreeApi<any> | null>;
+export declare function useTreeApi<T>(): TreeApi<T>;
+export declare const NodesContext: React.Context<{
+    focus: import("./state/focus-slice").FocusState;
+    edit: import("./state/edit-slice").EditState;
+    open: import("./state/open-slice").OpenSlice;
+    selection: import("./state/selection-slice").SelectionState;
+    drag: import("./state/drag-slice").DragSlice;
+} | null>;
+export declare function useNodesContext(): {
+    focus: import("./state/focus-slice").FocusState;
+    edit: import("./state/edit-slice").EditState;
+    open: import("./state/open-slice").OpenSlice;
+    selection: import("./state/selection-slice").SelectionState;
+    drag: import("./state/drag-slice").DragSlice;
+};
+export declare const DndContext: React.Context<import("./state/dnd-slice").DndState | null>;
+export declare function useDndContext(): import("./state/dnd-slice").DndState;
+export declare const DataUpdatesContext: React.Context<number>;
+export declare function useDataUpdates(): void;

package/dist/module/context.js

@@ -0,0 +1,26 @@
+import { createContext, useContext } from "react";
+export const TreeApiContext = createContext(null);
+export function useTreeApi() {
+    const value = useContext(TreeApiContext);
+    if (value === null)
+        throw new Error("No Tree Api Provided");
+    return value;
+}
+export const NodesContext = createContext(null);
+export function useNodesContext() {
+    const value = useContext(NodesContext);
+    if (value === null)
+        throw new Error("Provide a NodesContext");
+    return value;
+}
+export const DndContext = createContext(null);
+export function useDndContext() {
+    const value = useContext(DndContext);
+    if (value === null)
+        throw new Error("Provide a DnDContext");
+    return value;
+}
+export const DataUpdatesContext = createContext(0);
+export function useDataUpdates() {
+    useContext(DataUpdatesContext);
+}

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

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

package/dist/module/data/create-index.js

@@ -0,0 +1,6 @@
+export const createIndex = (nodes) => {
+    return nodes.reduce((map, node, index) => {
+        map[node.id] = index;
+        return map;
+    }, {});
+};

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

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

package/dist/module/data/create-list.js

@@ -0,0 +1,58 @@
+export function createList(tree) {
+    if (tree.isFiltered) {
+        return flattenAndFilterTree(tree.root, tree.isMatch.bind(tree));
+    }
+    else {
+        return flattenTree(tree.root);
+    }
+}
+function flattenTree(root) {
+    const list = [];
+    function collect(node) {
+        var _a;
+        if (node.level >= 0) {
+            list.push(node);
+        }
+        if (node.isOpen) {
+            (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(collect);
+        }
+    }
+    collect(root);
+    list.forEach(assignRowIndex);
+    return list;
+}
+function flattenAndFilterTree(root, isMatch) {
+    const matches = {};
+    const list = [];
+    function markMatch(node) {
+        const yes = !node.isRoot && isMatch(node);
+        if (yes) {
+            matches[node.id] = true;
+            let parent = node.parent;
+            while (parent) {
+                matches[parent.id] = true;
+                parent = parent.parent;
+            }
+        }
+        if (node.children) {
+            for (let child of node.children)
+                markMatch(child);
+        }
+    }
+    function collect(node) {
+        var _a;
+        if (node.level >= 0 && matches[node.id]) {
+            list.push(node);
+        }
+        if (node.isOpen) {
+            (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(collect);
+        }
+    }
+    markMatch(root);
+    collect(root);
+    list.forEach(assignRowIndex);
+    return list;
+}
+function assignRowIndex(node, index) {
+    node.rowIndex = index;
+}

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

@@ -0,0 +1,4 @@
+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>(tree: TreeApi<T>): NodeApi<T>;

package/dist/module/data/create-root.js

@@ -0,0 +1,39 @@
+import { NodeApi } from "../interfaces/node-api";
+export const ROOT_ID = "__REACT_ARBORIST_INTERNAL_ROOT__";
+export function createRoot(tree) {
+    var _a;
+    function visitSelfAndChildren(data, level, parent) {
+        const id = tree.accessId(data);
+        const node = new NodeApi({
+            tree,
+            data,
+            level,
+            parent,
+            id,
+            children: null,
+            isDraggable: tree.isDraggable(data),
+            rowIndex: null,
+        });
+        const children = tree.accessChildren(data);
+        if (children) {
+            node.children = children.map((child) => visitSelfAndChildren(child, level + 1, node));
+        }
+        return node;
+    }
+    const root = new NodeApi({
+        tree,
+        id: ROOT_ID,
+        // @ts-ignore
+        data: { id: ROOT_ID },
+        level: -1,
+        parent: null,
+        children: null,
+        isDraggable: true,
+        rowIndex: null,
+    });
+    const data = (_a = tree.props.data) !== null && _a !== void 0 ? _a : [];
+    root.children = data.map((child) => {
+        return visitSelfAndChildren(child, 0, root);
+    });
+    return root;
+}

package/dist/module/data/make-tree.d.ts

@@ -0,0 +1,5 @@
+export declare function makeTree(string: string): {
+    id: string;
+    name: string;
+    isOpen: boolean;
+};

package/dist/module/data/make-tree.js

@@ -0,0 +1,36 @@
+// A function that turns a string of text into a tree
+// Each line is a node
+// The number of spaces at the beginning indicate the level
+export function makeTree(string) {
+    const root = { id: "ROOT", name: "ROOT", isOpen: true };
+    let prevNode = root;
+    let prevLevel = -1;
+    let id = 1;
+    string.split("\n").forEach((line) => {
+        const name = line.trimStart();
+        const level = line.length - name.length;
+        const diff = level - prevLevel;
+        const node = { id: (id++).toString(), name, isOpen: false };
+        if (diff === 1) {
+            // First child
+            //@ts-ignore
+            node.parent = prevNode;
+            //@ts-ignore
+            prevNode.children = [node];
+        }
+        else {
+            // Find the parent and go up
+            //@ts-ignore
+            let parent = prevNode.parent;
+            for (let i = diff; i < 0; i++) {
+                parent = parent.parent;
+            }
+            //@ts-ignore
+            node.parent = parent;
+            parent.children.push(node);
+        }
+        prevNode = node;
+        prevLevel = level;
+    });
+    return root;
+}

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

@@ -0,0 +1,44 @@
+type SimpleData = {
+    id: string;
+    name: string;
+    children?: SimpleData[];
+};
+export declare class SimpleTree<T extends SimpleData> {
+    root: SimpleNode<T>;
+    constructor(data: T[]);
+    get data(): T[];
+    create(args: {
+        parentId: string | null;
+        index: number;
+        data: T;
+    }): null | undefined;
+    move(args: {
+        id: string;
+        parentId: string | null;
+        index: number;
+    }): void;
+    update(args: {
+        id: string;
+        changes: Partial<T>;
+    }): void;
+    drop(args: {
+        id: string;
+    }): void;
+    find(id: string, node?: SimpleNode<T>): SimpleNode<T> | null;
+}
+declare class SimpleNode<T extends SimpleData> {
+    data: T;
+    parent: SimpleNode<T> | null;
+    id: string;
+    children?: SimpleNode<T>[];
+    constructor(data: T, parent: SimpleNode<T> | null);
+    hasParent(): this is this & {
+        parent: SimpleNode<T>;
+    };
+    get childIndex(): number;
+    addChild(data: T, index: number): void;
+    removeChild(index: number): void;
+    update(changes: Partial<T>): void;
+    drop(): void;
+}
+export {};

package/dist/module/data/simple-tree.js

@@ -0,0 +1,96 @@
+export class SimpleTree {
+    constructor(data) {
+        this.root = createRoot(data);
+    }
+    get data() {
+        var _a, _b;
+        return (_b = (_a = this.root.children) === null || _a === void 0 ? void 0 : _a.map((node) => node.data)) !== null && _b !== void 0 ? _b : [];
+    }
+    create(args) {
+        const parent = args.parentId ? this.find(args.parentId) : this.root;
+        if (!parent)
+            return null;
+        parent.addChild(args.data, args.index);
+    }
+    move(args) {
+        const src = this.find(args.id);
+        const parent = args.parentId ? this.find(args.parentId) : this.root;
+        if (!src || !parent)
+            return;
+        parent.addChild(src.data, args.index);
+        src.drop();
+    }
+    update(args) {
+        const node = this.find(args.id);
+        if (node)
+            node.update(args.changes);
+    }
+    drop(args) {
+        const node = this.find(args.id);
+        if (node)
+            node.drop();
+    }
+    find(id, node = this.root) {
+        if (!node)
+            return null;
+        if (node.id === id)
+            return node;
+        if (node.children) {
+            for (let child of node.children) {
+                const found = this.find(id, child);
+                if (found)
+                    return found;
+            }
+            return null;
+        }
+        return null;
+    }
+}
+function createRoot(data) {
+    const root = new SimpleNode({ id: "ROOT" }, null);
+    root.children = data.map((d) => createNode(d, root));
+    return root;
+}
+function createNode(data, parent) {
+    const node = new SimpleNode(data, parent);
+    if (data.children)
+        node.children = data.children.map((d) => createNode(d, node));
+    return node;
+}
+class SimpleNode {
+    constructor(data, parent) {
+        this.data = data;
+        this.parent = parent;
+        this.id = data.id;
+    }
+    hasParent() {
+        return !!this.parent;
+    }
+    get childIndex() {
+        return this.hasParent() ? this.parent.children.indexOf(this) : -1;
+    }
+    addChild(data, index) {
+        var _a, _b;
+        const node = createNode(data, this);
+        this.children = (_a = this.children) !== null && _a !== void 0 ? _a : [];
+        this.children.splice(index, 0, node);
+        this.data.children = (_b = this.data.children) !== null && _b !== void 0 ? _b : [];
+        this.data.children.splice(index, 0, data);
+    }
+    removeChild(index) {
+        var _a, _b;
+        (_a = this.children) === null || _a === void 0 ? void 0 : _a.splice(index, 1);
+        (_b = this.data.children) === null || _b === void 0 ? void 0 : _b.splice(index, 1);
+    }
+    update(changes) {
+        if (this.hasParent()) {
+            const i = this.childIndex;
+            this.parent.addChild(Object.assign(Object.assign({}, this.data), changes), i);
+            this.drop();
+        }
+    }
+    drop() {
+        if (this.hasParent())
+            this.parent.removeChild(this.childIndex);
+    }
+}

package/dist/module/dnd/compute-drop.d.ts

@@ -0,0 +1,37 @@
+import { XYCoord } from "react-dnd";
+import { NodeApi } from "../interfaces/node-api";
+import { DropResult } from "./drop-hook";
+type Args = {
+    element: HTMLElement;
+    offset: XYCoord;
+    indent: number;
+    node: NodeApi | null;
+    prevNode: NodeApi | null;
+    nextNode: NodeApi | null;
+};
+export type ComputedDrop = {
+    drop: DropResult | null;
+    cursor: Cursor | null;
+};
+declare function lineCursor(index: number, level: number): {
+    type: "line";
+    index: number;
+    level: number;
+};
+declare function noCursor(): {
+    type: "none";
+};
+declare function highlightCursor(id: string): {
+    type: "highlight";
+    id: string;
+};
+export type LineCursor = ReturnType<typeof lineCursor>;
+export type NoCursor = ReturnType<typeof noCursor>;
+export type HighlightCursor = ReturnType<typeof highlightCursor>;
+export type Cursor = LineCursor | NoCursor | HighlightCursor;
+/**
+ * This is the most complex, tricky function in the whole repo.
+ * It could be simplified and made more understandable.
+ */
+export declare function computeDrop(args: Args): ComputedDrop;
+export {};