feat(tree-view): add expandedIds #750 (#751)

src/TreeView/TreeView.svelte

@@ -26,6 +26,12 @@
    */
   export let selectedIds = [];
 
+  /**
+   * Set the node ids to be expanded
+   * @type {TreeNodeId[]}
+   */
+  export let expandedIds = [];
+
   /**
    * Specify the TreeView size
    * @type {"default" | "compact"}
@@ -46,6 +52,7 @@
   const labelId = `label-${Math.random().toString(36)}`;
   const activeNodeId = writable(activeId);
   const selectedNodeIds = writable(selectedIds);
+  const expandedNodeIds = writable(expandedIds);
 
   let ref = null;
   let treeWalker = null;
@@ -53,6 +60,7 @@
   setContext("TreeView", {
     activeNodeId,
     selectedNodeIds,
+    expandedNodeIds,
     clickNode: (node) => {
       activeId = node.id;
       selectedIds = [node.id];
@@ -61,6 +69,13 @@
     selectNode: (node) => {
       selectedIds = [node.id];
     },
+    expandNode: (node, expanded) => {
+      if (expanded) {
+        expandedIds = [...expandedIds, node.id];
+      } else {
+        expandedIds = expandedIds.filter((_id) => _id !== node.id);
+      }
+    },
     focusNode: (node) => dispatch("focus", node),
     toggleNode: (node) => dispatch("toggle", node),
   });
@@ -92,6 +107,7 @@
 
   $: activeNodeId.set(activeId);
   $: selectedNodeIds.set(selectedIds);
+  $: expandedNodeIds.set(expandedIds);
   $: if (ref) {
     treeWalker = document.createTreeWalker(ref, NodeFilter.SHOW_ELEMENT, {
       acceptNode: (node) => {

src/TreeView/TreeViewNodeList.svelte

@@ -31,8 +31,10 @@
   const {
     activeNodeId,
     selectedNodeIds,
+    expandedNodeIds,
     clickNode,
     selectNode,
+    expandNode,
     focusNode,
     toggleNode,
   } = getContext("TreeView");
@@ -59,6 +61,7 @@
     refLabel.style.marginLeft = `-${offset()}rem`;
     refLabel.style.paddingLeft = `${offset()}rem`;
   }
+  $: expanded = $expandedNodeIds.includes(id);
 </script>
 
 {#if root}
@@ -100,6 +103,7 @@
 
       if (parent && e.key === 'ArrowLeft') {
         expanded = false;
+        expandNode(node, false);
         toggleNode(node);
       }
 
@@ -108,6 +112,7 @@
           ref.lastChild.firstChild.focus();
         } else {
           expanded = true;
+          expandNode(node, true);
           toggleNode(node);
         }
       }
@@ -118,6 +123,7 @@
         expanded = !expanded;
         toggleNode(node);
         clickNode(node);
+        expandNode(node, expanded);
         ref.focus();
       }
     }}"
@@ -132,6 +138,7 @@
         on:click="{() => {
           if (disabled) return;
           expanded = !expanded;
+          expandNode(node, expanded);
           toggleNode(node);
         }}"
       >