@keenmate/svelte-treeview 1.0.0-beta.0 → 1.0.0-beta.1

package/dist/TreeView.svelte

@@ -1,10 +1,9 @@
-<script>import ContextMenu from './menu/ContextMenu.svelte';
+<script generics="T">import ContextMenu from './menu/ContextMenu.svelte';
 import { createEventDispatcher, onMount } from 'svelte';
 import { defaultClasses, defaultPixelTreshold, defaultPropNames } from './constants.js';
 import { SelectionModes as SelectionModes, VisualState } from './types.js';
 import { TreeHelper } from './index.js';
 import Branch from './Branch.svelte';
-import { PropertyHelper } from './helpers/property-helper.js';
 import { SelectionProvider } from './providers/selection-provider.js';
 const dispatch = createEventDispatcher();
 export let treeId;
@@ -86,7 +85,7 @@ export let customClasses = defaultClasses;
  * If you want to only search leaf nodes,
  * its your responsibility to check if its hasChildren property is false
  */
-export let filter = (_) => true;
+export let filter = null;
 /**
  * Log function that will be called when something happens in tree.
  * Used mostly for debugging
@@ -104,34 +103,36 @@ let expandedIds = [];
 // OLD variables, will be removed/changed in future
 let draggedPath = null;
 let highlightedNode = null;
-let dragenterTimestamp = null;
-let canNestPos = false;
-let canNestTime = false;
-let canNest;
-let dragTimeout;
+let canNest = false;
 let validTarget = false;
 let insPos;
 $: dragAndDrop && console.warn('Drag and drop is not supported in this version');
-// ensure tree is never null
-$: tree, tree == null || tree == undefined ? (tree = []) : '';
-$: propHelper = new PropertyHelper({ ...defaultPropNames, ...props });
-$: helper = new TreeHelper(propHelper, {
-    recursive: recursiveSelection,
-    recalculateNodePath,
-    checkboxes: selectionMode,
+$: helper = new TreeHelper({
     separator
 });
 $: selectionProvider = new SelectionProvider(helper, recursiveSelection);
-$: computedTree = helper.computeTree(tree, filter, expandedIds, value, selectionProvider.computeVisualStates(tree, value));
-$: console.log('computedTree', computedTree);
-//if insert is disabled => nest right away and never nest if its disabled
-$: canNest =
-    (propHelper.insertDisabled(highlightedNode) || canNestPos || canNestTime) &&
-        propHelper.nestDisabled(highlightedNode) !== true;
+$: computedTree = computeTree(helper, selectionProvider, tree, filter, props, expandedIds, value);
+$: debugLog('computedTree', computedTree);
+export function changeAllExpansion(changeTo) {
+    debugLog('chaning expantion of every node to ', changeTo ? 'expanded' : 'collapsed');
+    expandedIds = computedTree.map((node) => node.id);
+}
+function computeTree(helper, selectionProvider, userProvidedTree, filter, props, expandedIds, value) {
+    if (!Array.isArray(userProvidedTree) || !Array.isArray(value)) {
+        console.error('value and tree must be arrays!!');
+        return [];
+    }
+    let mappedTree = helper.mapTree(userProvidedTree, filter, { ...defaultPropNames, ...props });
+    helper.markExpanded(mappedTree, expandedIds);
+    // TODO here we could save last value and only recompute visual state if value changed
+    // or use diff to only update affected nodes
+    selectionProvider.markSelected(mappedTree, value);
+    return mappedTree;
+}
 function onExpand(event) {
     const { node, changeTo } = event.detail;
     expandedIds = helper.changeExpansion(node, changeTo, expandedIds);
-    debugLog("changed expansion of node '", helper.path(node), "' to ", changeTo);
+    debugLog("changed expansion of node '", node.id, "' to ", changeTo);
     //trigger callback if it is present and node has useCallback property set to true
     if (changeTo) {
         handleCallback(node);
@@ -150,28 +151,23 @@ function onExpand(event) {
 }
 function handleCallback(node) {
     // only call on nodes with children
-    if (propHelper.hasChildren(node) !== true) {
+    if (node.hasChildren !== true) {
         return;
     }
     if (loadChildrenAsync == null) {
-        console.warn('loadChildrenAsync is not set, but useCallback is set to true on node with path', helper.path(node));
+        console.warn('loadChildrenAsync is not set, but useCallback is set to true on node with path', node.path);
         return;
     }
     debugLog('calling callback for node', node);
     // TODO mark node as loaded and dont call callback again
     loadChildrenAsync(node);
 }
-// TODO remove and expose function from package
-export function changeAllExpansion(changeTo) {
-    debugLog('chaning expantion of every node to ', changeTo ? 'expanded' : 'collapsed');
-    tree = helper.changeEveryExpansion(tree, changeTo);
-}
 function onSelectionChanged(event) {
     const { node } = event.detail;
-    const nodePath = helper.path(node);
+    const nodePath = node.path;
     const changeTo = !selectionProvider.isNodeSelected(node);
-    const newValue = selectionProvider.setSelection(tree, nodePath, changeTo, value);
-    debugLog("changing selection of node '", nodePath, "' to ", !propHelper.selected(node), ' returing value ', newValue);
+    const newValue = selectionProvider.setSelection(computedTree, nodePath, changeTo, value);
+    debugLog("changing selection of node '", nodePath, "' to ", changeTo, ' returing value ', newValue);
     dispatch('change', newValue);
     dispatch('selection', {
         node: node,
@@ -196,42 +192,42 @@ function debugLog(...data) {
         logger(...data);
     }
 }
-</script>
-
-<Branch
-	branchRootNode={null}
-	{treeId}
-	checkboxes={selectionMode}
-	tree={computedTree}
-	recursive={recursiveSelection}
-	{onlyLeafCheckboxes}
-	{hideDisabledCheckboxes}
-	{expandTo}
-	{draggedPath}
-	{dragAndDrop}
-	{highlightedNode}
-	{readonly}
-	{helper}
-	classes={customClasses}
-	{verticalLines}
-	on:open-ctxmenu={openContextMenu}
-	on:internal-expand={onExpand}
-	on:internal-selectionChanged={onSelectionChanged}
-	let:node={nodeInSlot}
-	childDepth={0}
-	{canNest}
-	{validTarget}
-	{insPos}
->
-	<slot node={nodeInSlot} />
-</Branch>
-
-<ContextMenu bind:this={ctxMenu}>
-	<svelte:fragment let:node>
-		<slot name="context-menu" {node} />
-	</svelte:fragment>
-</ContextMenu>
-
+</script>
+
+<Branch
+	branchRootNode={null}
+	{treeId}
+	checkboxes={selectionMode}
+	tree={computedTree}
+	recursive={recursiveSelection}
+	{onlyLeafCheckboxes}
+	{hideDisabledCheckboxes}
+	{expandTo}
+	{draggedPath}
+	{dragAndDrop}
+	{highlightedNode}
+	{readonly}
+	{helper}
+	classes={customClasses}
+	{verticalLines}
+	on:open-ctxmenu={openContextMenu}
+	on:internal-expand={onExpand}
+	on:internal-selectionChanged={onSelectionChanged}
+	let:node={nodeInSlot}
+	childDepth={0}
+	{canNest}
+	{validTarget}
+	{insPos}
+>
+	<slot node={nodeInSlot} />
+</Branch>
+
+<ContextMenu bind:this={ctxMenu}>
+	<svelte:fragment let:node>
+		<slot name="context-menu" {node} />
+	</svelte:fragment>
+</ContextMenu>
+
 <style global>:global(.treeview) {
   padding: 0;
 }
@@ -343,4 +339,4 @@ function debugLog(...data) {
 }
 :global(.treeview) :global(.pointer-cursor) {
   cursor: grab;
-}</style>
+}</style>

package/dist/TreeView.svelte.d.ts

@@ -1,13 +1,13 @@
 import { SvelteComponent } from "svelte";
-import { SelectionModes as SelectionModes, type Node, type Props, type CustomizableClasses, type DragEnterCallback, type BeforeMovedCallback, type ExpandedCallback, type NodeId } from './types.js';
-declare const __propDef: {
-    props: {
+import { SelectionModes as SelectionModes, type Props, type CustomizableClasses, type DragEnterCallback, type BeforeMovedCallback, type ExpandedCallback, type NodeId, type ProvidedTree, type FilterFunction } from './types.js';
+declare class __sveltets_Render<T> {
+    props(): {
         treeId: string;
         /**
              * Array of nodes that represent tree structure.
              * Each node should have unique path
              * All tree modifications are made by modifying this array, so you need to bind it to parent component
-             */ tree: Node[];
+             */ tree: ProvidedTree;
         /**
              * Node paths of selected nodes
              */ value?: NodeId[] | undefined;
@@ -65,7 +65,7 @@ declare const __propDef: {
              * User Higher order functions for reactive search.
              * If you want to only search leaf nodes,
              * its your responsibility to check if its hasChildren property is false
-             */ filter?: ((node: any) => boolean) | undefined;
+             */ filter?: FilterFunction | null | undefined;
         /**
              * Log function that will be called when something happens in tree.
              * Used mostly for debugging
@@ -78,7 +78,7 @@ declare const __propDef: {
         beforeMovedCallback?: BeforeMovedCallback | null | undefined;
         changeAllExpansion?: ((changeTo: boolean) => void) | undefined;
     };
-    events: {
+    events(): {
         expansion: CustomEvent<any>;
         expanded: CustomEvent<any>;
         closed: CustomEvent<any>;
@@ -89,7 +89,7 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
+    slots(): {
         default: {
             node: any;
         };
@@ -97,11 +97,11 @@ declare const __propDef: {
             node: any;
         };
     };
-};
-export type TreeViewProps = typeof __propDef.props;
-export type TreeViewEvents = typeof __propDef.events;
-export type TreeViewSlots = typeof __propDef.slots;
-export default class TreeView extends SvelteComponent<TreeViewProps, TreeViewEvents, TreeViewSlots> {
+}
+export type TreeViewProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type TreeViewEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type TreeViewSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class TreeView<T> extends SvelteComponent<TreeViewProps<T>, TreeViewEvents<T>, TreeViewSlots<T>> {
     get changeAllExpansion(): (changeTo: boolean) => void;
 }
 export {};

package/dist/constants.js

@@ -3,15 +3,12 @@ export const defaultPropNames = {
     nodePath: 'nodePath',
     nodeId: 'nodePath',
     hasChildren: 'hasChildren',
-    expanded: '__expanded',
-    selected: '__selected',
     useCallback: '__useCallback',
     priority: 'priority',
     isDraggable: 'isDraggable',
     insertDisabled: 'insertDisabled',
     nestDisabled: 'nestDisabled',
-    checkbox: 'checkbox',
-    visualState: '__visual_state'
+    checkbox: 'checkbox'
 };
 export const defaultPixelTreshold = 50;
 export const defaultClasses = {
@@ -25,6 +22,5 @@ export const defaultClasses = {
     inserLineNestClass: ''
 };
 export const defaultConfig = {
-    separator: '.',
-    checkboxes: SelectionModes.none
+    separator: '.'
 };

package/dist/helpers/tree-helper.d.ts

@@ -1,35 +1,28 @@
-import { type Node, type NodePath, type HelperConfig, type Tree, VisualState, type NodeId } from '../types.js';
-import type { PropertyHelper } from './property-helper.js';
+import { type Node, type NodePath, type HelperConfig, type Tree, type NodeId, type Props, type FilterFunction } from '../types.js';
 export declare class TreeHelper {
-    props: PropertyHelper;
     config: HelperConfig;
-    constructor(props: PropertyHelper, config?: HelperConfig);
-    path(node: Node | null): NodePath;
-    computeTree(tree: Tree, filter: (node: any) => boolean, expandedNodeIds: NodeId[], selectedNodeIds: NodeId[], visualStates: {
-        [nodePath: string]: VisualState;
-    }): Tree;
+    constructor(config?: HelperConfig);
+    mapTree(tree: Tree, filter: FilterFunction | null, properties: Props): Node[];
+    markExpanded(tree: Tree, expandedNodeIds: NodeId[]): void;
     getParentNodePath(nodePath: NodePath): NodePath;
     isChildrenOf(parentNodePath: NodePath, childrenNodePath: NodePath): boolean | undefined;
-    hasChildren(tree: Tree, nodePath: NodePath): object | undefined;
+    hasChildren(tree: Tree, nodePath: NodePath): Node | undefined;
     findNode(tree: Tree, nodePath: NodePath): Node | null;
     nodePathIsChild(nodePath: NodePath): boolean | undefined;
     getDirectChildren(tree: Tree, parentNodePath: NodePath): Tree;
-    allCHildren(tree: Tree, parentNodePath: NodePath): object[];
-    getAllLeafNodes(tree: Tree): object[];
-    joinTrees(filteredTree: Tree, tree: Tree): object[];
-    mergeTrees(oldTree: Tree, addedTree: Tree, nodePath?: string): object[];
+    allCHildren(tree: Tree, parentNodePath: NodePath): Node[];
+    getAllLeafNodes(tree: Tree): Node[];
+    joinTrees(filteredTree: Tree, tree: Tree): Node[];
+    mergeTrees(oldTree: Tree, addedTree: Tree, nodePath?: string): Node[];
     /** toggles expansion on
      */
     changeExpansion(node: Node, changeTo: boolean, oldExpandedNodeIds: NodeId[]): NodeId[];
-    /** changes expansion of every node that has this.hasChildren set to true
-     */
-    changeEveryExpansion(tree: Tree, changeTo: boolean): object[];
     /** changes expansion of every node that has this.hasChildren set to true if they are abose set level and expansion property isnt set
      */
-    expandToLevel(tree: Tree, level: number): object[];
+    expandToLevel(tree: Tree, level: number): NodeId[];
     getDepthLevel(nodePath: NodePath): number;
-    searchTree(tree: Tree, filter: (node: unknown) => boolean): object[];
-    getParents(tree: Tree, node: Node): object[];
+    searchTree(tree: Tree, filter: FilterFunction | null): Tree;
+    getParents(tree: Tree, targetNode: Node): Node[];
     /** orders nodes by priorityProp
      */
     orderByPriority(tree: Tree): Tree;

package/dist/helpers/tree-helper.js

@@ -3,28 +3,37 @@ import uniqueBy from 'lodash.uniqby'; // used by tree merge
 import { VisualState } from '../types.js';
 import { defaultConfig } from '../constants.js';
 export class TreeHelper {
-    props;
     config;
-    constructor(props, config = defaultConfig) {
-        this.props = props;
+    constructor(config = defaultConfig) {
         this.config = config;
     }
-    // replace with this.props.path
-    path(node) {
-        return this.props.path(node);
-    }
-    computeTree(tree, filter, expandedNodeIds, selectedNodeIds, visualStates) {
+    mapTree(tree, filter, properties) {
         {
             return this.searchTree(tree, filter).map((node) => {
-                const clonedNode = { ...node };
-                const nodeId = this.props.id(clonedNode) ?? '';
-                const expanded = expandedNodeIds.includes(nodeId);
-                const selected = selectedNodeIds.includes(nodeId);
-                const visualState = visualStates[nodeId] ?? VisualState.notSelected;
-                this.props.setExpanded(clonedNode, expanded);
-                this.props.setSelected(clonedNode, selected);
-                this.props.setVisualState(clonedNode, visualState);
-                return clonedNode;
+                // TODO maybe create class for nodes
+                const mappedNode = {
+                    originalNode: node,
+                    id: node[properties.nodeId],
+                    path: node[properties.nodePath],
+                    hasChildren: node[properties.hasChildren],
+                    useCallback: node[properties.useCallback],
+                    priority: node[properties.priority],
+                    isDraggable: node[properties.isDraggable],
+                    insertDisabled: node[properties.insertDisabled],
+                    nestDisabled: node[properties.nestDisabled],
+                    checkbox: node[properties.checkbox],
+                    expanded: false,
+                    selected: false,
+                    visualState: VisualState.notSelected
+                };
+                return mappedNode;
+            });
+        }
+    }
+    markExpanded(tree, expandedNodeIds) {
+        {
+            tree.forEach((node) => {
+                node.expanded = expandedNodeIds.includes(node.id ?? '');
             });
         }
     }
@@ -32,7 +41,7 @@ export class TreeHelper {
     getParentNodePath(nodePath) {
         if (nodePath == null)
             throw new Error('cannot get parent of root');
-        const separator = this.config.separator ?? '.';
+        const separator = this.config.separator;
         const parentPath = nodePath?.substring(0, nodePath.lastIndexOf(separator));
         if (parentPath === '')
             return null;
@@ -44,34 +53,34 @@ export class TreeHelper {
         return childrenNodePath?.startsWith(parentNodePath ?? '');
     }
     hasChildren(tree, nodePath) {
-        return tree?.find((x) => this.getParentNodePath(this.path(x)) === nodePath);
+        return tree?.find((x) => this.getParentNodePath(x.path) === nodePath);
     }
     findNode(tree, nodePath) {
-        return tree.find((node) => this.path(node) === nodePath) ?? null;
+        return tree.find((node) => node.path === nodePath) ?? null;
     }
     nodePathIsChild(nodePath) {
-        const separator = this.config.separator ?? '.';
+        const separator = this.config.separator;
         const includesSeparator = nodePath?.includes(separator);
         return includesSeparator;
     }
     getDirectChildren(tree, parentNodePath) {
-        const children = (tree || []).filter((x) => !parentNodePath
-            ? !this.nodePathIsChild(this.path(x))
-            : this.getParentNodePath(this.path(x)) === parentNodePath);
+        const children = tree.filter((node) => !parentNodePath
+            ? !this.nodePathIsChild(node.path)
+            : this.getParentNodePath(node.path) === parentNodePath);
         const ordered = this.orderByPriority(children);
         return ordered;
     }
     allCHildren(tree, parentNodePath) {
-        const children = tree.filter((x) => this.isChildrenOf(parentNodePath, this.path(x)));
+        const children = tree.filter((node) => this.isChildrenOf(parentNodePath, node.path));
         return children;
     }
     getAllLeafNodes(tree) {
-        return tree.filter((x) => {
-            return this.props.hasChildren(x) == undefined || this.props.hasChildren(x) == false;
+        return tree.filter((node) => {
+            return node.hasChildren !== true;
         });
     }
     joinTrees(filteredTree, tree) {
-        return tree.map((tnode) => this.findNode(filteredTree, this.path(tnode)) || tnode);
+        return tree.map((node) => this.findNode(filteredTree, node.path) || node);
     }
     mergeTrees(oldTree, addedTree, nodePath = 'nodePath') {
         return orderBy(addedTree, oldTree, nodePath);
@@ -79,44 +88,33 @@ export class TreeHelper {
     /** toggles expansion on
      */
     changeExpansion(node, changeTo, oldExpandedNodeIds) {
-        const nodeId = this.props.id(node) ?? '';
+        const nodeId = node.id ?? '';
         if (changeTo === true) {
             return [...oldExpandedNodeIds, nodeId];
         }
         return oldExpandedNodeIds.filter((x) => x !== nodeId);
     }
-    /** changes expansion of every node that has this.hasChildren set to true
-     */
-    changeEveryExpansion(tree, changeTo) {
-        return tree.map((node) => {
-            if (this.props.hasChildren(node) == true) {
-                this.props.setExpanded(node, changeTo);
-            }
-            return node;
-        });
-    }
     /** changes expansion of every node that has this.hasChildren set to true if they are abose set level and expansion property isnt set
      */
     expandToLevel(tree, level) {
-        return tree.map((n) => {
-            if (this.props.expanded(n) == undefined &&
-                this.props.expanded(n) == null &&
-                this.props.useCallback(n) != true &&
-                this.getDepthLevel(this.path(n)) <= level) {
-                this.props.setExpanded(n, true);
-            }
-            return n;
-        });
+        return tree
+            .filter((node) => node.expanded == undefined &&
+            node.expanded == null &&
+            node.useCallback != true &&
+            this.getDepthLevel(node.path) <= level)
+            .map((node) => node.id ?? '');
     }
     //based on number of dots
     getDepthLevel(nodePath) {
         if (nodePath == null)
             return 0;
-        const separator = this.config.separator ?? '.';
+        const separator = this.config.separator;
         return nodePath.split(separator).length - 1;
     }
     //#endregion
     searchTree(tree, filter) {
+        if (!filter)
+            return tree;
         const filteredNodes = tree.filter(filter);
         const resultNodes = [];
         // add all parents from each node
@@ -126,26 +124,26 @@ export class TreeHelper {
             const parentNodes = this.getParents(tree, node);
             resultNodes.push(...parentNodes);
         });
-        const uniqueNodes = uniqueBy(resultNodes, (node) => this.path(node));
+        const uniqueNodes = uniqueBy(resultNodes, (node) => node.path);
         return uniqueNodes;
     }
-    getParents(tree, node) {
+    getParents(tree, targetNode) {
         const parentsPaths = [];
-        let nodePath = this.path(node);
+        let nodePath = targetNode.path;
         // get all parents
         while (nodePath && nodePath.length > 0) {
             nodePath = this.getParentNodePath(nodePath);
             parentsPaths.push(nodePath);
         }
         //find nodes for given ids
-        const parentNodes = tree.filter((n) => parentsPaths.some((parentNodePath) => this.path(n) === parentNodePath));
+        const parentNodes = tree.filter((node) => parentsPaths.some((parentNodePath) => node.path === parentNodePath));
         return parentNodes;
     }
     /** orders nodes by priorityProp
      */
     orderByPriority(tree) {
         // TODO investigata that it really works
-        tree.sort((a, b) => this.props.priority(b) ? this.props.priority(a) - this.props.priority(b) : 1);
+        tree.sort((a, b) => (b.priority ? a.priority - b.priority : 1));
         return tree;
     }
 }

package/dist/menu/ContextMenu.svelte

@@ -1,33 +1,27 @@
-<script>
-	// @ts-nocheck
-
-	import Menu from './Menu.svelte';
-
-	let pos = { x: 0, y: 0 };
-	let showMenu = false;
-	let node = null;
-
-	export async function onRightClick(e, n) {
-		if (showMenu) {
-			showMenu = false;
-			await new Promise((res) => setTimeout(res, 100));
-		}
-		node = n;
-		pos = { x: e.clientX, y: e.clientY };
-		showMenu = true;
-	}
-
-	function closeMenu() {
-		showMenu = false;
-		node = null;
-	}
-</script>
-
-<svelte:window on:click={closeMenu} />
-{#if showMenu}
-	<Menu {...pos} on:click={closeMenu} on:clickoutside={closeMenu}>
-		<slot {node}>
-			<b> context menu openned from: {node?.nodePath}</b>
-		</slot>
-	</Menu>
-{/if}
+<script>import Menu from './Menu.svelte';
+let pos = { x: 0, y: 0 };
+let showMenu = false;
+let clickedNode = null;
+export async function onRightClick(event, node) {
+    if (showMenu) {
+        showMenu = false;
+        await new Promise((res) => setTimeout(res, 100));
+    }
+    clickedNode = node;
+    pos = { x: event.clientX, y: event.clientY };
+    showMenu = true;
+}
+function closeMenu() {
+    showMenu = false;
+    clickedNode = null;
+}
+</script>
+
+<svelte:window on:click={closeMenu} />
+{#if showMenu}
+	<Menu {...pos} on:click={closeMenu} on:clickoutside={closeMenu}>
+		<slot node={clickedNode}>
+			<b> context menu openned from: {clickedNode?.path}</b>
+		</slot>
+	</Menu>
+{/if}

package/dist/menu/ContextMenu.svelte.d.ts

@@ -1,24 +1,8 @@
-/** @typedef {typeof __propDef.props}  ContextMenuProps */
-/** @typedef {typeof __propDef.events}  ContextMenuEvents */
-/** @typedef {typeof __propDef.slots}  ContextMenuSlots */
-export default class ContextMenu extends SvelteComponent<{
-    onRightClick?: ((e: any, n: any) => Promise<void>) | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {
-        node: null;
-    };
-}> {
-    get onRightClick(): (e: any, n: any) => Promise<void>;
-}
-export type ContextMenuProps = typeof __propDef.props;
-export type ContextMenuEvents = typeof __propDef.events;
-export type ContextMenuSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
+import type { Node } from '../types.js';
 declare const __propDef: {
     props: {
-        onRightClick?: ((e: any, n: any) => Promise<void>) | undefined;
+        onRightClick?: ((event: MouseEvent, node: Node) => Promise<void>) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -29,4 +13,10 @@ declare const __propDef: {
         };
     };
 };
+export type ContextMenuProps = typeof __propDef.props;
+export type ContextMenuEvents = typeof __propDef.events;
+export type ContextMenuSlots = typeof __propDef.slots;
+export default class ContextMenu extends SvelteComponent<ContextMenuProps, ContextMenuEvents, ContextMenuSlots> {
+    get onRightClick(): (event: MouseEvent, node: Node) => Promise<void>;
+}
 export {};