From 9590658150da182eda75b888ce35af9e0fbce9a6 Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Mon, 5 Jul 2021 05:08:55 -0700
Subject: [PATCH] fix(tree-view): select initial active node, correct typedefs

---
 src/TreeView/TreeView.svelte         | 12 ++++++------
 src/TreeView/TreeViewNode.svelte     | 21 +++++++++++++++++----
 src/TreeView/TreeViewNodeList.svelte | 20 +++++++++++++++-----
 3 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/TreeView/TreeView.svelte b/src/TreeView/TreeView.svelte
index 1f47bf29..c0d0dbfb 100644
--- a/src/TreeView/TreeView.svelte
+++ b/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}"
 >
diff --git a/src/TreeView/TreeViewNode.svelte b/src/TreeView/TreeViewNode.svelte
index f8b7f303..038d2e52 100644
--- a/src/TreeView/TreeViewNode.svelte
+++ b/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`;
diff --git a/src/TreeView/TreeViewNodeList.svelte b/src/TreeView/TreeViewNodeList.svelte
index 52c62b83..ee2479a9 100644
--- a/src/TreeView/TreeViewNodeList.svelte
+++ b/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) {