feat(treeview): make node slottable

Closes #1660
carbon-design-system · Nov 11, 2023 · c6c7569 · c6c7569
1 parent 417102d
commit c6c7569
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 12 deletions.
diff --git a/src/TreeView/TreeView.svelte b/src/TreeView/TreeView.svelte
@@ -2,6 +2,7 @@
   /**
    * @typedef {string | number} TreeNodeId
    * @typedef {{ id: TreeNodeId; text: any; icon?: typeof import("svelte").SvelteComponent<any>; disabled?: boolean; children?: TreeNode[]; }} TreeNode
+   * @slot {{ node: { id: TreeNodeId; text: string; expanded: boolean, leaf: boolean; disabled: boolean; selected: boolean; } }}
    * @event {TreeNode & { expanded: boolean; leaf: boolean; }} select
    * @event {TreeNode & { expanded: boolean; leaf: boolean; }} toggle
    * @event {TreeNode & { expanded: boolean; leaf: boolean; }} focus
@@ -202,5 +203,9 @@
   on:keydown
   on:keydown|stopPropagation="{handleKeyDown}"
 >
-  <TreeViewNodeList root children="{children}" />
+  <TreeViewNodeList root children="{children}" let:node>
+    <slot node="{node}">
+      {node.text}
+    </slot>
+  </TreeViewNodeList>
 </ul>
diff --git a/src/TreeView/TreeViewNode.svelte b/src/TreeView/TreeViewNode.svelte
@@ -34,6 +34,7 @@
 <script>
   /**
    * @typedef {string | number} TreeNodeId
+   * @slot {{ node: { id: TreeNodeId; text: string; expanded: false, leaf: boolean; disabled: boolean; selected: boolean; } }}
    */
 
   export let leaf = false;
@@ -68,7 +69,16 @@
     prevActiveId = $activeNodeId;
   });
 
-  $: node = { id, text, expanded: false, leaf };
+  $: selected = $selectedNodeIds.includes(id);
+  $: node = {
+    id,
+    text,
+    // A node cannot be expanded.
+    expanded: false,
+    leaf,
+    disabled,
+    selected,
+  };
   $: if (refLabel) {
     refLabel.style.marginLeft = `-${offset()}rem`;
     refLabel.style.paddingLeft = `${offset()}rem`;
@@ -82,12 +92,12 @@
   id="{id}"
   tabindex="{disabled ? undefined : -1}"
   aria-current="{id === $activeNodeId || undefined}"
-  aria-selected="{disabled ? undefined : $selectedNodeIds.includes(id)}"
+  aria-selected="{disabled ? undefined : selected}"
   aria-disabled="{disabled}"
   class:bx--tree-node="{true}"
   class:bx--tree-leaf-node="{true}"
   class:bx--tree-node--active="{id === $activeNodeId}"
-  class:bx--tree-node--selected="{$selectedNodeIds.includes(id)}"
+  class:bx--tree-node--selected="{selected}"
   class:bx--tree-node--disabled="{disabled}"
   class:bx--tree-node--with-icon="{icon}"
   on:click|stopPropagation="{() => {
@@ -116,6 +126,8 @@
 >
   <div bind:this="{refLabel}" class:bx--tree-node__label="{true}">
     <svelte:component this="{icon}" class="bx--tree-node__icon" />
-    {text}
+    <slot node="{node}">
+      {text}
+    </slot>
   </div>
 </li>
diff --git a/src/TreeView/TreeViewNodeList.svelte b/src/TreeView/TreeViewNodeList.svelte
@@ -2,6 +2,7 @@
   /**
    * @typedef {string | number} TreeNodeId
    * @typedef {{ id: TreeNodeId; text: string; disabled?: boolean; expanded?: boolean; }} TreeNode
+   * @slot {{ node: { id: TreeNodeId; text: string; expanded: boolean, leaf: boolean; disabled: boolean; selected: boolean; } }}
    */
 
   /** @type {Array<TreeNode & { children?: TreeNode[] }>} */
@@ -66,25 +67,30 @@
 {#if root}
   {#each children as child (child.id)}
     {#if Array.isArray(child.children)}
-      <svelte:self {...child} />
+      <svelte:self {...child} let:node>
+        <slot node="{node}" />
+      </svelte:self>
     {:else}
-      <TreeViewNode leaf {...child} />
+      <TreeViewNode leaf {...child} let:node>
+        <slot node="{node}" />
+      </TreeViewNode>
     {/if}
   {/each}
 {:else}
+  {@const selected = $selectedNodeIds.includes(id)}
   <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <li
     bind:this="{ref}"
     role="treeitem"
     id="{id}"
     tabindex="{disabled ? undefined : -1}"
     aria-current="{id === $activeNodeId || undefined}"
-    aria-selected="{disabled ? undefined : $selectedNodeIds.includes(id)}"
+    aria-selected="{disabled ? undefined : selected}"
     aria-disabled="{disabled}"
     class:bx--tree-node="{true}"
     class:bx--tree-parent-node="{true}"
     class:bx--tree-node--active="{id === $activeNodeId}"
-    class:bx--tree-node--selected="{$selectedNodeIds.includes(id)}"
+    class:bx--tree-node--selected="{selected}"
     class:bx--tree-node--disabled="{disabled}"
     class:bx--tree-node--with-icon="{icon}"
     aria-expanded="{expanded}"
@@ -151,16 +157,20 @@
       </span>
       <span class:bx--tree-node__label__details="{true}">
         <svelte:component this="{icon}" class="bx--tree-node__icon" />
-        {text}
+        <slot node="{{ ...node, selected, disabled }}" />
       </span>
     </div>
     {#if expanded}
       <ul role="group" class:bx--tree-node__children="{true}">
         {#each children as child (child.id)}
           {#if Array.isArray(child.children)}
-            <svelte:self {...child} />
+            <svelte:self {...child} let:node>
+              <slot node="{node}" />
+            </svelte:self>
           {:else}
-            <TreeViewNode leaf {...child} />
+            <TreeViewNode leaf {...child} let:node>
+              <slot node="{node}">{node.text}</slot>
+            </TreeViewNode>
           {/if}
         {/each}
       </ul>