@keenmate/svelte-treeview 1.2.12 → 3.0.0

package/README.md

@@ -1,98 +1,98 @@
-# Svelte Treeview
-
-The most elaborate treeview for svelte on earth (or even in our galaxy).
-
-## Features
-
-- load new nodes when expanding
-- choose what object properties to use to get necessary information (id, path, ...)
-- enable checkboxes on whole tree or just per node
-- recursive seletion mode, where leafes can be selected
-- build-in support for search
-- drag and drop functionality controlable per node
-- context menu
-- keyboard navigation
-
-## Instalation
-
-install the package `@keenmate/svelte-treeview` using your favourite package manager.
-
-> [!warning]
-> **Font awesome is required for expand/collapse icons.**
-> If you wish to not use FA, you need to change all icons in classes properties
-
-## Minimal usage
-
-Tree and treeId are only mandatory attributes.
-Tree has to be list of nodes. Only mandatory property of node is nodePath.
-You can specify which keys to use for what properties by setting **props**.
-
-```svelte
-<script lang="ts">
- import { TreeView } from '$lib/index.js';
-
- let tree = [
-  { nodePath: 'animals', title: 'Animals', hasChildren: true },
-    //...
-  { nodePath: 'animals.insects.butterflies', title: 'Butterflies' }
- ];
-</script>
-
-<TreeView {tree} treeId="my-tree" let:node>
- {node.title}
-</TreeView>
-
-```
-
-For more examples see `src/routes/`
-
-> [!note]
-> Both **id** and **path** is required for tree to work.
-> By default tree uses nodePath property for both.
-> So if you change propery fro path, you need to also change id property.
-> You can change both using props attribute.
-
-## Properties
-
-| Name                   | Type                                                               | Default | Description                                                                                           |
-| ---------------------- | ------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------------------------- |
-| treeId                 | string                                                             |         | value used to generate ids of nodes                                                                   |
-| tree                   | array of nodes                                                     |         | represents tree strucuture                                                                            |
-| value                  | array of selected nodeIds                                          | []      |                                                                                                       |
-| verticalLines          | bool                                                               | false   | show vertical guide lines                                                                             |
-| readonly               | bool                                                               | false   | dont allow selection and drag and drop                                                                |
-| separator              | string                                                             | "."     |                                                                                                       |
-| recursiveSelection     | bool                                                               | false   | changes behavior of selection, see   [Selection](#selection)                                          |
-| selectionMode          | SelectionModes                                                     | none    | changes selection mode, see   [Selection](#selection)                                                 |
-| onlyLeafCheckboxes     | bool                                                               | false   | hides non leaf checkboxed, see   [Selection](#selection)                                              |
-| hideDisabledCheckboxes | bool                                                               | false   | hides checkboxes instead of disabling, see   [Selection](#selection)                                  |
-| loadChildrenAsync      | ExpandedCallback                                                   | null    | function that is called when node is expanded, see   [Async loading](#async-loading)                  |
-| showContextMenu        | bool                                                               | false   | On right click dispaly context menu defined in `context-menu` slot, see [Context menu](#context-menu) |
-| expansionThreshold      | number                                                             | 0       | Expand all nodes when there is less than number provided                                              |
-| customClasses          | Partial<CustomizableClasses>                                       | {}      | changes classes used on same elements, see [Custom classes](#custom-classes)                          |
-| filter                 | (node: Node) => boolean or null                                    | null    | function that is used for fitlering. It is called on every node                                       |
-| dragAndDrop            | bool                                                               | false   | enables drag and drop, see [Drag and drop](#drag-and-drop)                                            |
-| dropDisabledCallback   | (draggendNode: Node, targetNode: Node) => Promise<boolean> or null | null    | function called when draging over new node, see [Drag and drop](#drag-and-drop)                       |
-| useKeyboardNavigation  | bool                                                               | false   | enables keyboard navigation , see [Keyboard navigation](#keyboard-navigation)                         |
-| logger                 | ((...data: any[]) => void) or null                                 | null    | function that acts as logger for tree, mostly used for debugging                                      |
-
-## Selection
-
-## Async loading
-
-## Context menu
-
-## Custom classes
-
-## Drag and drop
-> [!NOTE]  
-> In memory drag and drop is not yet supported. Tree just dispatches `moved` event with dragged node(`node`), target node (`target`) and insertion type (`insertType`).
-> In future, this package will export function, that will allow you to easily compute new tree on frontend.
-
-
-## Keyboard navigation
-
-Enable keyboard navigation by setting `useKeyboardNavigation` to true.
-
-Use arrows to navigata tree. First you need to focus some node,
-you can use `focusNode` to do that. Use Enter or Space to select checkbox.
+# Svelte Treeview
+
+The most elaborate treeview for svelte on earth (or even in our galaxy).
+
+## Features
+
+- load new nodes when expanding
+- choose what object properties to use to get necessary information (id, path, ...)
+- enable checkboxes on whole tree or just per node
+- recursive seletion mode, where leafes can be selected
+- build-in support for search
+- drag and drop functionality controlable per node
+- context menu
+- keyboard navigation
+
+## Instalation
+
+install the package `@keenmate/svelte-treeview` using your favourite package manager.
+
+> [!warning]
+> **Font awesome is required for expand/collapse icons.**
+> If you wish to not use FA, you need to change all icons in classes properties
+
+## Minimal usage
+
+Tree and treeId are only mandatory attributes.
+Tree has to be list of nodes. Only mandatory property of node is nodePath.
+You can specify which keys to use for what properties by setting **props**.
+
+```svelte
+<script lang="ts">
+ import { TreeView } from '$lib/index.js';
+
+ let tree = [
+  { nodePath: 'animals', title: 'Animals', hasChildren: true },
+    //...
+  { nodePath: 'animals.insects.butterflies', title: 'Butterflies' }
+ ];
+</script>
+
+<TreeView {tree} treeId="my-tree" let:node>
+ {node.title}
+</TreeView>
+
+```
+
+For more examples see `src/routes/`
+
+> [!note]
+> Both **id** and **path** is required for tree to work.
+> By default tree uses nodePath property for both.
+> So if you change propery fro path, you need to also change id property.
+> You can change both using props attribute.
+
+## Properties
+
+| Name                   | Type                                                               | Default | Description                                                                                           |
+| ---------------------- | ------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------------------------- |
+| treeId                 | string                                                             |         | value used to generate ids of nodes                                                                   |
+| tree                   | array of nodes                                                     |         | represents tree strucuture                                                                            |
+| value                  | array of selected nodeIds                                          | []      |                                                                                                       |
+| verticalLines          | bool                                                               | false   | show vertical guide lines                                                                             |
+| readonly               | bool                                                               | false   | dont allow selection and drag and drop                                                                |
+| separator              | string                                                             | "."     |                                                                                                       |
+| recursiveSelection     | bool                                                               | false   | changes behavior of selection, see   [Selection](#selection)                                          |
+| selectionMode          | SelectionModes                                                     | none    | changes selection mode, see   [Selection](#selection)                                                 |
+| onlyLeafCheckboxes     | bool                                                               | false   | hides non leaf checkboxed, see   [Selection](#selection)                                              |
+| hideDisabledCheckboxes | bool                                                               | false   | hides checkboxes instead of disabling, see   [Selection](#selection)                                  |
+| loadChildrenAsync      | ExpandedCallback                                                   | null    | function that is called when node is expanded, see   [Async loading](#async-loading)                  |
+| showContextMenu        | bool                                                               | false   | On right click dispaly context menu defined in `context-menu` slot, see [Context menu](#context-menu) |
+| expansionThreshold      | number                                                             | 0       | Expand all nodes when there is less than number provided                                              |
+| customClasses          | Partial<CustomizableClasses>                                       | {}      | changes classes used on same elements, see [Custom classes](#custom-classes)                          |
+| filter                 | (node: Node) => boolean or null                                    | null    | function that is used for fitlering. It is called on every node                                       |
+| dragAndDrop            | bool                                                               | false   | enables drag and drop, see [Drag and drop](#drag-and-drop)                                            |
+| dropDisabledCallback   | (draggendNode: Node, targetNode: Node) => Promise<boolean> or null | null    | function called when draging over new node, see [Drag and drop](#drag-and-drop)                       |
+| useKeyboardNavigation  | bool                                                               | false   | enables keyboard navigation , see [Keyboard navigation](#keyboard-navigation)                         |
+| logger                 | ((...data: any[]) => void) or null                                 | null    | function that acts as logger for tree, mostly used for debugging                                      |
+
+## Selection
+
+## Async loading
+
+## Context menu
+
+## Custom classes
+
+## Drag and drop
+> [!NOTE]  
+> In memory drag and drop is not yet supported. Tree just dispatches `moved` event with dragged node(`node`), target node (`target`) and insertion type (`insertType`).
+> In future, this package will export function, that will allow you to easily compute new tree on frontend.
+
+
+## Keyboard navigation
+
+Enable keyboard navigation by setting `useKeyboardNavigation` to true.
+
+Use arrows to navigata tree. First you need to focus some node,
+you can use `focusNode` to do that. Use Enter or Space to select checkbox.

package/dist/Branch.svelte

@@ -1,35 +1,18 @@
-<script>import { createEventDispatcher } from 'svelte';
-import Checkbox from './Checkbox.svelte';
-import { SelectionModes, InsertionType } from './types.js';
-import { capturedKeys } from './constants.js';
-const dispatch = createEventDispatcher();
-export let tree;
-export let treeId;
-export let recursive = false;
-export let checkboxes = SelectionModes.none;
-export let onlyLeafCheckboxes;
-export let hideDisabledCheckboxes;
-export let dragAndDrop;
-export let verticalLines;
-export let readonly;
-export let expandTo;
-export let classes;
-export let helper;
-export let childDepth;
-export let branchRootNode;
-export let draggedNode;
-export let highlightedNode;
-export let insertionType;
-export let focusedNode;
-export let allowKeyboardNavigation;
-let liElements = {};
+<script lang="ts">import Branch from "./Branch.svelte";
+import Checkbox from "./Checkbox.svelte";
+import { InsertionType, SelectionModes } from "./types.js";
+import { capturedKeys } from "./constants.js";
+let { tree, treeId, recursive = false, checkboxes = SelectionModes.none, onlyLeafCheckboxes, hideDisabledCheckboxes, dragAndDrop, verticalLines, readonly, expandTo, classes, helper, childDepth, branchRootNode, draggedNode, highlightedNode, insertionType, focusedNode, allowKeyboardNavigation, onOpenCtxmenu = undefined, internal_onExpand = undefined, internal_onSelectionChanged = undefined, internal_onHandleDragStart = undefined, internal_onHandleDragDrop = undefined, internal_onHandleDragOver = undefined, internal_onHandleDragEnter = undefined, internal_onHandleDragEnd = undefined, internal_onHandleDragLeave = undefined, internal_onKeypress = undefined, children, nestHighlight } = $props();
+let liElements = $state({});
 const getNodeId = (node) => `${treeId}-${node.path}`;
-$: directChildren = helper.getDirectChildren(tree, branchRootNode?.path ?? null);
-$: if (focusedNode && liElements[getNodeId(focusedNode)]) {
-    liElements[getNodeId(focusedNode)].focus();
-}
+let directChildren = $derived(helper.getDirectChildren(tree, branchRootNode?.path ?? null));
+$effect(() => {
+    if (focusedNode && liElements[getNodeId(focusedNode)]) {
+        liElements[getNodeId(focusedNode)].focus();
+    }
+});
 function setExpansion(node, changeTo) {
-    dispatch('internal-expand', { node: node, changeTo });
+    internal_onExpand?.({ node: node, changeTo });
 }
 function isExpanded(node, depth, expandToDepth) {
     const nodeExpanded = node.expanded;
@@ -41,26 +24,31 @@ function isExpanded(node, depth, expandToDepth) {
 }
 //checkboxes
 function selectionChanged(node) {
-    dispatch('internal-selectionChanged', { node: node });
+    internal_onSelectionChanged?.({ node: node });
 }
 // drag and drop
 function handleDragStart(e, node) {
-    dispatch('internal-handleDragStart', { node: node, e: e });
+    internal_onHandleDragStart?.({ node: node, e: e });
 }
 function handleDragDrop(e, node, el) {
-    dispatch('internal-handleDragDrop', { node: node, event: e, element: el });
+    e.stopImmediatePropagation();
+    internal_onHandleDragDrop?.({ node: node, event: e, element: el });
 }
 function handleDragOver(e, node, el, nest) {
-    dispatch('internal-handleDragOver', { node: node, event: e, element: el, nest });
+    e.stopImmediatePropagation();
+    internal_onHandleDragOver?.({ node: node, event: e, element: el, nest });
 }
 function handleDragEnter(e, node, el) {
-    dispatch('internal-handleDragEnter', { node: node, event: e, element: el });
+    e.stopImmediatePropagation();
+    internal_onHandleDragEnter?.({ node: node, event: e, element: el });
 }
 function handleDragEnd(e, node) {
-    dispatch('internal-handleDragEnd', { node: node, event: e });
+    e.stopImmediatePropagation();
+    internal_onHandleDragEnd?.({ node: node, event: e });
 }
 function handleDragLeave(e, node, el) {
-    dispatch('internal-handleDragLeave', { node: node, event: e, element: el });
+    e.stopImmediatePropagation();
+    internal_onHandleDragLeave?.({ node: node, event: e, element: el });
 }
 function handleKeyPress(e, node) {
     if (!capturedKeys.includes(e.key)) {
@@ -68,148 +56,151 @@ function handleKeyPress(e, node) {
     }
     e.preventDefault();
     e.stopPropagation();
-    dispatch('internal-keypress', { event: e, node });
+    internal_onKeypress?.({ event: e, node });
 }
 function getHighlighMode(node, highlightedNode, insertionType) {
     // return InsertionType.insertAbove;
-    if (highlightedNode?.path !== node.path)
+    if (highlightedNode?.path !== node.path) {
         return InsertionType.none;
+    }
     return insertionType;
 }
-</script>
-
-<ul
-	class:show-lines={childDepth === 0 && verticalLines}
-	class:child-menu={childDepth > 0}
-	class={childDepth === 0 ? classes.treeClass : ''}
->
-	<!-- TODO fix accessibility -->
-	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-	{#each directChildren as node (getNodeId(node))}
-		{@const expanded = isExpanded(node, childDepth, expandTo)}
-		{@const draggable = !readonly && dragAndDrop && !node.dragDisabled}
-		{@const isCurrentlyDragged = draggedNode && node.path.startsWith(draggedNode?.path)}
-		{@const effectiveHighlight = getHighlighMode(node, highlightedNode, insertionType)}
-		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-		<li
-			class:is-child={helper.nodePathIsChild(node.path)}
-			class:has-children={node.hasChildren}
-			on:contextmenu|stopPropagation={(e) => {
-				dispatch('open-ctxmenu', { e, node });
-			}}
-			on:drop|stopPropagation={(e) => handleDragDrop(e, node, liElements[getNodeId(node)])}
-			on:dragover|stopPropagation={(e) =>
-				handleDragOver(e, node, liElements[getNodeId(node)], false)}
-			on:dragenter|stopPropagation={(e) => handleDragEnter(e, node, liElements[getNodeId(node)])}
-			on:dragleave|stopPropagation={(e) => handleDragLeave(e, node, liElements[getNodeId(node)])}
-			bind:this={liElements[getNodeId(node)]}
-			on:keydown={(e) => handleKeyPress(e, node)}
-			tabindex={allowKeyboardNavigation ? 1 : -1}
-		>
-			{#if effectiveHighlight == InsertionType.insertAbove}
-				<div class="insert-line-wrapper">
-					<div class="insert-line {classes.insertLineClass}" />
-				</div>
-			{/if}
-
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div
-				class="tree-item
-				{effectiveHighlight === InsertionType.nest ? classes.expandClass : ''}
-				{classes.nodeClass} {isCurrentlyDragged ? classes.currentlyDraggedClass : ''}"
-				class:div-has-children={node.hasChildren}
-				class:hover={effectiveHighlight !== InsertionType.none}
-				{draggable}
-				on:dragstart={(e) => handleDragStart(e, node)}
-				on:dragend={(e) => handleDragEnd(e, node)}
-			>
-				{#if node.hasChildren}
-					<button
-						class="expansion-button arrow"
-						on:click={() => setExpansion(node, !expanded)}
-						type="button"
-						tabindex="-1"
-					>
-						<i class="fixed-icon arrow {expanded ? classes.collapseIcon : classes.expandIcon}" />
-					</button>
-				{:else}
-					<span class="fixed-icon" />
-				{/if}
-
-				<Checkbox
-					{checkboxes}
-					{recursive}
-					{node}
-					{onlyLeafCheckboxes}
-					{hideDisabledCheckboxes}
-					{readonly}
-					on:select={({ detail: { node } }) => selectionChanged(node)}
-				/>
-				<span class:pointer-cursor={draggable}>
-					<slot node={node.originalNode} />
-				</span>
-
-				{#if dragAndDrop && node.nestAllowed}
-					<span
-						on:dragover|stopPropagation={(e) =>
-							handleDragOver(e, node, liElements[getNodeId(node)], true)}
-					>
-						<i class="fixed-icon {classes.nestIcon}" />
-
-						{#if effectiveHighlight === InsertionType.nest}
-							<slot name="nest-highlight" />
-						{/if}
-					</span>
-				{/if}
-			</div>
-			{#if expanded && node.hasChildren}
-				<svelte:self
-					branchRootNode={node}
-					childDepth={childDepth + 1}
-					{treeId}
-					{checkboxes}
-					{tree}
-					{recursive}
-					{helper}
-					{classes}
-					{readonly}
-					{onlyLeafCheckboxes}
-					{hideDisabledCheckboxes}
-					{expandTo}
-					{dragAndDrop}
-					{verticalLines}
-					{draggedNode}
-					{highlightedNode}
-					{insertionType}
-					{focusedNode}
-					{allowKeyboardNavigation}
-					on:open-ctxmenu
-					on:internal-expand
-					on:internal-selectionChanged
-					on:internal-handleDragStart
-					on:internal-handleDragDrop
-					on:internal-handleDragOver
-					on:internal-handleDragEnter
-					on:internal-handleDragEnd
-					on:internal-handleDragLeave
-					on:internal-keypress
-					let:node={nodeNested}
-				>
-					<slot node={nodeNested} />
-					<svelte:fragment slot="nest-highlight">
-						<slot name="nest-highlight" />
-					</svelte:fragment>
-				</svelte:self>
-			{/if}
-			{#if !expanded && node.hasChildren}
-				<ul class:child-menu={childDepth > 0} />
-			{/if}
-			<!-- Show line if insering -->
-			{#if effectiveHighlight === InsertionType.insertBelow}
-				<div class="insert-line-wrapper">
-					<div class="insert-line {classes.insertLineClass}" />
-				</div>
-			{/if}
-		</li>
-	{/each}
-</ul>
+function onContextMenu(ev, node) {
+    ev.stopImmediatePropagation();
+    onOpenCtxmenu({ ev, node });
+}
+</script>
+
+<ul
+	class:show-lines={childDepth === 0 && verticalLines}
+	class:child-menu={childDepth > 0}
+	class={childDepth === 0 ? classes.treeClass : ''}
+>
+	<!-- TODO fix accessibility -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	{#each directChildren as node (getNodeId(node))}
+		{@const expanded = isExpanded(node, childDepth, expandTo)}
+		{@const draggable = !readonly && dragAndDrop && !node.dragDisabled}
+		{@const isCurrentlyDragged = draggedNode && node.path.startsWith(draggedNode?.path)}
+		{@const effectiveHighlight = getHighlighMode(node, highlightedNode, insertionType)}
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+		<li
+			class:is-child={helper.nodePathIsChild(node.path)}
+			class:has-children={node.hasChildren}
+			oncontextmenu={e => onContextMenu(e, node)}
+			ondrop={e => handleDragDrop(e, node, liElements[getNodeId(node)])}
+			ondragover={e => handleDragOver(e, node, liElements[getNodeId(node)], false)}
+			ondragenter={e => handleDragEnter(e, node, liElements[getNodeId(node)])}
+			ondragleave={e => handleDragLeave(e, node, liElements[getNodeId(node)])}
+			bind:this={liElements[getNodeId(node)]}
+			onkeydown={(e) => handleKeyPress(e, node)}
+			tabindex={allowKeyboardNavigation ? 1 : -1}
+		>
+			{#if effectiveHighlight == InsertionType.insertAbove}
+				<div class="insert-line-wrapper">
+					<div class="insert-line {classes.insertLineClass}"></div>
+				</div>
+			{/if}
+
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="tree-item
+				{effectiveHighlight === InsertionType.nest ? classes.expandClass : ''}
+				{classes.nodeClass} {isCurrentlyDragged ? classes.currentlyDraggedClass : ''}"
+				class:div-has-children={node.hasChildren}
+				class:hover={effectiveHighlight !== InsertionType.none}
+				{draggable}
+				ondragstart={(e) => handleDragStart(e, node)}
+				ondragend={(e) => handleDragEnd(e, node)}
+			>
+				{#if node.hasChildren}
+					<button
+						class="expansion-button arrow"
+						onclick={() => setExpansion(node, !expanded)}
+						type="button"
+						tabindex="-1"
+					>
+						<i class="fixed-icon arrow {expanded ? classes.collapseIcon : classes.expandIcon}"></i>
+					</button>
+				{:else}
+					<span class="fixed-icon"></span>
+				{/if}
+
+				<Checkbox
+					{checkboxes}
+					{recursive}
+					{node}
+					{onlyLeafCheckboxes}
+					{hideDisabledCheckboxes}
+					{readonly}
+					on:select={({ detail: { node } }) => selectionChanged(node)}
+				/>
+				<span class:pointer-cursor={draggable}>
+					{@render children?.({node: node.originalNode,})}
+				</span>
+
+				{#if dragAndDrop && node.nestAllowed}
+					<span
+						ondragover={e => handleDragOver(e, node, liElements[getNodeId(node)], true)}
+					>
+						<i class="fixed-icon {classes.nestIcon}"></i>
+
+						{#if effectiveHighlight === InsertionType.nest}
+							{@render nestHighlight?.()}
+						{/if}
+					</span>
+				{/if}
+			</div>
+			{#if expanded && node.hasChildren}
+				<Branch
+					branchRootNode={node}
+					childDepth={childDepth + 1}
+					{treeId}
+					{checkboxes}
+					{tree}
+					{recursive}
+					{helper}
+					{classes}
+					{readonly}
+					{onlyLeafCheckboxes}
+					{hideDisabledCheckboxes}
+					{expandTo}
+					{dragAndDrop}
+					{verticalLines}
+					{draggedNode}
+					{highlightedNode}
+					{insertionType}
+					{focusedNode}
+					{allowKeyboardNavigation}
+					on:open-ctxmenu
+					on:internal-expand
+					on:internal-selectionChanged
+					on:internal-handleDragStart
+					on:internal-handleDragDrop
+					on:internal-handleDragOver
+					on:internal-handleDragEnter
+					on:internal-handleDragEnd
+					on:internal-handleDragLeave
+					on:internal-keypress
+					
+				>
+					{#snippet children({ node: nodeNested })}
+										{@render children?.({node: nodeNested,})}
+						<!--<svelte:fragment slot="nest-highlight">-->
+						<!--	<slot name="nest-highlight" />-->
+						<!--</svelte:fragment>-->
+														{/snippet}
+								</Branch>
+			{/if}
+			{#if !expanded && node.hasChildren}
+				<ul class:child-menu={childDepth > 0}></ul>
+			{/if}
+			<!-- Show line if insering -->
+			{#if effectiveHighlight === InsertionType.insertBelow}
+				<div class="insert-line-wrapper">
+					<div class="insert-line {classes.insertLineClass}"></div>
+				</div>
+			{/if}
+		</li>
+	{/each}
+</ul>

package/dist/Branch.svelte.d.ts

@@ -1,52 +1,4 @@
-import { SvelteComponent } from "svelte";
-import { SelectionModes, InsertionType, type Node, type CustomizableClasses } from './types.js';
-import type { TreeHelper } from './helpers/tree-helper.js';
-declare const __propDef: {
-    props: {
-        tree: Node[];
-        treeId: string;
-        recursive?: boolean | undefined;
-        checkboxes?: SelectionModes | undefined;
-        onlyLeafCheckboxes: boolean;
-        hideDisabledCheckboxes: boolean;
-        dragAndDrop: boolean;
-        verticalLines: boolean;
-        readonly: boolean;
-        expandTo: number;
-        classes: CustomizableClasses;
-        helper: TreeHelper;
-        childDepth: number;
-        branchRootNode: Node | null;
-        draggedNode: Node | null;
-        highlightedNode: Node | null;
-        insertionType: InsertionType;
-        focusedNode: Node | null;
-        allowKeyboardNavigation: boolean;
-    };
-    events: {
-        'open-ctxmenu': CustomEvent<any>;
-        'internal-expand': CustomEvent<any>;
-        'internal-selectionChanged': CustomEvent<any>;
-        'internal-handleDragStart': CustomEvent<any>;
-        'internal-handleDragDrop': CustomEvent<any>;
-        'internal-handleDragOver': CustomEvent<any>;
-        'internal-handleDragEnter': CustomEvent<any>;
-        'internal-handleDragEnd': CustomEvent<any>;
-        'internal-handleDragLeave': CustomEvent<any>;
-        'internal-keypress': CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            node: any;
-        };
-        'nest-highlight': {};
-    };
-};
-export type BranchProps = typeof __propDef.props;
-export type BranchEvents = typeof __propDef.events;
-export type BranchSlots = typeof __propDef.slots;
-export default class Branch extends SvelteComponent<BranchProps, BranchEvents, BranchSlots> {
-}
-export {};
+import Branch from "./Branch.svelte";
+declare const Branch: any;
+type Branch = InstanceType<typeof Branch>;
+export default Branch;