fix(tree-view): select initial active node, correct typedefs

src/TreeView/TreeView.svelte

@@ -3,7 +3,7 @@
 
   /**
    * @typedef {string | number} TreeNodeId
-   * @typedef {{ id: TreeNodeId; text: string; disabled?: boolean; }} TreeNode
+   * @typedef {{ id: TreeNodeId; text: string; icon?: typeof import("carbon-icons-svelte").CarbonIcon; disabled?: boolean; expanded?: boolean; }} TreeNode
    * @event {TreeNode & { expanded: boolean; leaf: boolean; }} select
    * @event {TreeNode & { expanded: boolean; leaf: boolean; }} toggle
    * @event {TreeNode & { expanded: boolean; leaf: boolean; }} focus
@@ -22,9 +22,6 @@
    */
   export let activeId = "";
 
-  /** Set to `true` to allow multiple selected nodes */
-  export let multiselect = false;
-
   /**
    * Set the node ids to be selected
    * @type {TreeNodeIds}
@@ -63,6 +60,9 @@
       selectedIds = [node.id];
       dispatch("select", node);
     },
+    selectNode: (node) => {
+      selectedIds = [node.id];
+    },
     focusNode: (node) => dispatch("focus", node),
     toggleNode: (node) => dispatch("toggle", node),
   });
@@ -77,7 +77,7 @@
     if (e.key === "ArrowUp") node = treeWalker.previousNode();
     if (e.key === "ArrowDown") node = treeWalker.nextNode();
     if (node && node !== e.target) {
-      node.tabindex = "0";
+      node.tabIndex = "0";
       node.focus();
     }
   }
@@ -112,7 +112,7 @@
   class:bx--tree--compact="{size === 'compact'}"
   aria-label="{hideLabel ? labelText : undefined}"
   aria-labelledby="{!hideLabel ? labelId : undefined}"
-  aria-multiselectable="{multiselect || undefined}"
+  aria-multiselectable="{selectedIds.length > 1 || undefined}"
   on:keydown
   on:keydown|stopPropagation="{handleKeyDown}"
 >

src/TreeView/TreeViewNode.svelte

@@ -49,17 +49,30 @@
    */
   export let icon = undefined;
 
-  import { getContext } from "svelte";
+  import { afterUpdate, getContext } from "svelte";
 
   let ref = null;
   let refLabel = null;
+  let prevActiveId = undefined;
 
-  const { clickNode, focusNode, activeNodeId, selectedNodeIds } = getContext(
-    "TreeView"
-  );
+  const {
+    activeNodeId,
+    selectedNodeIds,
+    clickNode,
+    selectNode,
+    focusNode,
+  } = getContext("TreeView");
   const offset = () =>
     computeTreeLeafDepth(refLabel) + (leaf && icon ? 2 : 2.5);
 
+  afterUpdate(() => {
+    if (id === $activeNodeId && prevActiveId !== $activeNodeId) {
+      if (!$selectedNodeIds.includes(id)) selectNode(node);
+    }
+
+    prevActiveId = $activeNodeId;
+  });
+
   $: node = { id, text, expanded: false, leaf };
   $: if (refLabel) {
     refLabel.style.marginLeft = `-${offset()}rem`;

src/TreeView/TreeViewNodeList.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * @typedef {string | number} TreeNodeId
-   * @typedef {{ id: TreeNodeId; text: string; disabled?: boolean; }} TreeNode
+   * @typedef {{ id: TreeNodeId; text: string; disabled?: boolean; expanded?: boolean; }} TreeNode
    */
 
   /** @type {TreeNode & { children?: TreeNode[] }} */
@@ -20,19 +20,21 @@
    */
   export let icon = undefined;
 
-  import { getContext } from "svelte";
+  import { afterUpdate, getContext } from "svelte";
   import CaretDown16 from "carbon-icons-svelte/lib/CaretDown16/CaretDown16.svelte";
   import TreeViewNode, { computeTreeLeafDepth } from "./TreeViewNode.svelte";
 
   let ref = null;
   let refLabel = null;
+  let prevActiveId = undefined;
 
   const {
-    clickNode,
-    focusNode,
-    toggleNode,
     activeNodeId,
     selectedNodeIds,
+    clickNode,
+    selectNode,
+    focusNode,
+    toggleNode,
   } = getContext("TreeView");
 
   const offset = () => {
@@ -43,6 +45,14 @@
     return depth + 2.5;
   };
 
+  afterUpdate(() => {
+    if (id === $activeNodeId && prevActiveId !== $activeNodeId) {
+      if (!$selectedNodeIds.includes(id)) selectNode(node);
+    }
+
+    prevActiveId = $activeNodeId;
+  });
+
   $: parent = Array.isArray(children);
   $: node = { id, text, expanded, leaf: !parent };
   $: if (refLabel) {