react-arborist 3.3.0-rc.1 → 3.3.1-0

package/dist/module/state/drag-slice.js

@@ -0,0 +1,20 @@
+import { initialState } from "./initial";
+/* Reducer */
+export function reducer(state = initialState().nodes.drag, action) {
+    switch (action.type) {
+        case "DND_DRAG_START":
+            return Object.assign(Object.assign({}, state), { id: action.id, selectedIds: action.dragIds });
+        case "DND_DRAG_END":
+            return Object.assign(Object.assign({}, state), { id: null, destinationParentId: null, destinationIndex: null, selectedIds: [] });
+        case "DND_HOVERING":
+            if (action.parentId !== state.destinationParentId ||
+                action.index != state.destinationIndex) {
+                return Object.assign(Object.assign({}, state), { destinationParentId: action.parentId, destinationIndex: action.index });
+            }
+            else {
+                return state;
+            }
+        default:
+            return state;
+    }
+}

package/dist/module/state/edit-slice.d.ts

@@ -0,0 +1,8 @@
+export type EditState = {
+    id: string | null;
+};
+export declare function edit(id: string | null): {
+    type: "EDIT";
+    id: string | null;
+};
+export declare function reducer(state: EditState | undefined, action: ReturnType<typeof edit>): EditState;

package/dist/module/state/edit-slice.js

@@ -0,0 +1,13 @@
+/* Actions */
+export function edit(id) {
+    return { type: "EDIT", id };
+}
+/* Reducer */
+export function reducer(state = { id: null }, action) {
+    if (action.type === "EDIT") {
+        return Object.assign(Object.assign({}, state), { id: action.id });
+    }
+    else {
+        return state;
+    }
+}

package/dist/module/state/focus-slice.d.ts

@@ -0,0 +1,12 @@
+export type FocusState = {
+    id: string | null;
+    treeFocused: boolean;
+};
+export declare function focus(id: string | null): {
+    type: "FOCUS";
+    id: string | null;
+};
+export declare function treeBlur(): {
+    readonly type: "TREE_BLUR";
+};
+export declare function reducer(state: FocusState | undefined, action: ReturnType<typeof focus> | ReturnType<typeof treeBlur>): FocusState;

package/dist/module/state/focus-slice.js

@@ -0,0 +1,20 @@
+/* Types */
+/* Actions */
+export function focus(id) {
+    return { type: "FOCUS", id };
+}
+export function treeBlur() {
+    return { type: "TREE_BLUR" };
+}
+/* Reducer */
+export function reducer(state = { id: null, treeFocused: false }, action) {
+    if (action.type === "FOCUS") {
+        return Object.assign(Object.assign({}, state), { id: action.id, treeFocused: true });
+    }
+    else if (action.type === "TREE_BLUR") {
+        return Object.assign(Object.assign({}, state), { treeFocused: false });
+    }
+    else {
+        return state;
+    }
+}

package/dist/module/state/initial.d.ts

@@ -0,0 +1,3 @@
+import { TreeProps } from "../types/tree-props";
+import { RootState } from "./root-reducer";
+export declare const initialState: (props?: TreeProps<any>) => RootState;

package/dist/module/state/initial.js

@@ -0,0 +1,25 @@
+export const initialState = (props) => {
+    var _a;
+    return ({
+        nodes: {
+            // Changes together
+            open: { filtered: {}, unfiltered: (_a = props === null || props === void 0 ? void 0 : props.initialOpenState) !== null && _a !== void 0 ? _a : {} },
+            focus: { id: null, treeFocused: false },
+            edit: { id: null },
+            drag: {
+                id: null,
+                selectedIds: [],
+                destinationParentId: null,
+                destinationIndex: null,
+            },
+            selection: { ids: new Set(), anchor: null, mostRecent: null },
+        },
+        dnd: {
+            cursor: { type: "none" },
+            dragId: null,
+            dragIds: [],
+            parentId: null,
+            index: -1,
+        },
+    });
+};

package/dist/module/state/open-slice.d.ts

@@ -0,0 +1,30 @@
+import { ActionTypes } from "../types/utils";
+export type OpenMap = {
+    [id: string]: boolean;
+};
+export type OpenSlice = {
+    unfiltered: OpenMap;
+    filtered: OpenMap;
+};
+export declare const actions: {
+    open(id: string, filtered: boolean): {
+        type: "VISIBILITY_OPEN";
+        id: string;
+        filtered: boolean;
+    };
+    close(id: string, filtered: boolean): {
+        type: "VISIBILITY_CLOSE";
+        id: string;
+        filtered: boolean;
+    };
+    toggle(id: string, filtered: boolean): {
+        type: "VISIBILITY_TOGGLE";
+        id: string;
+        filtered: boolean;
+    };
+    clear(filtered: boolean): {
+        type: "VISIBILITY_CLEAR";
+        filtered: boolean;
+    };
+};
+export declare function reducer(state: OpenSlice | undefined, action: ActionTypes<typeof actions>): OpenSlice;

package/dist/module/state/open-slice.js

@@ -0,0 +1,44 @@
+/* Actions */
+export const actions = {
+    open(id, filtered) {
+        return { type: "VISIBILITY_OPEN", id, filtered };
+    },
+    close(id, filtered) {
+        return { type: "VISIBILITY_CLOSE", id, filtered };
+    },
+    toggle(id, filtered) {
+        return { type: "VISIBILITY_TOGGLE", id, filtered };
+    },
+    clear(filtered) {
+        return { type: "VISIBILITY_CLEAR", filtered };
+    },
+};
+/* Reducer */
+function openMapReducer(state = {}, action) {
+    if (action.type === "VISIBILITY_OPEN") {
+        return Object.assign(Object.assign({}, state), { [action.id]: true });
+    }
+    else if (action.type === "VISIBILITY_CLOSE") {
+        return Object.assign(Object.assign({}, state), { [action.id]: false });
+    }
+    else if (action.type === "VISIBILITY_TOGGLE") {
+        const prev = state[action.id];
+        return Object.assign(Object.assign({}, state), { [action.id]: !prev });
+    }
+    else if (action.type === "VISIBILITY_CLEAR") {
+        return {};
+    }
+    else {
+        return state;
+    }
+}
+export function reducer(state = { filtered: {}, unfiltered: {} }, action) {
+    if (!action.type.startsWith("VISIBILITY"))
+        return state;
+    if (action.filtered) {
+        return Object.assign(Object.assign({}, state), { filtered: openMapReducer(state.filtered, action) });
+    }
+    else {
+        return Object.assign(Object.assign({}, state), { unfiltered: openMapReducer(state.unfiltered, action) });
+    }
+}

package/dist/module/state/root-reducer.d.ts

@@ -0,0 +1,96 @@
+import { ActionFromReducer } from "redux";
+export declare const rootReducer: import("redux").Reducer<{
+    nodes: {
+        focus: import("./focus-slice").FocusState;
+        edit: import("./edit-slice").EditState;
+        open: import("./open-slice").OpenSlice;
+        selection: import("./selection-slice").SelectionState;
+        drag: import("./drag-slice").DragSlice;
+    };
+    dnd: import("./dnd-slice").DndState;
+}, {
+    type: "FOCUS";
+    id: string | null;
+} | {
+    readonly type: "TREE_BLUR";
+} | {
+    type: "EDIT";
+    id: string | null;
+} | import("../types/utils").ActionTypes<{
+    open(id: string, filtered: boolean): {
+        type: "VISIBILITY_OPEN";
+        id: string;
+        filtered: boolean;
+    };
+    close(id: string, filtered: boolean): {
+        type: "VISIBILITY_CLOSE";
+        id: string;
+        filtered: boolean;
+    };
+    toggle(id: string, filtered: boolean): {
+        type: "VISIBILITY_TOGGLE";
+        id: string;
+        filtered: boolean;
+    };
+    clear(filtered: boolean): {
+        type: "VISIBILITY_CLEAR";
+        filtered: boolean;
+    };
+}> | import("../types/utils").ActionTypes<{
+    clear: () => {
+        type: "SELECTION_CLEAR";
+    };
+    only: (id: string | import("../types/utils").IdObj) => {
+        type: "SELECTION_ONLY";
+        id: string;
+    };
+    add: (id: string | import("../types/utils").IdObj | string[] | import("../types/utils").IdObj[]) => {
+        type: "SELECTION_ADD";
+        ids: string[];
+    };
+    remove: (id: string | import("../types/utils").IdObj | string[] | import("../types/utils").IdObj[]) => {
+        type: "SELECTION_REMOVE";
+        ids: string[];
+    };
+    set: (args: {
+        ids: Set<string>;
+        anchor: string | null;
+        mostRecent: string | null;
+    }) => {
+        ids: Set<string>;
+        anchor: string | null;
+        mostRecent: string | null;
+        type: "SELECTION_SET";
+    };
+    mostRecent: (id: string | import("../types/utils").IdObj | null) => {
+        type: "SELECTION_MOST_RECENT";
+        id: string | null;
+    };
+    anchor: (id: string | import("../types/utils").IdObj | null) => {
+        type: "SELECTION_ANCHOR";
+        id: string | null;
+    };
+}> | import("../types/utils").ActionTypes<{
+    cursor(cursor: import("../dnd/compute-drop").Cursor): {
+        type: "DND_CURSOR";
+        cursor: import("../dnd/compute-drop").Cursor;
+    };
+    dragStart(id: string, dragIds: string[]): {
+        type: "DND_DRAG_START";
+        id: string;
+        dragIds: string[];
+    };
+    dragEnd(): {
+        type: "DND_DRAG_END";
+    };
+    hovering(parentId: string | null, index: number | null): {
+        type: "DND_HOVERING";
+        parentId: string | null;
+        index: number | null;
+    };
+}>, Partial<{
+    nodes: never;
+    dnd: never;
+}>>;
+export type RootState = ReturnType<typeof rootReducer>;
+export type Actions = ActionFromReducer<typeof rootReducer>;

package/dist/module/state/root-reducer.js

@@ -0,0 +1,17 @@
+import { combineReducers } from "redux";
+import { reducer as focus } from "./focus-slice";
+import { reducer as edit } from "./edit-slice";
+import { reducer as dnd } from "./dnd-slice";
+import { reducer as selection } from "./selection-slice";
+import { reducer as open } from "./open-slice";
+import { reducer as drag } from "./drag-slice";
+export const rootReducer = combineReducers({
+    nodes: combineReducers({
+        focus,
+        edit,
+        open,
+        selection,
+        drag,
+    }),
+    dnd,
+});

package/dist/module/state/selection-slice.d.ts

@@ -0,0 +1,42 @@
+import { ActionTypes, IdObj } from "../types/utils";
+export type SelectionState = {
+    ids: Set<string>;
+    anchor: string | null;
+    mostRecent: string | null;
+};
+export declare const actions: {
+    clear: () => {
+        type: "SELECTION_CLEAR";
+    };
+    only: (id: string | IdObj) => {
+        type: "SELECTION_ONLY";
+        id: string;
+    };
+    add: (id: string | string[] | IdObj | IdObj[]) => {
+        type: "SELECTION_ADD";
+        ids: string[];
+    };
+    remove: (id: string | string[] | IdObj | IdObj[]) => {
+        type: "SELECTION_REMOVE";
+        ids: string[];
+    };
+    set: (args: {
+        ids: Set<string>;
+        anchor: string | null;
+        mostRecent: string | null;
+    }) => {
+        ids: Set<string>;
+        anchor: string | null;
+        mostRecent: string | null;
+        type: "SELECTION_SET";
+    };
+    mostRecent: (id: string | null | IdObj) => {
+        type: "SELECTION_MOST_RECENT";
+        id: string | null;
+    };
+    anchor: (id: string | null | IdObj) => {
+        type: "SELECTION_ANCHOR";
+        id: string | null;
+    };
+};
+export declare function reducer(state: SelectionState | undefined, action: ActionTypes<typeof actions>): SelectionState;

package/dist/module/state/selection-slice.js

@@ -0,0 +1,55 @@
+import { identify } from "../utils";
+import { initialState } from "./initial";
+/* Actions */
+export const actions = {
+    clear: () => ({ type: "SELECTION_CLEAR" }),
+    only: (id) => ({
+        type: "SELECTION_ONLY",
+        id: identify(id),
+    }),
+    add: (id) => ({
+        type: "SELECTION_ADD",
+        ids: (Array.isArray(id) ? id : [id]).map(identify),
+    }),
+    remove: (id) => ({
+        type: "SELECTION_REMOVE",
+        ids: (Array.isArray(id) ? id : [id]).map(identify),
+    }),
+    set: (args) => (Object.assign({ type: "SELECTION_SET" }, args)),
+    mostRecent: (id) => ({
+        type: "SELECTION_MOST_RECENT",
+        id: id === null ? null : identify(id),
+    }),
+    anchor: (id) => ({
+        type: "SELECTION_ANCHOR",
+        id: id === null ? null : identify(id),
+    }),
+};
+/* Reducer */
+export function reducer(state = initialState()["nodes"]["selection"], action) {
+    const ids = state.ids;
+    switch (action.type) {
+        case "SELECTION_CLEAR":
+            return Object.assign(Object.assign({}, state), { ids: new Set() });
+        case "SELECTION_ONLY":
+            return Object.assign(Object.assign({}, state), { ids: new Set([action.id]) });
+        case "SELECTION_ADD":
+            if (action.ids.length === 0)
+                return state;
+            action.ids.forEach((id) => ids.add(id));
+            return Object.assign(Object.assign({}, state), { ids: new Set(ids) });
+        case "SELECTION_REMOVE":
+            if (action.ids.length === 0)
+                return state;
+            action.ids.forEach((id) => ids.delete(id));
+            return Object.assign(Object.assign({}, state), { ids: new Set(ids) });
+        case "SELECTION_SET":
+            return Object.assign(Object.assign({}, state), { ids: action.ids, mostRecent: action.mostRecent, anchor: action.anchor });
+        case "SELECTION_MOST_RECENT":
+            return Object.assign(Object.assign({}, state), { mostRecent: action.id });
+        case "SELECTION_ANCHOR":
+            return Object.assign(Object.assign({}, state), { anchor: action.id });
+        default:
+            return state;
+    }
+}

package/dist/module/types/dnd.d.ts

@@ -0,0 +1,8 @@
+export type CursorLocation = {
+    index: number | null;
+    level: number | null;
+    parentId: string | null;
+};
+export type DragItem = {
+    id: string;
+};

package/dist/module/types/dnd.js

@@ -0,0 +1 @@
+export {};

package/dist/module/types/handlers.d.ts

@@ -0,0 +1,30 @@
+import { NodeApi } from "../interfaces/node-api";
+import { IdObj } from "./utils";
+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<T> = (args: {
+    dragIds: string[];
+    dragNodes: NodeApi<T>[];
+    parentId: string | null;
+    parentNode: NodeApi<T> | null;
+    index: number;
+}) => void | Promise<void>;
+export type RenameHandler<T> = (args: {
+    id: string;
+    name: string;
+    node: NodeApi<T>;
+}) => void | Promise<void>;
+export type DeleteHandler<T> = (args: {
+    ids: string[];
+    nodes: NodeApi<T>[];
+}) => void | Promise<void>;
+export type EditResult = {
+    cancelled: true;
+} | {
+    cancelled: false;
+    value: string;
+};

package/dist/module/types/handlers.js

@@ -0,0 +1 @@
+export {};

package/dist/module/types/renderers.d.ts

@@ -0,0 +1,29 @@
+import { CSSProperties, HTMLAttributes, ReactElement } from "react";
+import { NodeApi } from "../interfaces/node-api";
+import { TreeApi } from "../interfaces/tree-api";
+import { XYCoord } from "react-dnd";
+export type NodeRendererProps<T> = {
+    style: CSSProperties;
+    node: NodeApi<T>;
+    tree: TreeApi<T>;
+    dragHandle?: (el: HTMLDivElement | null) => void;
+    preview?: boolean;
+};
+export type RowRendererProps<T> = {
+    node: NodeApi<T>;
+    innerRef: (el: HTMLDivElement | null) => void;
+    attrs: HTMLAttributes<any>;
+    children: ReactElement;
+};
+export type DragPreviewProps = {
+    offset: XYCoord | null;
+    mouse: XYCoord | null;
+    id: string | null;
+    dragIds: string[];
+    isDragging: boolean;
+};
+export type CursorProps = {
+    top: number;
+    left: number;
+    indent: number;
+};

package/dist/module/types/renderers.js

@@ -0,0 +1 @@
+export {};

package/dist/module/types/state.d.ts

@@ -0,0 +1,2 @@
+import { NodeApi } from "../interfaces/node-api";
+export type NodeState = typeof NodeApi.prototype["state"];

package/dist/module/types/state.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,56 @@
+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";
+import { useDragDropManager } from "react-dnd";
+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;
+    overscanCount?: number;
+    width?: number | string;
+    height?: number;
+    indent?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+    padding?: number;
+    childrenAccessor?: string | ((d: T) => T[] | null);
+    idAccessor?: string | ((d: T) => string);
+    openByDefault?: boolean;
+    selectionFollowsFocus?: boolean;
+    disableMultiSelection?: boolean;
+    disableEdit?: string | boolean | BoolFunc<T>;
+    disableDrag?: string | boolean | BoolFunc<T>;
+    disableDrop?: string | boolean | ((args: {
+        parentNode: NodeApi<T>;
+        dragNodes: NodeApi<T>[];
+        index: number;
+    }) => boolean);
+    onActivate?: (node: NodeApi<T>) => void;
+    onSelect?: (nodes: NodeApi<T>[]) => void;
+    onScroll?: (props: ListOnScrollProps) => void;
+    onToggle?: (id: string) => void;
+    onFocus?: (node: NodeApi<T>) => void;
+    selection?: string;
+    initialOpenState?: OpenMap;
+    searchTerm?: string;
+    searchMatch?: (node: NodeApi<T>, searchTerm: string) => boolean;
+    className?: string | undefined;
+    rowClassName?: string | undefined;
+    dndRootElement?: globalThis.Node | null;
+    onClick?: MouseEventHandler;
+    onContextMenu?: MouseEventHandler;
+    dndManager?: ReturnType<typeof useDragDropManager>;
+}

package/dist/module/types/tree-props.js

@@ -0,0 +1 @@
+export {};

package/dist/module/types/utils.d.ts

@@ -0,0 +1,17 @@
+import { AnyAction } from "redux";
+import { NodeApi } from "../interfaces/node-api";
+export interface IdObj {
+    id: string;
+}
+export type Identity = string | IdObj | null;
+export type BoolFunc<T> = (data: T) => boolean;
+export type ActionTypes<Actions extends {
+    [name: string]: (...args: any[]) => AnyAction;
+}> = ReturnType<Actions[keyof Actions]>;
+export type SelectOptions = {
+    multi?: boolean;
+    contiguous?: boolean;
+};
+export type NodesById<T> = {
+    [id: string]: NodeApi<T>;
+};

package/dist/module/types/utils.js

@@ -0,0 +1 @@
+export {};

package/dist/module/utils.d.ts

@@ -0,0 +1,24 @@
+import { NodeApi } from "./interfaces/node-api";
+import { TreeApi } from "./interfaces/tree-api";
+import { IdObj } from "./types/utils";
+export declare function bound(n: number, min: number, max: number): number;
+export declare function isItem(node: NodeApi<any> | null): boolean | null;
+export declare function isClosed(node: NodeApi<any> | null): boolean | null;
+/**
+ * Is first param a descendant of the second param
+ */
+export declare const isDescendant: (a: NodeApi<any>, b: NodeApi<any>) => boolean;
+export declare const indexOf: (node: NodeApi<any>) => number;
+export declare function noop(): void;
+export declare function dfs(node: NodeApi<any>, id: string): NodeApi<any> | null;
+export declare function walk(node: NodeApi<any>, fn: (node: NodeApi<any>) => void): void;
+export declare function focusNextElement(target: HTMLElement): void;
+export declare function focusPrevElement(target: HTMLElement): void;
+export declare function access<T = boolean>(obj: any, accessor: string | boolean | Function): T;
+export declare function identifyNull(obj: string | IdObj | null): string | null;
+export declare function identify(obj: string | IdObj): string;
+export declare function mergeRefs(...refs: any): (instance: any) => void;
+export declare function safeRun<T extends (...args: any[]) => any>(fn: T | undefined, ...args: Parameters<T>): any;
+export declare function waitFor(fn: () => boolean): Promise<void>;
+export declare function getInsertIndex(tree: TreeApi<any>): number;
+export declare function getInsertParentId(tree: TreeApi<any>): string | null;