openproject-primer_view_components 0.85.0 → 0.86.0

data/app/components/primer/open_project/filterable_tree_view.ts

@@ -2,7 +2,8 @@ import {controller, target} from '@github/catalyst'
 import {SegmentedControlElement} from '../alpha/segmented_control'
 import {TreeViewElement} from '../alpha/tree_view/tree_view'
 import {TreeViewSubTreeNodeElement} from '../alpha/tree_view/tree_view_sub_tree_node_element'
-import {TreeViewNodeInfo} from '../shared_events'
+// eslint-disable-next-line import/named
+import {TreeViewCheckedValue, TreeViewNodeInfo} from '../shared_events'
 
 // This function is expected to return the following values:
 // 1. No match - return null
@@ -15,6 +16,8 @@ type NodeState = {
   disabled: boolean
 }
 
+const ASYNC_DEBOUNCE_MS = 300
+
 @controller
 export class FilterableTreeViewElement extends HTMLElement {
   @target filterInput: HTMLInputElement
@@ -27,15 +30,43 @@ export class FilterableTreeViewElement extends HTMLElement {
   #abortController: AbortController
   #stateMap: Map<TreeViewSubTreeNodeElement, Map<HTMLElement, NodeState>> = new Map()
 
+  // Async mode state
+  #debounceTimer: ReturnType<typeof setTimeout> | null = null
+  #fetchAbortController: AbortController | null = null
+  // nodeId → wasExpanded: taken once before the first filter query is entered, cleared when filter is removed
+  #expansionSnapshot: Map<string, boolean> | null = null
+  // nodeId → wasExpanded: taken before entering "selected" mode, cleared when leaving it
+  #selectedModeSnapshot: Map<string, boolean> | null = null
+  // nodeId → checkedValue: persists across tree replacements, updated on every treeViewNodeChecked event
+  #checkedNodeIds: Map<string, TreeViewCheckedValue> = new Map()
+  // nodeId → form payload: mirrors #checkedNodeIds but stores the data needed to synthesise a hidden
+  // form input for nodes that are checked but not currently in the DOM (e.g. filtered out).
+  #checkedNodeFormPayloads: Map<string, {path: string[]; value?: string}> = new Map()
+  #isFiltered = false
+
   connectedCallback() {
     const {signal} = (this.#abortController = new AbortController())
     this.addEventListener('treeViewNodeChecked', this, {signal})
     this.addEventListener('itemActivated', this, {signal})
     this.addEventListener('input', this, {signal})
+
+    if (this.#isAsyncMode) {
+      void this.#fetchAndReplaceTree()
+    }
   }
 
   disconnectedCallback() {
     this.#abortController.abort()
+    this.#fetchAbortController?.abort()
+    if (this.#debounceTimer !== null) clearTimeout(this.#debounceTimer)
+  }
+
+  get #src(): string | null {
+    return this.getAttribute('src')
+  }
+
+  get #isAsyncMode(): boolean {
+    return !!this.#src
   }
 
   handleEvent(event: Event) {
@@ -57,11 +88,48 @@ export class FilterableTreeViewElement extends HTMLElement {
     // when calling this.treeView.setNodeCheckedValue.
     switch (origEvent.type) {
       case 'treeViewNodeChecked':
+        // Always track checked node IDs before delegating, so async replacements can restore selection.
+        this.#updateCheckedNodeIds(event)
         this.#handleTreeViewNodeChecked(event)
         break
     }
   }
 
+  // Keeps #checkedNodeIds and #checkedNodeFormPayloads in sync with every user-triggered check event
+  // so we can restore selection and synthesise form inputs after async tree replacements, even for
+  // nodes that are no longer visible (e.g. filtered out by the server).
+  #updateCheckedNodeIds(event: CustomEvent<TreeViewNodeInfo[]>) {
+    if (!this.#isAsyncMode) return
+
+    for (const nodeInfo of event.detail) {
+      const node = nodeInfo.node as HTMLElement
+      const nodeId = node.getAttribute('data-node-id')
+      if (nodeId) {
+        if (nodeInfo.checkedValue === 'false') {
+          this.#checkedNodeIds.delete(nodeId)
+          this.#checkedNodeFormPayloads.delete(nodeId)
+        } else {
+          // In single-select mode, TreeView clears the previous selection internally
+          // (via checkOnlyAtPath) but the treeViewNodeChecked event only contains the
+          // newly selected node. Clear our tracked state so #restoreSelectionState does
+          // not re-check previously selected nodes after a tree replacement.
+          if (node.getAttribute('data-select-variant') === 'single') {
+            this.#checkedNodeIds.clear()
+            this.#checkedNodeFormPayloads.clear()
+          }
+
+          this.#checkedNodeIds.set(nodeId, nodeInfo.checkedValue)
+          const payload: {path: string[]; value?: string} = {path: nodeInfo.path}
+          const dataValue = node.getAttribute('data-value')
+          if (dataValue) payload.value = dataValue
+          this.#checkedNodeFormPayloads.set(nodeId, payload)
+        }
+      }
+    }
+
+    this.#updateRetainedSelections()
+  }
+
   #handleTreeViewNodeChecked(event: CustomEvent<TreeViewNodeInfo[]>) {
     if (!this.treeView) return
     if (!this.includeSubItemsCheckBox.checked) return
@@ -118,20 +186,56 @@ export class FilterableTreeViewElement extends HTMLElement {
   #handleFilterModeEvent(event: Event) {
     if (event.type !== 'itemActivated') return
 
-    this.#applyFilterOptions()
+    if (this.#isAsyncMode) {
+      if (this.filterMode === 'selected') {
+        // "selected" mode is client-side: snapshot expansion state before the filter collapses nodes,
+        // then apply client-side filter without a server round-trip.
+        this.#selectedModeSnapshot = this.#captureExpansionState()
+        this.#applyFilterOptions()
+      } else if (this.#selectedModeSnapshot !== null && this.queryString.length === 0) {
+        // Leaving "selected" mode with no active query: undo client-side filter and restore expansion
+        // state without a server round-trip (the full tree is already in the DOM).
+        this.#undoClientSideFilter()
+        this.#applyExpansionSnapshot(this.#selectedModeSnapshot)
+        this.#selectedModeSnapshot = null
+      } else {
+        // "all" mode with an active query, or switching away from a custom mode: use async fetch.
+        this.#selectedModeSnapshot = null
+        this.#scheduleAsyncFetch()
+      }
+    } else {
+      this.#applyFilterOptions()
+    }
+  }
+
+  // Removes `hidden` attributes added by the client-side filter from leaf list items and sub-tree nodes.
+  #undoClientSideFilter() {
+    for (const el of this.querySelectorAll<HTMLElement>('tree-view li[hidden], tree-view-sub-tree-node[hidden]')) {
+      el.removeAttribute('hidden')
+    }
   }
 
   #handleFilterInputEvent(event: Event) {
     if (event.type !== 'input') return
 
-    this.#applyFilterOptions()
+    // "selected" mode is always client-side – the server doesn't know the selection state.
+    if (this.#isAsyncMode && this.filterMode !== 'selected') {
+      this.#scheduleAsyncFetch()
+    } else {
+      this.#applyFilterOptions()
+    }
   }
 
   #handleIncludeSubItemsCheckBoxEvent(event: Event) {
     if (!this.treeView) return
     if (event.type !== 'input') return
 
-    this.#applyFilterOptions()
+    // In async mode, toggling include-sub-items does not require a server round-trip: the client
+    // handles the visual state entirely (checking/disabling visible descendants). The flag will be
+    // included automatically in the next filter request triggered by a query or filter-mode change.
+    if (!this.#isAsyncMode) {
+      this.#applyFilterOptions()
+    }
 
     if (this.includeSubItemsCheckBox.checked) {
       this.#includeSubItems()
@@ -185,6 +289,214 @@ export class FilterableTreeViewElement extends HTMLElement {
     }
   }
 
+  // ─── Async mode ────────────────────────────────────────────────────────────
+
+  #scheduleAsyncFetch() {
+    if (this.#debounceTimer !== null) clearTimeout(this.#debounceTimer)
+
+    this.#debounceTimer = setTimeout(() => {
+      this.#debounceTimer = null
+      void this.#fetchAndReplaceTree()
+    }, ASYNC_DEBOUNCE_MS)
+  }
+
+  async #fetchAndReplaceTree() {
+    const src = this.#src
+    if (!src) return
+
+    const query = this.queryString
+    const filterMode = this.filterMode || 'all'
+    const includeSubItems = this.includeSubItemsCheckBox?.checked ?? false
+
+    // Snapshot expansion state the first time the user enters a filter query
+    if (!this.#isFiltered && query.length > 0) {
+      this.#snapshotExpansionState()
+      this.#isFiltered = true
+    } else if (this.#isFiltered && query.length === 0) {
+      this.#isFiltered = false
+    }
+
+    // Remember which filter state this particular request was for so we apply
+    // the correct post-processing even if the user types quickly.
+    const requestWasFiltered = query.length > 0
+
+    // Abort any in-flight request
+    this.#fetchAbortController?.abort()
+    const {signal} = (this.#fetchAbortController = new AbortController())
+
+    const url = new URL(src, window.location.href)
+    url.searchParams.set('query', query)
+    url.searchParams.set('filter_mode', filterMode)
+    url.searchParams.set('include_sub_items', String(includeSubItems))
+
+    // Send currently-checked node IDs so the server can apply include-sub-items
+    // logic even for nodes that are no longer visible due to filtering / pagination.
+    for (const nodeId of this.#checkedNodeIds.keys()) {
+      url.searchParams.append('checked_ids[]', nodeId)
+    }
+
+    this.setAttribute('data-loading', '')
+    this.setAttribute('aria-busy', 'true')
+
+    try {
+      const response = await fetch(url.toString(), {
+        signal,
+        headers: {Accept: 'text/html'},
+        credentials: 'same-origin',
+        method: 'GET',
+      })
+      if (!response.ok) return
+
+      const html = await response.text()
+      const doc = new DOMParser().parseFromString(html, 'text/html')
+      const newTreeView = doc.querySelector('tree-view')
+      if (!newTreeView) return
+
+      const oldTreeView = this.treeViewList?.closest('tree-view')
+      if (!oldTreeView) return
+
+      // Invalidate old stateMap entries – the referenced DOM nodes no longer exist after replacement.
+      this.#stateMap.clear()
+
+      oldTreeView.replaceWith(newTreeView)
+      // Catalyst re-resolves @target treeViewList dynamically on next access.
+
+      // Restore checked state for all nodes that now appear in the new tree.
+      this.#restoreSelectionState()
+
+      // Re-apply include-sub-items visually if the checkbox is still checked.
+      if (includeSubItems) {
+        this.#includeSubItems()
+      }
+
+      if (requestWasFiltered) {
+        this.#expandAllSubTrees()
+        this.#applyAsyncHighlights(query)
+        const hasResults = !!this.treeViewList?.querySelector('[role=treeitem]')
+        this.noResultsMessage.toggleAttribute('hidden', hasResults)
+        this.treeViewList?.toggleAttribute('hidden', !hasResults)
+      } else {
+        this.#removeHighlights()
+        this.#restoreExpansionState()
+        this.noResultsMessage.setAttribute('hidden', 'hidden')
+        this.treeViewList?.removeAttribute('hidden')
+      }
+
+      // Synthesise form inputs for nodes that are checked but absent from the current DOM
+      // (e.g. filtered out). Must run after restoreSelectionState so we know what is in the DOM.
+      this.#updateRetainedSelections()
+    } catch (e) {
+      if ((e as Error).name === 'AbortError') return
+      throw e
+    } finally {
+      this.removeAttribute('data-loading')
+      this.setAttribute('aria-busy', 'false')
+    }
+  }
+
+  // Captures the current expanded/collapsed state of every sub-tree node as a nodeId → boolean map.
+  #captureExpansionState(): Map<string, boolean> {
+    const snapshot = new Map<string, boolean>()
+    for (const treeitem of this.querySelectorAll<HTMLElement>(
+      '[role=treeitem][data-node-id][data-node-type=sub-tree]',
+    )) {
+      snapshot.set(treeitem.getAttribute('data-node-id')!, treeitem.getAttribute('aria-expanded') === 'true')
+    }
+    return snapshot
+  }
+
+  // Applies a previously captured expansion snapshot to the current tree.
+  #applyExpansionSnapshot(snapshot: Map<string, boolean>) {
+    for (const [nodeId, wasExpanded] of snapshot) {
+      const treeitem = this.querySelector<HTMLElement>(`[role=treeitem][data-node-id="${CSS.escape(nodeId)}"]`)
+      const subTreeNode = treeitem?.closest('tree-view-sub-tree-node') as TreeViewSubTreeNodeElement | null
+      if (subTreeNode) {
+        if (wasExpanded) {
+          subTreeNode.expand()
+        } else {
+          subTreeNode.collapse()
+        }
+      }
+    }
+  }
+
+  // Saves the expanded/collapsed state of every sub-tree node before the first filter query is applied.
+  #snapshotExpansionState() {
+    this.#expansionSnapshot = this.#captureExpansionState()
+  }
+
+  // Restores the expansion state that was saved before filtering began, then discards the snapshot.
+  #restoreExpansionState() {
+    if (!this.#expansionSnapshot) return
+    this.#applyExpansionSnapshot(this.#expansionSnapshot)
+    this.#expansionSnapshot = null
+  }
+
+  // Re-applies checked values from #checkedNodeIds to every node that exists in the current tree.
+  #restoreSelectionState() {
+    if (!this.treeView) return
+
+    for (const treeitem of this.querySelectorAll<HTMLElement>('[role=treeitem][data-node-id]')) {
+      const nodeId = treeitem.getAttribute('data-node-id')!
+      const savedValue = this.#checkedNodeIds.get(nodeId)
+      if (savedValue !== undefined) {
+        this.treeView.setNodeCheckedValue(treeitem, savedValue)
+      }
+    }
+  }
+
+  // Expands every sub-tree node in the current tree – used after a filtered result is rendered so all
+  // matches and their ancestors are visible.
+  #expandAllSubTrees() {
+    for (const subTreeNode of this.querySelectorAll<TreeViewSubTreeNodeElement>('tree-view-sub-tree-node')) {
+      subTreeNode.expand()
+    }
+  }
+
+  // Applies highlights based on the current query string to whatever tree is in the DOM.  Unlike the
+  // client-side path, filtering is already done by the server, so we only need to produce highlights.
+  #applyAsyncHighlights(query: string) {
+    this.#removeHighlights()
+    const ranges: Range[] = []
+
+    for (const treeitem of this.querySelectorAll<HTMLElement>('[role=treeitem]')) {
+      const result = this.defaultFilterFn(treeitem, query, 'all')
+      if (result) ranges.push(...result)
+    }
+
+    if (ranges.length > 0) this.#applyHighlights(ranges)
+  }
+
+  // Maintains hidden form inputs (with the same name as the TreeView's own inputs) for nodes that are
+  // checked but currently absent from the DOM (e.g. filtered out by the server). These inputs live
+  // directly inside <filterable-tree-view> – outside <tree-view> – so they survive tree replacements.
+  // The server therefore receives a complete set of checked paths regardless of what is currently visible.
+  #updateRetainedSelections() {
+    // Only relevant when a form is wired up.
+    const prototype = this.treeView?.formInputPrototype
+    if (!prototype) return
+
+    // Remove previously injected retained inputs.
+    for (const el of this.querySelectorAll('[data-filterable-tree-view-retained]')) {
+      el.remove()
+    }
+
+    for (const [nodeId, payload] of this.#checkedNodeFormPayloads) {
+      // Nodes currently in the DOM are already covered by TreeView's updateHiddenFormInputs.
+      const inDom = !!this.querySelector(`[role=treeitem][data-node-id="${CSS.escape(nodeId)}"]`)
+      if (inDom) continue
+
+      const input = document.createElement('input')
+      input.type = 'hidden'
+      input.name = prototype.name
+      input.value = JSON.stringify(payload)
+      input.setAttribute('data-filterable-tree-view-retained', '')
+      this.appendChild(input)
+    }
+  }
+
+  // ─── End async mode ─────────────────────────────────────────────────────────
+
   set filterFn(newFn: FilterFn) {
     this.#filterFn = newFn
   }

data/app/components/primer/primer.pcss

@@ -56,3 +56,4 @@
 @import "./open_project/border_box/collapsible_header.pcss";
 @import "./open_project/collapsible_section.pcss";
 @import "./open_project/pagination.pcss";
+@import "./open_project/filterable_tree_view.pcss";

data/app/controllers/primer/view_components/filterable_tree_view_items_controller.rb

@@ -0,0 +1,192 @@
+# frozen_string_literal: true
+
+module Primer
+  module ViewComponents
+    # :nodoc:
+    # :nocov:
+    class FilterableTreeViewItemsController < ApplicationController
+      # A node in the demo tree. Leaf nodes have no children.
+      TreeNode = Data.define(:id, :label, :children, :all_descendant_ids) do
+        def leaf?
+          children.nil? || children.empty?
+        end
+
+        # Returns a filtered copy of this node. Leaf nodes are included if they match the query.
+        # Sub-tree nodes are included if they match OR any descendant matches. The all_descendant_ids
+        # field always reflects the ORIGINAL (unfiltered) descendant set, so clients can use it to
+        # determine which nodes to select when "include sub-items" is active on a filtered tree.
+        def filter(query)
+          return self if query.empty?
+
+          if leaf?
+            matches?(query) ? self : nil
+          else
+            filtered_children = children.filter_map { |child| child.filter(query) }
+            if matches?(query) || !filtered_children.empty?
+              self.class.new(
+                id: id,
+                label: label,
+                children: filtered_children,
+                all_descendant_ids: all_descendant_ids
+              )
+            end
+          end
+        end
+
+        private
+
+        def matches?(query)
+          label.downcase.include?(query.downcase)
+        end
+      end
+
+      # Build a leaf node
+      def self.leaf(id:, label:)
+        TreeNode.new(id: id, label: label, children: [], all_descendant_ids: [])
+      end
+
+      # Build a branch node, computing all_descendant_ids automatically
+      def self.branch(id:, label:, children:)
+        all_ids = children.flat_map { |c| [c.id] + c.all_descendant_ids }
+        TreeNode.new(id: id, label: label, children: children, all_descendant_ids: all_ids)
+      end
+
+      TREE = [
+        branch(
+          id: "hogwarts",
+          label: "Hogwarts School of Witchcraft and Wizardry",
+          children: [
+            branch(
+              id: "hogwarts-students",
+              label: "Students",
+              children: [
+                branch(
+                  id: "gryffindor",
+                  label: "Gryffindor",
+                  children: [
+                    leaf(id: "harry-potter",       label: "Harry Potter"),
+                    leaf(id: "ron-weasley",         label: "Ron Weasley"),
+                    leaf(id: "hermione-granger",    label: "Hermione Granger"),
+                    leaf(id: "neville-longbottom",  label: "Neville Longbottom"),
+                    leaf(id: "ginny-weasley",       label: "Ginny Weasley")
+                  ]
+                ),
+                branch(
+                  id: "slytherin",
+                  label: "Slytherin",
+                  children: [
+                    leaf(id: "draco-malfoy",    label: "Draco Malfoy"),
+                    leaf(id: "pansy-parkinson", label: "Pansy Parkinson"),
+                    leaf(id: "blaise-zabini",   label: "Blaise Zabini")
+                  ]
+                ),
+                branch(
+                  id: "ravenclaw",
+                  label: "Ravenclaw",
+                  children: [
+                    leaf(id: "luna-lovegood", label: "Luna Lovegood"),
+                    leaf(id: "cho-chang",     label: "Cho Chang"),
+                    leaf(id: "terry-boot",    label: "Terry Boot")
+                  ]
+                ),
+                branch(
+                  id: "hufflepuff",
+                  label: "Hufflepuff",
+                  children: [
+                    leaf(id: "cedric-diggory", label: "Cedric Diggory"),
+                    leaf(id: "susan-bones",    label: "Susan Bones"),
+                    leaf(id: "hannah-abbott",  label: "Hannah Abbott")
+                  ]
+                )
+              ]
+            ),
+            branch(
+              id: "hogwarts-teachers",
+              label: "Teachers",
+              children: [
+                leaf(id: "albus-dumbledore",  label: "Albus Dumbledore"),
+                leaf(id: "minerva-mcgonagall", label: "Minerva McGonagall"),
+                leaf(id: "severus-snape",     label: "Severus Snape"),
+                leaf(id: "rubeus-hagrid",     label: "Rubeus Hagrid"),
+                leaf(id: "remus-lupin",       label: "Remus Lupin"),
+                leaf(id: "sybill-trelawney",  label: "Sybill Trelawney")
+              ]
+            )
+          ]
+        ),
+        branch(
+          id: "beauxbatons",
+          label: "Beauxbatons Academy of Magic",
+          children: [
+            branch(
+              id: "beauxbatons-students",
+              label: "Students",
+              children: [
+                leaf(id: "fleur-delacour",    label: "Fleur Delacour"),
+                leaf(id: "gabrielle-delacour", label: "Gabrielle Delacour"),
+                leaf(id: "cecile-fontaine",   label: "Cécile Fontaine")
+              ]
+            ),
+            branch(
+              id: "beauxbatons-teachers",
+              label: "Teachers",
+              children: [
+                leaf(id: "olympe-maxime",   label: "Olympe Maxime"),
+                leaf(id: "sylvie-beaumont", label: "Sylvie Beaumont")
+              ]
+            )
+          ]
+        ),
+        branch(
+          id: "durmstrang",
+          label: "Durmstrang Institute",
+          children: [
+            branch(
+              id: "durmstrang-students",
+              label: "Students",
+              children: [
+                leaf(id: "viktor-krum",      label: "Viktor Krum"),
+                leaf(id: "dmitri-poliakoff", label: "Dmitri Poliakoff"),
+                leaf(id: "gregor-tarasov",   label: "Gregor Tarasov")
+              ]
+            ),
+            branch(
+              id: "durmstrang-teachers",
+              label: "Teachers",
+              children: [
+                leaf(id: "igor-karkaroff", label: "Igor Karkaroff"),
+                leaf(id: "fyodor-dolohov", label: "Fyodor Dolohov")
+              ]
+            )
+          ]
+        )
+      ].freeze
+
+      def index
+        query = params[:query].to_s.strip
+        select_variant = (params[:select_variant].presence || "multiple").to_sym
+        nodes = TREE.filter_map { |node| node.filter(query) }
+
+        render locals: {
+          nodes: nodes,
+          query: query,
+          select_variant: select_variant
+        }
+      end
+
+      def async_form_tree
+        query = params[:query].to_s.strip
+        name = params[:name].to_s.presence || "characters"
+        nodes = TREE.filter_map { |node| node.filter(query) }
+        builder = ActionView::Helpers::FormBuilder.new("", nil, view_context, {})
+
+        render locals: {
+          nodes: nodes,
+          query: query,
+          name: name,
+          builder: builder
+        }
+      end
+    end
+  end
+end

data/app/views/primer/view_components/filterable_tree_view_items/_node.html.erb

@@ -0,0 +1,38 @@
+<% if node.leaf? %>
+  <% component.with_leaf(
+    label: node.label,
+    select_variant: select_variant,
+    data: { node_id: node.id }
+  ) %>
+<% else %>
+  <%
+    # At the top-level TreeView we must explicitly provide sub_tree_component_klass and
+    # select_strategy. At nested levels, FilterableTreeView::SubTree#with_sub_tree already
+    # passes both via super and would raise "keyword argument duplicated" if we passed them again.
+    sub_tree_opts = {}
+    if component.is_a?(Primer::Alpha::TreeView)
+      sub_tree_opts[:sub_tree_component_klass] = Primer::OpenProject::FilterableTreeView::SubTree
+      sub_tree_opts[:select_strategy] = :self
+    end
+
+    # When a filter query is active, every sub-tree in the result is either a match or an ancestor
+    # of a match – either way it should be expanded so the user sees the results immediately.
+    sub_tree_opts[:expanded] = true if query.present?
+
+    hierarchy_only = query.present? && !node.label.downcase.include?(query.downcase)
+  %>
+  <% component.with_sub_tree(
+    label: node.label,
+    select_variant: select_variant,
+    **sub_tree_opts,
+    data: {
+      node_id: node.id,
+      hierarchy_only: (hierarchy_only ? true : nil)
+    }
+  ) do |sub| %>
+    <% node.children.each do |child| %>
+      <%= render partial: "primer/view_components/filterable_tree_view_items/node",
+                 locals: { component: sub, node: child, query: query, select_variant: select_variant } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/primer/view_components/filterable_tree_view_items/async_form_tree.html.erb

@@ -0,0 +1,9 @@
+<%= render(Primer::Alpha::TreeView.new(
+  data: { target: "filterable-tree-view.treeViewList" },
+  form_arguments: { builder: builder, name: name }
+)) do |tree| %>
+  <% nodes.each do |node| %>
+    <%= render partial: "primer/view_components/filterable_tree_view_items/node",
+               locals: { component: tree, node: node, query: query, select_variant: :multiple } %>
+  <% end %>
+<% end %>

data/app/views/primer/view_components/filterable_tree_view_items/index.html.erb

@@ -0,0 +1,6 @@
+<%= render(Primer::Alpha::TreeView.new(data: { target: "filterable-tree-view.treeViewList" })) do |tree| %>
+  <% nodes.each do |node| %>
+    <%= render partial: "primer/view_components/filterable_tree_view_items/node",
+               locals: { component: tree, node: node, query: query, select_variant: select_variant } %>
+  <% end %>
+<% end %>

data/config/routes.rb

@@ -12,6 +12,10 @@ Primer::ViewComponents::Engine.routes.draw do
   resources :tree_view_items, only: [:index]
   get "/tree_view_items/async_alpha", to: "tree_view_items#async_alpha", as: :tree_view_items_async_alpha
 
+  resources :filterable_tree_view_items, only: [:index]
+  get "/filterable_tree_view_items/tree", to: "filterable_tree_view_items#index", as: :filterable_tree_view_items_tree
+  get "/filterable_tree_view_items/async_form_tree", to: "filterable_tree_view_items#async_form_tree", as: :filterable_tree_view_items_async_form_tree
+
   # generic form submission path
   post "/form_handler", to: "form_handler#form_action", as: :generic_form_submission
 

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 85
+      MINOR = 86
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/previews/primer/alpha/tree_view_preview/leaf_node_playground.html.erb

@@ -11,5 +11,9 @@
     <% if leading_action_icon && leading_action_icon != :none %>
       <% node.with_leading_action_button(icon: leading_action_icon, aria: { label: "Leading action icon" }) %>
     <% end %>
+
+    <% if trailing_action_icon && trailing_action_icon != :none %>
+      <% node.with_trailing_action_button(icon: trailing_action_icon, aria: { label: "Trailing action icon" }) %>
+    <% end %>
   <% end %>
 <% end %>