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

package/dist/TreeView.svelte

@@ -114,7 +114,7 @@ export let dropDisabledCallback = null;
 /**
  * If true, keyboard navigation will be enabled. Use arrow keys to navigate and space to select node.
  */
-export let useKeyboardNavigation = false;
+export let allowKeyboardNavigation = false;
 let ctxMenu;
 let expandedIds = [];
 let draggedNode = null;
@@ -173,6 +173,14 @@ export function focusNode(nodePath) {
     const node = helper.findNode(computedTree, nodePath);
     focusedNode = node;
 }
+export function focusFirstNode() {
+    const rootChildren = helper.getDirectChildren(computedTree, null);
+    if (rootChildren.length === 0) {
+        focusedNode = null;
+        return;
+    }
+    focusedNode = rootChildren[0];
+}
 function computeTree(helper, selectionProvider, userProvidedTree, filter, props, expandedIds, value) {
     if (!Array.isArray(userProvidedTree) || !Array.isArray(value)) {
         console.error('value and tree must be arrays!!');
@@ -314,7 +322,7 @@ function onDragLeave({ detail: { node, event, element } }) {
 }
 function onKeyPress(detail) {
     const { event, node: targetNode } = detail;
-    if (!useKeyboardNavigation) {
+    if (!allowKeyboardNavigation) {
         return;
     }
     const movement = parseMovementDirection(event.key);
@@ -324,6 +332,7 @@ function onKeyPress(detail) {
         if (setExpansion !== null) {
             onExpand({ node: node, changeTo: setExpansion });
         }
+        dispatch('focus', node);
     }
     if (event.key === 'Enter' || event.key === ' ') {
         onSelectionChanged({ node: targetNode });
@@ -356,7 +365,7 @@ function debugLog(...data) {
 	{highlightedNode}
 	{draggedNode}
 	{focusedNode}
-	{useKeyboardNavigation}
+	{allowKeyboardNavigation}
 	on:internal-handleDragStart={onDragStart}
 	on:internal-handleDragDrop={onDragDrop}
 	on:internal-handleDragOver={onDragOver}

package/dist/TreeView.svelte.d.ts

@@ -81,12 +81,13 @@ declare const __propDef: {
              */ dropDisabledCallback?: DragEnterCallback | null | undefined;
         /**
              * If true, keyboard navigation will be enabled. Use arrow keys to navigate and space to select node.
-             */ useKeyboardNavigation?: boolean | undefined;
+             */ allowKeyboardNavigation?: boolean | undefined;
         changeAllExpansion?: ((changeTo: boolean) => void) | undefined;
         expandToNode?: ((nodePath: string) => void) | undefined;
         setNodeExpansion?: ((nodePath: string, changeTo: boolean) => void) | undefined;
         setExpansions?: ((expansions: NodeId[]) => void) | undefined;
         focusNode?: ((nodePath: string | null) => void) | undefined;
+        focusFirstNode?: (() => void) | undefined;
     };
     events: {
         expansion: CustomEvent<any>;
@@ -97,6 +98,7 @@ declare const __propDef: {
         selected: CustomEvent<any>;
         unselected: CustomEvent<any>;
         moved: CustomEvent<any>;
+        focus: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
@@ -119,5 +121,6 @@ export default class TreeView extends SvelteComponent<TreeViewProps, TreeViewEve
     get setNodeExpansion(): (nodePath: string, changeTo: boolean) => void;
     get setExpansions(): (expansions: NodeId[]) => void;
     get focusNode(): (nodePath: string | null) => void;
+    get focusFirstNode(): () => void;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/svelte-treeview",
-	"version": "1.1.0-beta.0",
+	"version": "1.1.0-beta.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",