@mixtint/primer-view-components 0.84.3 → 0.86.1

package/app/components/primer/alpha/action_menu/action_menu_element.js

@@ -19,6 +19,7 @@ var _ActionMenuElement_instances, _a, _ActionMenuElement_abortController, _Actio
 var ActionMenuElement_1;
 import { controller, target } from '@github/catalyst';
 import '@oddbird/popover-polyfill';
+import AnchoredPositionElement from '../../anchored_position';
 import { observeMutationsUntilConditionMet } from '../../utils';
 import { ActionMenuFocusZoneStack } from './action_menu_focus_zone_stack';
 import { ClipboardCopyElement } from '@github/clipboard-copy-element';
@@ -365,6 +366,9 @@ _ActionMenuElement_handleItemKeyboardEvent = function _ActionMenuElement_handleI
 };
 _ActionMenuElement_handleToggleEvent = function _ActionMenuElement_handleToggleEvent(event) {
     const subMenu = event.target;
+    // Ignore toggle events from non-anchored-position elements (e.g. tooltips inside the menu)
+    if (!(event.target instanceof AnchoredPositionElement))
+        return;
     if (event.newState === 'open') {
         // allow tabbing away from primary menu, but trap focus in sub-menus
         const isPrimaryMenu = subMenu === this.overlay;

package/app/components/primer/alpha/select_panel_element.js

@@ -154,8 +154,8 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
                 side: this.side,
                 anchorOffset: 4,
             });
-            this.dialog.style.top = `${top}px`;
-            this.dialog.style.left = `${left}px`;
+            this.dialog.style.top = `${Math.round(top)}px`;
+            this.dialog.style.left = `${Math.round(left)}px`;
             this.dialog.style.bottom = 'auto';
             this.dialog.style.right = 'auto';
         }

package/app/components/primer/alpha/tree_view.css

@@ -37,10 +37,6 @@
     }
       }
 
-[data-has-leading-action]:is(.TreeViewRootUlStyles .TreeViewItem) {
-      --has-leading-action: 1;
-    }
-
 .TreeViewRootUlStyles .TreeViewItemContainer {
     --level: 1;
     --toggle-width: 1rem;
@@ -52,13 +48,22 @@
     font-size: var(--text-body-size-medium);
     color: var(--fgColor-default);
     border-radius: var(--borderRadius-medium);
-    grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;
-    grid-template-areas: 'spacer leadingAction toggle content';
+    grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr var(--trailing-action-width);
+    grid-template-areas: 'spacer leadingAction toggle content trailingAction';
 
     --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);
+    --trailing-action-width: calc(var(--has-trailing-action, 0) * 1.5rem);
     --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));
   }
 
+:is(.TreeViewRootUlStyles .TreeViewItemContainer):has([data-has-leading-action]) {
+      --has-leading-action: 1;
+    }
+
+:is(.TreeViewRootUlStyles .TreeViewItemContainer):has([data-has-trailing-action]) {
+      --has-trailing-action: 1;
+    }
+
 :is(.TreeViewRootUlStyles .TreeViewItemContainer):hover {
       background-color: var(--control-transparent-bgColor-hover);
     }
@@ -170,6 +175,7 @@
 
 .TreeViewRootUlStyles .TreeViewItemContent {
     display: flex;
+    align-items: center;
     height: 100%;
     padding: 0 var(--base-size-8);
     outline: none;
@@ -313,6 +319,16 @@
       flex-shrink: 1;
     }
 
+.TreeViewRootUlStyles .TreeViewItemTrailingAction {
+    display: flex;
+    color: var(--fgColor-muted);
+    grid-area: trailingAction;
+  }
+
+:is(.TreeViewRootUlStyles .TreeViewItemTrailingAction) > button {
+      flex-shrink: 1;
+    }
+
 .TreeViewRootUlStyles .TreeViewItemLevelLine {
     width: 100%;
     height: 100%;

package/app/components/primer/alpha/tree_view.css.json

@@ -4,8 +4,9 @@
     ".TreeViewRootUlStyles",
     ".TreeViewRootUlStyles .TreeViewItem",
     ":is(.TreeViewRootUlStyles .TreeViewItem):focus-visible > div",
-    "[data-has-leading-action]:is(.TreeViewRootUlStyles .TreeViewItem)",
     ".TreeViewRootUlStyles .TreeViewItemContainer",
+    ":is(.TreeViewRootUlStyles .TreeViewItemContainer):has([data-has-leading-action])",
+    ":is(.TreeViewRootUlStyles .TreeViewItemContainer):has([data-has-trailing-action])",
     ":is(.TreeViewRootUlStyles .TreeViewItemContainer):hover",
     ":is(.TreeViewRootUlStyles .TreeViewItemContainer):has(.TreeViewFailureMessage):hover",
     ":is(.TreeViewRootUlStyles .TreeViewItemContainer):has([role='treeitem']:focus-visible)",
@@ -37,6 +38,8 @@
     ".TreeViewRootUlStyles .TreeViewItemVisual",
     ".TreeViewRootUlStyles .TreeViewItemLeadingAction",
     ":is(.TreeViewRootUlStyles .TreeViewItemLeadingAction) > button",
+    ".TreeViewRootUlStyles .TreeViewItemTrailingAction",
+    ":is(.TreeViewRootUlStyles .TreeViewItemTrailingAction) > button",
     ".TreeViewRootUlStyles .TreeViewItemLevelLine",
     ".TreeViewRootUlStyles:hover .TreeViewItemLevelLine",
     ".TreeViewRootUlStyles:focus-within .TreeViewItemLevelLine",

package/app/components/primer/open_project/filterable_tree_view.css

@@ -0,0 +1,64 @@
+/* CSS for FilterableTreeView */
+
+/* Scroll layout
+ *
+ * The filterable-tree-view element itself acts as a flex column container.
+ * The toolbar (input, segmented control, checkbox) is fixed at the top.
+ * Only the tree area scrolls. The consumer is responsible for setting a
+ * height or max-height on the filterable-tree-view element (or its parent)
+ * to activate scrolling.
+ */
+
+/* stylelint-disable-next-line selector-max-type */
+
+filterable-tree-view {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-height: inherit;
+}
+
+.FilterableTreeViewLayout {
+  flex: 1;
+  min-height: 0;
+}
+
+.FilterableTreeViewTreeContainer {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+/* Highlight style for CSS Custom Highlight API */
+
+::highlight(primer-filterable-tree-view-search-results) {
+  background-color: var(--bgColor-attention-muted);
+}
+
+/* Fallback: <mark> elements used when CSS Custom Highlight API is unavailable */
+
+/* stylelint-disable-next-line selector-max-type */
+
+filterable-tree-view mark {
+  background-color: var(--bgColor-attention-muted);
+  color: inherit;
+}
+
+/* Loading skeleton */
+
+.FilterableTreeViewLoadingSkeleton {
+  display: none;
+}
+
+/* stylelint-disable selector-no-qualifying-type */
+
+/* stylelint-disable selector-max-type */
+
+filterable-tree-view[data-loading] .FilterableTreeViewLoadingSkeleton {
+  display: block;
+}
+
+filterable-tree-view[data-loading] tree-view,
+filterable-tree-view[data-loading] [data-target~="filterable-tree-view.noResultsMessage"] {
+  display: none;
+}

package/app/components/primer/open_project/filterable_tree_view.css.json

@@ -0,0 +1,14 @@
+{
+  "name": "open_project/filterable_tree_view",
+  "selectors": [
+    "filterable-tree-view",
+    ".FilterableTreeViewLayout",
+    ".FilterableTreeViewTreeContainer",
+    "::highlight(primer-filterable-tree-view-search-results)",
+    "filterable-tree-view mark",
+    ".FilterableTreeViewLoadingSkeleton",
+    "filterable-tree-view[data-loading] .FilterableTreeViewLoadingSkeleton",
+    "filterable-tree-view[data-loading] tree-view",
+    "filterable-tree-view[data-loading] [data-target~=\"filterable-tree-view.noResultsMessage\"]"
+  ]
+}

package/app/components/primer/open_project/filterable_tree_view.js

@@ -15,26 +15,57 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _FilterableTreeViewElement_instances, _FilterableTreeViewElement_filterFn, _FilterableTreeViewElement_abortController, _FilterableTreeViewElement_stateMap, _FilterableTreeViewElement_handleTreeViewEvent, _FilterableTreeViewElement_handleTreeViewNodeChecked, _FilterableTreeViewElement_restoreNodeState, _FilterableTreeViewElement_handleFilterModeEvent, _FilterableTreeViewElement_handleFilterInputEvent, _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent, _FilterableTreeViewElement_includeSubItems, _FilterableTreeViewElement_includeSubItemsUnder, _FilterableTreeViewElement_restoreAllNodeStates, _FilterableTreeViewElement_applyFilterOptions, _FilterableTreeViewElement_applyHighlights, _FilterableTreeViewElement_applyManualHighlights, _FilterableTreeViewElement_removeHighlights;
+var _FilterableTreeViewElement_instances, _FilterableTreeViewElement_filterFn, _FilterableTreeViewElement_abortController, _FilterableTreeViewElement_stateMap, _FilterableTreeViewElement_debounceTimer, _FilterableTreeViewElement_fetchAbortController, _FilterableTreeViewElement_expansionSnapshot, _FilterableTreeViewElement_selectedModeSnapshot, _FilterableTreeViewElement_checkedNodeIds, _FilterableTreeViewElement_checkedNodeFormPayloads, _FilterableTreeViewElement_isFiltered, _FilterableTreeViewElement_src_get, _FilterableTreeViewElement_isAsyncMode_get, _FilterableTreeViewElement_handleTreeViewEvent, _FilterableTreeViewElement_updateCheckedNodeIds, _FilterableTreeViewElement_handleTreeViewNodeChecked, _FilterableTreeViewElement_restoreNodeState, _FilterableTreeViewElement_handleFilterModeEvent, _FilterableTreeViewElement_undoClientSideFilter, _FilterableTreeViewElement_handleFilterInputEvent, _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent, _FilterableTreeViewElement_includeSubItems, _FilterableTreeViewElement_includeSubItemsUnder, _FilterableTreeViewElement_restoreAllNodeStates, _FilterableTreeViewElement_scheduleAsyncFetch, _FilterableTreeViewElement_fetchAndReplaceTree, _FilterableTreeViewElement_captureExpansionState, _FilterableTreeViewElement_applyExpansionSnapshot, _FilterableTreeViewElement_snapshotExpansionState, _FilterableTreeViewElement_restoreExpansionState, _FilterableTreeViewElement_restoreSelectionState, _FilterableTreeViewElement_expandAllSubTrees, _FilterableTreeViewElement_applyAsyncHighlights, _FilterableTreeViewElement_updateRetainedSelections, _FilterableTreeViewElement_applyFilterOptions, _FilterableTreeViewElement_applyHighlights, _FilterableTreeViewElement_applyManualHighlights, _FilterableTreeViewElement_removeHighlights;
 import { controller, target } from '@github/catalyst';
 import { TreeViewElement } from '../alpha/tree_view/tree_view';
 import { TreeViewSubTreeNodeElement } from '../alpha/tree_view/tree_view_sub_tree_node_element';
+const ASYNC_DEBOUNCE_MS = 300;
 let FilterableTreeViewElement = class FilterableTreeViewElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _FilterableTreeViewElement_instances.add(this);
         _FilterableTreeViewElement_filterFn.set(this, void 0);
         _FilterableTreeViewElement_abortController.set(this, void 0);
-        _FilterableTreeViewElement_stateMap.set(this, new Map());
+        _FilterableTreeViewElement_stateMap.set(this, new Map()
+        // Async mode state
+        );
+        // Async mode state
+        _FilterableTreeViewElement_debounceTimer.set(this, null);
+        _FilterableTreeViewElement_fetchAbortController.set(this, null
+        // nodeId → wasExpanded: taken once before the first filter query is entered, cleared when filter is removed
+        );
+        // nodeId → wasExpanded: taken once before the first filter query is entered, cleared when filter is removed
+        _FilterableTreeViewElement_expansionSnapshot.set(this, null
+        // nodeId → wasExpanded: taken before entering "selected" mode, cleared when leaving it
+        );
+        // nodeId → wasExpanded: taken before entering "selected" mode, cleared when leaving it
+        _FilterableTreeViewElement_selectedModeSnapshot.set(this, null
+        // nodeId → checkedValue: persists across tree replacements, updated on every treeViewNodeChecked event
+        );
+        // nodeId → checkedValue: persists across tree replacements, updated on every treeViewNodeChecked event
+        _FilterableTreeViewElement_checkedNodeIds.set(this, 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).
+        );
+        // 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).
+        _FilterableTreeViewElement_checkedNodeFormPayloads.set(this, new Map());
+        _FilterableTreeViewElement_isFiltered.set(this, false);
     }
     connectedCallback() {
         const { signal } = (__classPrivateFieldSet(this, _FilterableTreeViewElement_abortController, new AbortController(), "f"));
         this.addEventListener('treeViewNodeChecked', this, { signal });
         this.addEventListener('itemActivated', this, { signal });
         this.addEventListener('input', this, { signal });
+        if (__classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_isAsyncMode_get)) {
+            void __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_fetchAndReplaceTree).call(this);
+        }
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _FilterableTreeViewElement_abortController, "f").abort();
+        __classPrivateFieldGet(this, _FilterableTreeViewElement_fetchAbortController, "f")?.abort();
+        if (__classPrivateFieldGet(this, _FilterableTreeViewElement_debounceTimer, "f") !== null)
+            clearTimeout(__classPrivateFieldGet(this, _FilterableTreeViewElement_debounceTimer, "f"));
     }
     handleEvent(event) {
         if (event.target === this.filterModeControl) {
@@ -56,6 +87,7 @@ let FilterableTreeViewElement = class FilterableTreeViewElement extends HTMLElem
     get treeView() {
         return this.treeViewList.closest('tree-view');
     }
+    // ─── End async mode ─────────────────────────────────────────────────────────
     set filterFn(newFn) {
         __classPrivateFieldSet(this, _FilterableTreeViewElement_filterFn, newFn, "f");
     }
@@ -144,17 +176,63 @@ let FilterableTreeViewElement = class FilterableTreeViewElement extends HTMLElem
 _FilterableTreeViewElement_filterFn = new WeakMap();
 _FilterableTreeViewElement_abortController = new WeakMap();
 _FilterableTreeViewElement_stateMap = new WeakMap();
+_FilterableTreeViewElement_debounceTimer = new WeakMap();
+_FilterableTreeViewElement_fetchAbortController = new WeakMap();
+_FilterableTreeViewElement_expansionSnapshot = new WeakMap();
+_FilterableTreeViewElement_selectedModeSnapshot = new WeakMap();
+_FilterableTreeViewElement_checkedNodeIds = new WeakMap();
+_FilterableTreeViewElement_checkedNodeFormPayloads = new WeakMap();
+_FilterableTreeViewElement_isFiltered = new WeakMap();
 _FilterableTreeViewElement_instances = new WeakSet();
+_FilterableTreeViewElement_src_get = function _FilterableTreeViewElement_src_get() {
+    return this.getAttribute('src');
+};
+_FilterableTreeViewElement_isAsyncMode_get = function _FilterableTreeViewElement_isAsyncMode_get() {
+    return !!__classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_src_get);
+};
 _FilterableTreeViewElement_handleTreeViewEvent = function _FilterableTreeViewElement_handleTreeViewEvent(origEvent) {
     const event = origEvent;
     // NOTE: This event only fires if someone actually activates the check mark, i.e. does not fire
     // when calling this.treeView.setNodeCheckedValue.
     switch (origEvent.type) {
         case 'treeViewNodeChecked':
+            // Always track checked node IDs before delegating, so async replacements can restore selection.
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_updateCheckedNodeIds).call(this, event);
             __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleTreeViewNodeChecked).call(this, event);
             break;
     }
 };
+_FilterableTreeViewElement_updateCheckedNodeIds = function _FilterableTreeViewElement_updateCheckedNodeIds(event) {
+    if (!__classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_isAsyncMode_get))
+        return;
+    for (const nodeInfo of event.detail) {
+        const node = nodeInfo.node;
+        const nodeId = node.getAttribute('data-node-id');
+        if (nodeId) {
+            if (nodeInfo.checkedValue === 'false') {
+                __classPrivateFieldGet(this, _FilterableTreeViewElement_checkedNodeIds, "f").delete(nodeId);
+                __classPrivateFieldGet(this, _FilterableTreeViewElement_checkedNodeFormPayloads, "f").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') {
+                    __classPrivateFieldGet(this, _FilterableTreeViewElement_checkedNodeIds, "f").clear();
+                    __classPrivateFieldGet(this, _FilterableTreeViewElement_checkedNodeFormPayloads, "f").clear();
+                }
+                __classPrivateFieldGet(this, _FilterableTreeViewElement_checkedNodeIds, "f").set(nodeId, nodeInfo.checkedValue);
+                const payload = { path: nodeInfo.path };
+                const dataValue = node.getAttribute('data-value');
+                if (dataValue)
+                    payload.value = dataValue;
+                __classPrivateFieldGet(this, _FilterableTreeViewElement_checkedNodeFormPayloads, "f").set(nodeId, payload);
+            }
+        }
+    }
+    __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_updateRetainedSelections).call(this);
+};
 _FilterableTreeViewElement_handleTreeViewNodeChecked = function _FilterableTreeViewElement_handleTreeViewNodeChecked(event) {
     if (!this.treeView)
         return;
@@ -199,19 +277,57 @@ _FilterableTreeViewElement_restoreNodeState = function _FilterableTreeViewElemen
 _FilterableTreeViewElement_handleFilterModeEvent = function _FilterableTreeViewElement_handleFilterModeEvent(event) {
     if (event.type !== 'itemActivated')
         return;
-    __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyFilterOptions).call(this);
+    if (__classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_isAsyncMode_get)) {
+        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.
+            __classPrivateFieldSet(this, _FilterableTreeViewElement_selectedModeSnapshot, __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_captureExpansionState).call(this), "f");
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyFilterOptions).call(this);
+        }
+        else if (__classPrivateFieldGet(this, _FilterableTreeViewElement_selectedModeSnapshot, "f") !== 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).
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_undoClientSideFilter).call(this);
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyExpansionSnapshot).call(this, __classPrivateFieldGet(this, _FilterableTreeViewElement_selectedModeSnapshot, "f"));
+            __classPrivateFieldSet(this, _FilterableTreeViewElement_selectedModeSnapshot, null, "f");
+        }
+        else {
+            // "all" mode with an active query, or switching away from a custom mode: use async fetch.
+            __classPrivateFieldSet(this, _FilterableTreeViewElement_selectedModeSnapshot, null, "f");
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_scheduleAsyncFetch).call(this);
+        }
+    }
+    else {
+        __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyFilterOptions).call(this);
+    }
+};
+_FilterableTreeViewElement_undoClientSideFilter = function _FilterableTreeViewElement_undoClientSideFilter() {
+    for (const el of this.querySelectorAll('tree-view li[hidden], tree-view-sub-tree-node[hidden]')) {
+        el.removeAttribute('hidden');
+    }
 };
 _FilterableTreeViewElement_handleFilterInputEvent = function _FilterableTreeViewElement_handleFilterInputEvent(event) {
     if (event.type !== 'input')
         return;
-    __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyFilterOptions).call(this);
+    // "selected" mode is always client-side – the server doesn't know the selection state.
+    if (__classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_isAsyncMode_get) && this.filterMode !== 'selected') {
+        __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_scheduleAsyncFetch).call(this);
+    }
+    else {
+        __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyFilterOptions).call(this);
+    }
 };
 _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent = function _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent(event) {
     if (!this.treeView)
         return;
     if (event.type !== 'input')
         return;
-    __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyFilterOptions).call(this);
+    // 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 (!__classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_isAsyncMode_get)) {
+        __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyFilterOptions).call(this);
+    }
     if (this.includeSubItemsCheckBox.checked) {
         __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_includeSubItems).call(this);
     }
@@ -247,6 +363,179 @@ _FilterableTreeViewElement_restoreAllNodeStates = function _FilterableTreeViewEl
         __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_restoreNodeState).call(this, subTree);
     }
 };
+_FilterableTreeViewElement_scheduleAsyncFetch = function _FilterableTreeViewElement_scheduleAsyncFetch() {
+    if (__classPrivateFieldGet(this, _FilterableTreeViewElement_debounceTimer, "f") !== null)
+        clearTimeout(__classPrivateFieldGet(this, _FilterableTreeViewElement_debounceTimer, "f"));
+    __classPrivateFieldSet(this, _FilterableTreeViewElement_debounceTimer, setTimeout(() => {
+        __classPrivateFieldSet(this, _FilterableTreeViewElement_debounceTimer, null, "f");
+        void __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_fetchAndReplaceTree).call(this);
+    }, ASYNC_DEBOUNCE_MS), "f");
+};
+_FilterableTreeViewElement_fetchAndReplaceTree = async function _FilterableTreeViewElement_fetchAndReplaceTree() {
+    const src = __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_src_get);
+    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 (!__classPrivateFieldGet(this, _FilterableTreeViewElement_isFiltered, "f") && query.length > 0) {
+        __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_snapshotExpansionState).call(this);
+        __classPrivateFieldSet(this, _FilterableTreeViewElement_isFiltered, true, "f");
+    }
+    else if (__classPrivateFieldGet(this, _FilterableTreeViewElement_isFiltered, "f") && query.length === 0) {
+        __classPrivateFieldSet(this, _FilterableTreeViewElement_isFiltered, false, "f");
+    }
+    // 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
+    __classPrivateFieldGet(this, _FilterableTreeViewElement_fetchAbortController, "f")?.abort();
+    const { signal } = (__classPrivateFieldSet(this, _FilterableTreeViewElement_fetchAbortController, new AbortController(), "f"));
+    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 __classPrivateFieldGet(this, _FilterableTreeViewElement_checkedNodeIds, "f").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.
+        __classPrivateFieldGet(this, _FilterableTreeViewElement_stateMap, "f").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.
+        __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_restoreSelectionState).call(this);
+        // Re-apply include-sub-items visually if the checkbox is still checked.
+        if (includeSubItems) {
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_includeSubItems).call(this);
+        }
+        if (requestWasFiltered) {
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_expandAllSubTrees).call(this);
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyAsyncHighlights).call(this, query);
+            const hasResults = !!this.treeViewList?.querySelector('[role=treeitem]');
+            this.noResultsMessage.toggleAttribute('hidden', hasResults);
+            this.treeViewList?.toggleAttribute('hidden', !hasResults);
+        }
+        else {
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_removeHighlights).call(this);
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_restoreExpansionState).call(this);
+            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.
+        __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_updateRetainedSelections).call(this);
+    }
+    catch (e) {
+        if (e.name === 'AbortError')
+            return;
+        throw e;
+    }
+    finally {
+        this.removeAttribute('data-loading');
+        this.setAttribute('aria-busy', 'false');
+    }
+};
+_FilterableTreeViewElement_captureExpansionState = function _FilterableTreeViewElement_captureExpansionState() {
+    const snapshot = new Map();
+    for (const treeitem of this.querySelectorAll('[role=treeitem][data-node-id][data-node-type=sub-tree]')) {
+        snapshot.set(treeitem.getAttribute('data-node-id'), treeitem.getAttribute('aria-expanded') === 'true');
+    }
+    return snapshot;
+};
+_FilterableTreeViewElement_applyExpansionSnapshot = function _FilterableTreeViewElement_applyExpansionSnapshot(snapshot) {
+    for (const [nodeId, wasExpanded] of snapshot) {
+        const treeitem = this.querySelector(`[role=treeitem][data-node-id="${CSS.escape(nodeId)}"]`);
+        const subTreeNode = treeitem?.closest('tree-view-sub-tree-node');
+        if (subTreeNode) {
+            if (wasExpanded) {
+                subTreeNode.expand();
+            }
+            else {
+                subTreeNode.collapse();
+            }
+        }
+    }
+};
+_FilterableTreeViewElement_snapshotExpansionState = function _FilterableTreeViewElement_snapshotExpansionState() {
+    __classPrivateFieldSet(this, _FilterableTreeViewElement_expansionSnapshot, __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_captureExpansionState).call(this), "f");
+};
+_FilterableTreeViewElement_restoreExpansionState = function _FilterableTreeViewElement_restoreExpansionState() {
+    if (!__classPrivateFieldGet(this, _FilterableTreeViewElement_expansionSnapshot, "f"))
+        return;
+    __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyExpansionSnapshot).call(this, __classPrivateFieldGet(this, _FilterableTreeViewElement_expansionSnapshot, "f"));
+    __classPrivateFieldSet(this, _FilterableTreeViewElement_expansionSnapshot, null, "f");
+};
+_FilterableTreeViewElement_restoreSelectionState = function _FilterableTreeViewElement_restoreSelectionState() {
+    if (!this.treeView)
+        return;
+    for (const treeitem of this.querySelectorAll('[role=treeitem][data-node-id]')) {
+        const nodeId = treeitem.getAttribute('data-node-id');
+        const savedValue = __classPrivateFieldGet(this, _FilterableTreeViewElement_checkedNodeIds, "f").get(nodeId);
+        if (savedValue !== undefined) {
+            this.treeView.setNodeCheckedValue(treeitem, savedValue);
+        }
+    }
+};
+_FilterableTreeViewElement_expandAllSubTrees = function _FilterableTreeViewElement_expandAllSubTrees() {
+    for (const subTreeNode of this.querySelectorAll('tree-view-sub-tree-node')) {
+        subTreeNode.expand();
+    }
+};
+_FilterableTreeViewElement_applyAsyncHighlights = function _FilterableTreeViewElement_applyAsyncHighlights(query) {
+    __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_removeHighlights).call(this);
+    const ranges = [];
+    for (const treeitem of this.querySelectorAll('[role=treeitem]')) {
+        const result = this.defaultFilterFn(treeitem, query, 'all');
+        if (result)
+            ranges.push(...result);
+    }
+    if (ranges.length > 0)
+        __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyHighlights).call(this, ranges);
+};
+_FilterableTreeViewElement_updateRetainedSelections = function _FilterableTreeViewElement_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 __classPrivateFieldGet(this, _FilterableTreeViewElement_checkedNodeFormPayloads, "f")) {
+        // 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);
+    }
+};
 _FilterableTreeViewElement_applyFilterOptions = function _FilterableTreeViewElement_applyFilterOptions() {
     if (!this.treeView)
         return;

package/app/components/primer/open_project/sub_header.css

@@ -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);
     column-gap: 12px;
     width: 100%;
 
@@ -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);
     }
 }

package/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(> *)"

package/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;