openproject-primer_view_components 0.84.5 → 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/open_project/sub_header.css

@@ -1 +1 @@
-.SubHeader{align-items:center;display:grid;grid-template-areas:"left middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto;margin-bottom:var(--base-size-16)}.SubHeader--expandedSearch{grid-template-areas:"left left left" "bottom bottom bottom"}.SubHeader-rightPane{align-items:center;column-gap:12px;display:flex;grid-area:right}.SubHeader-middlePane{grid-area:middle;text-align:center}.SubHeader-bottomPane{grid-area:bottom}.SubHeader-leftPane{align-items:center;display:flex;grid-area:left;width:100%}:is(.SubHeader-leftPane [class*=FormControl-input-width--]):not(.FormControl-input-width--auto){width:100vw}.SubHeader-filterContainer{display:flex;flex-basis:max-content;gap:8px;width:100%}.SubHeader-filterInput_hiddenClearButton+.FormControl-input-trailingAction{display:none}@media (max-width:543.98px){.SubHeader{grid-template-areas:"left right" "middle middle" "bottom bottom";grid-template-columns:1fr auto}.SubHeader--emptyLeftPane{grid-template-areas:"middle middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto}.SubHeader--emptyLeftPane .SubHeader-middlePane{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.SubHeader-middlePane{text-align:left}.SubHeader-middlePane:has(>*){margin-top:var(--stack-gap-normal)}}
+.SubHeader{align-items:baseline;display:grid;grid-template-areas:"left middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto;margin-bottom:var(--base-size-16)}.SubHeader-rightPane{align-items:center;column-gap:12px;display:flex;grid-area:right}.SubHeader-middlePane{grid-area:middle;text-align:center;white-space:nowrap}.SubHeader-bottomPane{grid-area:bottom}.SubHeader-leftPane{align-items:center;display:flex;flex-wrap:wrap;grid-area:left;row-gap:var(--base-size-16);width:100%}:is(.SubHeader-leftPane [class*=FormControl-input-width--]):not(.FormControl-input-width--auto){width:100vw}.SubHeader-filterContainer{display:flex;flex-basis:max-content;gap:8px;width:100%}.SubHeader-filterInput_hiddenClearButton+.FormControl-input-trailingAction{display:none}@media (max-width:767.98px){.SubHeader{grid-template-areas:"left right" "middle middle" "bottom bottom";grid-template-columns:1fr auto}.SubHeader--expandedSearch{grid-template-areas:"left left" "middle middle" "bottom bottom"}.SubHeader--expandedSearch .SubHeader-hiddenOnExpand{display:none!important}.SubHeader--emptyLeftPane{grid-template-areas:"middle middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto}.SubHeader--emptyLeftPane .SubHeader-middlePane{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.SubHeader-middlePane{text-align:left}.SubHeader-middlePane:has(>*){margin-top:var(--base-size-16)}}

data/app/components/primer/open_project/sub_header.css.json

@@ -2,7 +2,6 @@
   "name": "open_project/sub_header",
   "selectors": [
     ".SubHeader",
-    ".SubHeader--expandedSearch",
     ".SubHeader-rightPane",
     ".SubHeader-middlePane",
     ".SubHeader-bottomPane",
@@ -10,6 +9,8 @@
     ":is(.SubHeader-leftPane [class*=FormControl-input-width--]):not(.FormControl-input-width--auto)",
     ".SubHeader-filterContainer",
     ".SubHeader-filterInput_hiddenClearButton+.FormControl-input-trailingAction",
+    ".SubHeader--expandedSearch",
+    ".SubHeader--expandedSearch .SubHeader-hiddenOnExpand",
     ".SubHeader--emptyLeftPane",
     ".SubHeader--emptyLeftPane .SubHeader-middlePane",
     ".SubHeader-middlePane:has(>*)"

data/app/components/primer/open_project/sub_header.css.map

@@ -1 +1 @@
-{"version":3,"sources":["sub_header.pcss"],"names":[],"mappings":"AAEA,WAII,kBAAmB,CAHnB,YAAa,CACb,8DAA+D,CAC/D,mCAAoC,CAEpC,iCACJ,CAEA,2BACI,2DACJ,CAEA,qBAGI,kBAAmB,CACnB,eAAgB,CAFhB,YAAa,CADb,eAIJ,CAEA,sBACI,gBAAiB,CACjB,iBACJ,CAEA,sBACI,gBACJ,CAEA,oBAGI,kBAAmB,CADnB,YAAa,CADb,cAAe,CAGf,UASJ,CAJQ,gGACI,WACJ,CAIR,2BACI,YAAa,CACb,sBAAuB,CAEvB,OAAQ,CADR,UAEJ,CAEA,2EACE,YACF,CAEA,4BACI,WACI,gEAAiE,CACjE,8BACJ,CAEA,0BACI,gEAAiE,CACjE,mCACJ,CAEA,gDAGI,eAAgB,CADhB,sBAAuB,CADvB,kBAGJ,CAEA,sBACI,eACJ,CAEA,8BACI,kCACJ,CACJ","file":"sub_header.css","sourcesContent":["/* CSS for SubHeader  */\n\n.SubHeader {\n    display: grid;\n    grid-template-areas: \"left middle right\" \"bottom bottom bottom\";\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    margin-bottom: var(--base-size-16);\n}\n\n.SubHeader--expandedSearch {\n    grid-template-areas: \"left left left\" \"bottom bottom bottom\";\n}\n\n.SubHeader-rightPane {\n    grid-area: right;\n    display: flex;\n    align-items: center;\n    column-gap: 12px;\n}\n\n.SubHeader-middlePane {\n    grid-area: middle;\n    text-align: center;\n}\n\n.SubHeader-bottomPane {\n    grid-area: bottom;\n}\n\n.SubHeader-leftPane {\n    grid-area: left;\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    /* Since the container is not full width (due to the grid around it)\n     we want it to grow, and then be limited by the max-width of the \"FormControl-input-width--xy\" class */\n    & [class*='FormControl-input-width--'] {\n        &:not(.FormControl-input-width--auto) {\n            width: 100vw;\n        }\n    }\n}\n\n.SubHeader-filterContainer {\n    display: flex;\n    flex-basis: max-content;\n    width: 100%;\n    gap: 8px;\n}\n\n.SubHeader-filterInput_hiddenClearButton + .FormControl-input-trailingAction {\n  display: none;\n}\n\n@media (max-width: 543.98px) {\n    .SubHeader {\n        grid-template-areas: \"left right\" \"middle middle\" \"bottom bottom\";\n        grid-template-columns: 1fr auto;\n    }\n\n    .SubHeader--emptyLeftPane {\n        grid-template-areas: \"middle middle right\" \"bottom bottom bottom\";\n        grid-template-columns: auto 1fr auto;\n    }\n\n    .SubHeader--emptyLeftPane .SubHeader-middlePane {\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n    }\n\n    .SubHeader-middlePane {\n        text-align: left;\n    }\n\n    .SubHeader-middlePane:has(> *) {\n        margin-top: var(--stack-gap-normal);\n    }\n}\n"]}
+{"version":3,"sources":["sub_header.pcss"],"names":[],"mappings":"AAEA,WAII,oBAAqB,CAHrB,YAAa,CACb,8DAA+D,CAC/D,mCAAoC,CAEpC,iCACJ,CAEA,qBAGI,kBAAmB,CACnB,eAAgB,CAFhB,YAAa,CADb,eAIJ,CAEA,sBACI,gBAAiB,CACjB,iBAAkB,CAClB,kBACJ,CAEA,sBACI,gBACJ,CAEA,oBAGI,kBAAmB,CADnB,YAAa,CAEb,cAAe,CAHf,cAAe,CAIf,2BAA4B,CAC5B,UASJ,CAJQ,gGACI,WACJ,CAIR,2BACI,YAAa,CACb,sBAAuB,CAEvB,OAAQ,CADR,UAEJ,CAEA,2EACE,YACF,CAEA,4BACI,WACI,gEAAiE,CACjE,8BACJ,CAEA,2BACI,+DACJ,CAEA,qDACI,sBACJ,CAEA,0BACI,gEAAiE,CACjE,mCACJ,CAEA,gDAGI,eAAgB,CADhB,sBAAuB,CADvB,kBAGJ,CAEA,sBACI,eACJ,CAEA,8BACI,8BACJ,CACJ","file":"sub_header.css","sourcesContent":["/* CSS for SubHeader  */\n\n.SubHeader {\n    display: grid;\n    grid-template-areas: \"left middle right\" \"bottom bottom bottom\";\n    grid-template-columns: auto 1fr auto;\n    align-items: baseline;\n    margin-bottom: var(--base-size-16);\n}\n\n.SubHeader-rightPane {\n    grid-area: right;\n    display: flex;\n    align-items: center;\n    column-gap: 12px;\n}\n\n.SubHeader-middlePane {\n    grid-area: middle;\n    text-align: center;\n    white-space: nowrap;\n}\n\n.SubHeader-bottomPane {\n    grid-area: bottom;\n}\n\n.SubHeader-leftPane {\n    grid-area: left;\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    row-gap: var(--base-size-16);\n    width: 100%;\n\n    /* Since the container is not full width (due to the grid around it)\n     we want it to grow, and then be limited by the max-width of the \"FormControl-input-width--xy\" class */\n    & [class*='FormControl-input-width--'] {\n        &:not(.FormControl-input-width--auto) {\n            width: 100vw;\n        }\n    }\n}\n\n.SubHeader-filterContainer {\n    display: flex;\n    flex-basis: max-content;\n    width: 100%;\n    gap: 8px;\n}\n\n.SubHeader-filterInput_hiddenClearButton + .FormControl-input-trailingAction {\n  display: none;\n}\n\n@media (max-width: 767.98px) {\n    .SubHeader {\n        grid-template-areas: \"left right\" \"middle middle\" \"bottom bottom\";\n        grid-template-columns: 1fr auto;\n    }\n\n    .SubHeader--expandedSearch {\n        grid-template-areas: \"left left\" \"middle middle\" \"bottom bottom\";\n    }\n\n    .SubHeader--expandedSearch .SubHeader-hiddenOnExpand {\n        display: none !important;\n    }\n\n    .SubHeader--emptyLeftPane {\n        grid-template-areas: \"middle middle right\" \"bottom bottom bottom\";\n        grid-template-columns: auto 1fr auto;\n    }\n\n    .SubHeader--emptyLeftPane .SubHeader-middlePane {\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n    }\n\n    .SubHeader-middlePane {\n        text-align: left;\n    }\n\n    .SubHeader-middlePane:has(> *) {\n        margin-top: var(--base-size-16);\n    }\n}\n"]}

data/app/components/primer/open_project/sub_header.html.erb

@@ -2,16 +2,19 @@
   <div class="SubHeader-leftPane">
     <%= render @filter_container do %>
       <%= filter_input %>
-      <%= render @mobile_filter_cancel do
-        I18n.t("button_cancel")
-      end if @mobile_filter_cancel.present? %>
+      <%= render @collapsed_filter_cancel if @collapsed_filter_cancel.present? %>
     <% end if filter_input.present? %>
 
-    <%= render @mobile_filter_trigger if @mobile_filter_trigger.present? %>
+    <%= render @collapsed_filter_trigger if @collapsed_filter_trigger.present? %>
 
-    <%= render(@mobile_filter_button) if @mobile_filter_button.present? %>
+    <%= render(Primer::BaseComponent.new(tag: :div, display: :flex)) do %>
+      <% quick_filters.each do |quick_filter| %>
+        <%= quick_filter %>
+      <% end %>
 
-    <%= filter_button %>
+      <%= render(@mobile_filter_button) if @mobile_filter_button.present? %>
+      <%= filter_button %>
+    <% end %>
 
     <%= segmented_control %>
 
@@ -22,11 +25,11 @@
     <% end %>
   </div>
 
-  <div class="SubHeader-middlePane" data-targets="<%= HIDDEN_FILTER_TARGET_SELECTOR %>">
+  <div class="SubHeader-middlePane SubHeader-hiddenOnExpand">
     <%= text %>
   </div>
 
-  <div class="SubHeader-rightPane" data-targets="<%= HIDDEN_FILTER_TARGET_SELECTOR %>">
+  <div class="SubHeader-rightPane SubHeader-hiddenOnExpand">
     <% actions.each do |action| %>
       <%= action %>
     <% end %>

data/app/components/primer/open_project/sub_header.pcss

@@ -4,14 +4,10 @@
     display: grid;
     grid-template-areas: "left middle right" "bottom bottom bottom";
     grid-template-columns: auto 1fr auto;
-    align-items: center;
+    align-items: baseline;
     margin-bottom: var(--base-size-16);
 }
 
-.SubHeader--expandedSearch {
-    grid-template-areas: "left left left" "bottom bottom bottom";
-}
-
 .SubHeader-rightPane {
     grid-area: right;
     display: flex;
@@ -22,6 +18,7 @@
 .SubHeader-middlePane {
     grid-area: middle;
     text-align: center;
+    white-space: nowrap;
 }
 
 .SubHeader-bottomPane {
@@ -32,6 +29,8 @@
     grid-area: left;
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
+    row-gap: var(--base-size-16);
     width: 100%;
 
     /* Since the container is not full width (due to the grid around it)
@@ -54,12 +53,20 @@
   display: none;
 }
 
-@media (max-width: 543.98px) {
+@media (max-width: 767.98px) {
     .SubHeader {
         grid-template-areas: "left right" "middle middle" "bottom bottom";
         grid-template-columns: 1fr auto;
     }
 
+    .SubHeader--expandedSearch {
+        grid-template-areas: "left left" "middle middle" "bottom bottom";
+    }
+
+    .SubHeader--expandedSearch .SubHeader-hiddenOnExpand {
+        display: none !important;
+    }
+
     .SubHeader--emptyLeftPane {
         grid-template-areas: "middle middle right" "bottom bottom bottom";
         grid-template-columns: auto 1fr auto;
@@ -76,6 +83,6 @@
     }
 
     .SubHeader-middlePane:has(> *) {
-        margin-top: var(--stack-gap-normal);
+        margin-top: var(--base-size-16);
     }
 }

data/app/components/primer/open_project/sub_header.rb

@@ -7,8 +7,8 @@ module Primer
     class SubHeader < Primer::Component
       status :open_project
 
-      HIDDEN_FILTER_TARGET_SELECTOR = "sub-header.hiddenItemsOnExpandedFilter"
       SHOWN_FILTER_TARGET_SELECTOR = "sub-header.shownItemsOnExpandedFilter"
+      FILTER_EXPAND_BUTTON_TARGET_SELECTOR = "sub-header.filterExpandButton"
 
       MOBILE_ACTIONS_DISPLAY = [:flex, :none].freeze
       DESKTOP_ACTIONS_DISPLAY = [:none, :flex].freeze
@@ -101,18 +101,23 @@ module Primer
           system_arguments[:data][:action] += " input:sub-header#toggleFilterInputClearButton focus:sub-header#toggleFilterInputClearButton"
         end
 
-        @mobile_filter_trigger = Primer::Beta::IconButton.new(icon: system_arguments[:leading_visual][:icon],
-                                                              display: [:inline_flex, :none],
-                                                              aria: { label: label },
-                                                              mr: 2,
-                                                              "data-action": "click:sub-header#expandFilterInput",
-                                                              "data-targets": HIDDEN_FILTER_TARGET_SELECTOR)
+        trigger_display = @collapsed_search ? :inline_flex : [:inline_flex, :none]
 
-        @mobile_filter_cancel = Primer::Beta::Button.new(scheme: :invisible,
-                                                         display: :none,
-                                                         data: {
-                                                           targets: SHOWN_FILTER_TARGET_SELECTOR,
-                                                           action: "click:sub-header#collapseFilterInput"})
+        @collapsed_filter_trigger = Primer::Beta::IconButton.new(icon: system_arguments[:leading_visual][:icon],
+                                                                 display: trigger_display,
+                                                                 aria: { label: label },
+                                                                 mr: 2,
+                                                                 "data-action": "click:sub-header#expandFilterInput",
+                                                                 "data-targets": FILTER_EXPAND_BUTTON_TARGET_SELECTOR)
+
+        @collapsed_filter_cancel = Primer::Beta::IconButton.new(icon: :x,
+                                                                "aria-label": I18n.t(:button_cancel),
+                                                                scheme: :invisible,
+                                                                display: :none,
+                                                                data: {
+                                                                  targets: SHOWN_FILTER_TARGET_SELECTOR,
+                                                                  action: "click:sub-header#collapseFilterInput"
+                                                                })
 
 
         Primer::Alpha::TextField.new(name: name, label: label, **system_arguments)
@@ -165,6 +170,18 @@ module Primer
         }
       }
 
+      # Quick filters shown in the left pane next to the search bar (0–5 items).
+      # Hidden on mobile. Requires all_filters_button to be set when used.
+      # Supports ActionMenus, Buttons, IconButtons, SelectPanels, and SegmentedControls inside the block.
+      renders_many :quick_filters, lambda { |**kwargs|
+        deny_tag_argument(**kwargs)
+        kwargs[:tag] = :div
+        kwargs[:mr] ||= 2
+        kwargs[:display] = DESKTOP_ACTIONS_DISPLAY
+
+        Primer::BaseComponent.new(**kwargs)
+      }
+
       renders_one :segmented_control, lambda { |**system_arguments, &block|
           deny_tag_argument(**system_arguments)
           system_arguments[:mr] ||= 2
@@ -182,6 +199,7 @@ module Primer
 
       renders_one :text, lambda { |**system_arguments|
         system_arguments[:font_weight] ||= :bold
+        system_arguments[:mx] ||= 2
 
         Primer::Beta::Text.new(**system_arguments)
       }
@@ -195,16 +213,18 @@ module Primer
         Primer::BaseComponent.new(**system_arguments)
       }
 
-
+      # @param collapsed_search [Boolean] When true, the search bar starts collapsed as an icon button on all screen sizes. Clicking expands it.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(**system_arguments)
+      def initialize(collapsed_search: false, **system_arguments)
+        @collapsed_search = collapsed_search
         @system_arguments = system_arguments
         @system_arguments[:tag] = :"sub-header"
 
+        filter_container_display = collapsed_search ? :none : DESKTOP_ACTIONS_DISPLAY
+
         @filter_container = Primer::BaseComponent.new(tag: :div,
                                                       classes: "SubHeader-filterContainer",
-                                                      display: DESKTOP_ACTIONS_DISPLAY,
-
+                                                      display: filter_container_display,
                                                       mr: 2,
                                                       data: { targets: SHOWN_FILTER_TARGET_SELECTOR })
 
@@ -215,21 +235,22 @@ module Primer
       end
 
       def before_render
+        if quick_filters.any? && filter_button.nil?
+          raise ArgumentError, "You must provide a filter_button when using quick_filters."
+        end
+
+        if quick_filters.size > 5
+          raise ArgumentError, "SubHeader supports a maximum of 5 quick_filters, got #{quick_filters.size}."
+        end
+
         @system_arguments[:classes] = class_names(
           @system_arguments[:classes],
-          "SubHeader--emptyLeftPane" => !segmented_control? && !filter_button && !filter_input
+          "SubHeader--emptyLeftPane" => !segmented_control? && !filter_button && !filter_input && quick_filters.empty?
         )
       end
 
       def set_as_hidden_filter_target(system_arguments)
-        system_arguments[:data] ||= {}
-        system_arguments[:data] = merge_data(
-            system_arguments, {
-            data: {
-              targets: HIDDEN_FILTER_TARGET_SELECTOR,
-            }
-          }
-        )
+        system_arguments[:classes] = class_names(system_arguments[:classes], "SubHeader-hiddenOnExpand")
         system_arguments
       end
     end

data/app/components/primer/open_project/sub_header_element.d.ts

@@ -1,7 +1,7 @@
 declare class SubHeaderElement extends HTMLElement {
     filterInput: HTMLInputElement;
-    hiddenItemsOnExpandedFilter: HTMLElement[];
     shownItemsOnExpandedFilter: HTMLElement[];
+    filterExpandButton: HTMLElement[];
     connectedCallback(): void;
     setupFilterInputClearButton(): void;
     toggleFilterInputClearButton(): void;