feat(tree-view): add showNode accessor (#1844)

Closes #1377

docs/src/COMPONENT_API.json

@@ -14664,6 +14664,18 @@
           "isRequired": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "showNode",
+          "kind": "function",
+          "description": "Programmatically show a node by `id`.\nThe matching node will be expanded, selected, and focused",
+          "type": "(id: TreeNodeId) => void",
+          "value": "() => {     for (const child of children) {       const nodes = findNodeById(child, id);        if (nodes) {         const ids = nodes.map((node) => node.id);         const nodeIds = new Set(ids);          expandNodes((node) => nodeIds.has(node.id));          const lastId = ids[ids.length - 1];          activeId = lastId;         selectedIds = [lastId];          tick().then(() => {           ref?.querySelector(`[id=\"${lastId}\"]`)?.focus();         });          // Break out of the loop if the node is found.         break;       }     }   }",
+          "isFunction": true,
+          "isFunctionDeclaration": true,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "moduleExports": [],

docs/src/pages/components/TreeView.svx

@@ -92,4 +92,12 @@ Use the `TreeView.collapseNodes` method to collapse a subset of nodes.
 
 If no argument is provided, all nodes will be collapsed.
 
-<FileSource src="/framed/TreeView/TreeViewCollapseNodes" />
+<FileSource src="/framed/TreeView/TreeViewCollapseNodes" />
+
+## Show a specific node
+
+Use the `TreeView.showNode` method to show a specific node.
+
+If a matching node is found, it will be expanded, selected, and focused.
+
+<FileSource src="/framed/TreeView/TreeViewShowNode" />

docs/src/pages/framed/TreeView/TreeViewShowNode.svelte

@@ -0,0 +1,49 @@
+<script>
+  import { Button, ButtonSet, TreeView } from "carbon-components-svelte";
+
+  const nodeSpark = { id: 3, text: "Apache Spark" };
+  const nodeBlockchain = { id: 8, text: "IBM Blockchain Platform" };
+
+  let treeview = null;
+  let children = [
+    { id: 0, text: "AI / Machine learning" },
+    {
+      id: 1,
+      text: "Analytics",
+      children: [
+        {
+          id: 2,
+          text: "IBM Analytics Engine",
+          children: [nodeSpark, { id: 4, text: "Hadoop" }],
+        },
+        { id: 5, text: "IBM Cloud SQL Query" },
+        { id: 6, text: "IBM Db2 Warehouse on Cloud" },
+      ],
+    },
+    {
+      id: 7,
+      text: "Blockchain",
+      children: [{ id: 8, text: "IBM Blockchain Platform" }],
+    },
+  ];
+</script>
+
+<ButtonSet style="margin-bottom: var(--cds-spacing-05)">
+  {#each [nodeSpark, nodeBlockchain] as { id, text }}
+    <Button
+      on:click="{() => {
+        treeview?.showNode(id);
+      }}"
+    >
+      Show "{text}"
+    </Button>
+  {/each}
+  <Button kind="tertiary" on:click="{treeview.collapseAll}">Collapse all</Button
+  >
+</ButtonSet>
+
+<TreeView
+  bind:this="{treeview}"
+  labelText="Cloud Products"
+  children="{children}"
+/>