Programmatically expand/collapse TreeView nodes (#850)

* feat(tree-view): add accessors to programmatically expand/collapse nodes

* feat(tree-view): update docs/types

* test(tree-view): test updated TreeView accessors

* docs(tree-view): document TreeView accessors

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

@@ -0,0 +1,63 @@
+<script>
+  import { TreeView, Button } from "carbon-components-svelte";
+
+  let treeview = null;
+  let expandedIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+  let children = [
+    { id: 0, text: "AI / Machine learning" },
+    {
+      id: 1,
+      text: "Analytics",
+      children: [
+        {
+          id: 2,
+          text: "IBM Analytics Engine",
+          children: [
+            { id: 3, text: "Apache Spark" },
+            { 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" }],
+    },
+    {
+      id: 9,
+      text: "Databases",
+      children: [
+        { id: 10, text: "IBM Cloud Databases for Elasticsearch" },
+        { id: 11, text: "IBM Cloud Databases for Enterprise DB" },
+        { id: 12, text: "IBM Cloud Databases for MongoDB" },
+        { id: 13, text: "IBM Cloud Databases for PostgreSQL" },
+      ],
+    },
+    {
+      id: 14,
+      text: "Integration",
+      disabled: true,
+      children: [{ id: 15, text: "IBM API Connect", disabled: true }],
+    },
+  ];
+</script>
+
+<div>
+  <Button on:click="{treeview?.collapseAll}">Collapse all</Button>
+</div>
+
+<TreeView
+  bind:this="{treeview}"
+  bind:expandedIds
+  labelText="Cloud Products"
+  children="{children}"
+/>
+
+<style>
+  div {
+    margin-bottom: var(--cds-spacing-05);
+  }
+</style>