@openproject/primer-view-components 0.70.5 → 0.71.0-rc.5dc134b91

package/app/components/primer/alpha/segmented_control.d.ts

@@ -1,12 +1,12 @@
-declare class SegmentedControlElement extends HTMLElement {
+export declare class SegmentedControlElement extends HTMLElement {
     #private;
     items: HTMLElement[];
     connectedCallback(): void;
     select(event: Event): void;
+    get current(): HTMLElement | null;
 }
 declare global {
     interface Window {
         SegmentedControlElement: typeof SegmentedControlElement;
     }
 }
-export {};

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

@@ -27,6 +27,17 @@ let SegmentedControlElement = class SegmentedControlElement extends HTMLElement
         }
         button.closest('li.SegmentedControl-item')?.classList.add('SegmentedControl-item--selected');
         button.setAttribute('aria-current', 'true');
+        this.dispatchEvent(new CustomEvent('itemActivated', {
+            bubbles: true,
+            detail: {
+                item: button,
+                checked: false,
+                value: button.querySelector('.Button-label')?.textContent,
+            },
+        }));
+    }
+    get current() {
+        return this.querySelector('[aria-current=true]');
     }
 };
 _SegmentedControlElement_instances = new WeakSet();
@@ -41,6 +52,7 @@ __decorate([
 SegmentedControlElement = __decorate([
     controller
 ], SegmentedControlElement);
+export { SegmentedControlElement };
 if (!window.customElements.get('segmented-control')) {
     window.SegmentedControlElement = SegmentedControlElement;
     window.customElements.define('segmented-control', SegmentedControlElement);

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

@@ -1 +1 @@
-.Stack{align-content:flex-start;align-items:stretch;display:flex;flex-flow:column;gap:var(--stack-gap,var(--stack-gap-normal,1rem))}.Stack[data-padding-narrow=none],.Stack[data-padding=none]{padding:0}.Stack[data-padding-narrow=condensed],.Stack[data-padding=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-narrow=normal],.Stack[data-padding=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-narrow=spacious],.Stack[data-padding=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-narrow=horizontal],.Stack[data-direction=horizontal]{flex-flow:row}.Stack[data-direction-narrow=vertical],.Stack[data-direction=vertical]{flex-flow:column}.Stack[data-gap-narrow=none],.Stack[data-gap=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-narrow=condensed],.Stack[data-gap=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-narrow=normal],.Stack[data-gap=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-narrow=spacious],.Stack[data-gap=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-narrow=start],.Stack[data-align=start]{align-items:flex-start}.Stack[data-align-narrow=center],.Stack[data-align=center]{align-items:center}.Stack[data-align-narrow=end],.Stack[data-align=end]{align-items:flex-end}.Stack[data-align-narrow=baseline],.Stack[data-align=baseline]{align-items:baseline}.Stack[data-justify-narrow=start],.Stack[data-justify=start]{justify-content:flex-start}.Stack[data-justify-narrow=center],.Stack[data-justify=center]{justify-content:center}.Stack[data-justify-narrow=end],.Stack[data-justify=end]{justify-content:flex-end}.Stack[data-justify-narrow=space-between],.Stack[data-justify=space-between]{justify-content:space-between}.Stack[data-justify-narrow=space-evenly],.Stack[data-justify=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-narrow=wrap],.Stack[data-wrap=wrap]{flex-wrap:wrap}.Stack[data-wrap-narrow=nowrap],.Stack[data-wrap=nowrap]{flex-wrap:nowrap}@media (min-width:48rem){.Stack[data-padding-regular=none]{padding:0}.Stack[data-padding-regular=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-regular=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-regular=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-regular=horizontal]{flex-flow:row}.Stack[data-direction-regular=vertical]{flex-flow:column}.Stack[data-gap-regular=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-regular=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-regular=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-regular=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-regular=start]{align-items:flex-start}.Stack[data-align-regular=center]{align-items:center}.Stack[data-align-regular=end]{align-items:flex-end}.Stack[data-align-regular=baseline]{align-items:baseline}.Stack[data-justify-regular=start]{justify-content:flex-start}.Stack[data-justify-regular=center]{justify-content:center}.Stack[data-justify-regular=end]{justify-content:flex-end}.Stack[data-justify-regular=space-between]{justify-content:space-between}.Stack[data-justify-regular=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-regular=wrap]{flex-wrap:wrap}.Stack[data-wrap-regular=nowrap]{flex-wrap:nowrap}}@media (min-width:87.5rem){.Stack[data-padding-wide=none]{padding:0}.Stack[data-padding-wide=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-wide=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-wide=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-wide=horizontal]{flex-flow:row}.Stack[data-direction-wide=vertical]{flex-flow:column}.Stack[data-gap-wide=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-wide=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-wide=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-wide=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-wide=start]{align-items:flex-start}.Stack[data-align-wide=center]{align-items:center}.Stack[data-align-wide=end]{align-items:flex-end}.Stack[data-align-wide=baseline]{align-items:baseline}.Stack[data-justify-wide=start]{justify-content:flex-start}.Stack[data-justify-wide=center]{justify-content:center}.Stack[data-justify-wide=end]{justify-content:flex-end}.Stack[data-justify-wide=space-between]{justify-content:space-between}.Stack[data-justify-wide=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-wide=wrap]{flex-wrap:wrap}.Stack[data-wrap-wide=nowrap]{flex-wrap:nowrap}}
+.Stack{align-content:flex-start;align-items:stretch;display:flex;flex-flow:column;gap:var(--stack-gap,var(--stack-gap-normal,1rem))}.Stack[data-padding-narrow=none],.Stack[data-padding=none]{padding:0}.Stack[data-padding-narrow=condensed],.Stack[data-padding=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-narrow=normal],.Stack[data-padding=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-narrow=spacious],.Stack[data-padding=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-narrow=horizontal],.Stack[data-direction=horizontal]{flex-flow:row}.Stack[data-direction-narrow=vertical],.Stack[data-direction=vertical]{flex-flow:column}.Stack[data-gap-narrow=none],.Stack[data-gap=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-narrow=condensed],.Stack[data-gap=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-narrow=normal],.Stack[data-gap=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-narrow=spacious],.Stack[data-gap=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-narrow=start],.Stack[data-align=start]{align-items:flex-start}.Stack[data-align-narrow=center],.Stack[data-align=center]{align-items:center}.Stack[data-align-narrow=end],.Stack[data-align=end]{align-items:flex-end}.Stack[data-align-narrow=baseline],.Stack[data-align=baseline]{align-items:baseline}.Stack[data-justify-narrow=start],.Stack[data-justify=start]{justify-content:flex-start}.Stack[data-justify-narrow=center],.Stack[data-justify=center]{justify-content:center}.Stack[data-justify-narrow=end],.Stack[data-justify=end]{justify-content:flex-end}.Stack[data-justify-narrow=space-between],.Stack[data-justify=space-between]{justify-content:space-between}.Stack[data-justify-narrow=space-evenly],.Stack[data-justify=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-narrow=wrap],.Stack[data-wrap=wrap]{flex-wrap:wrap}.Stack[data-wrap-narrow=nowrap],.Stack[data-wrap=nowrap]{flex-wrap:nowrap}.Stack[data-wrap-narrow=reverse],.Stack[data-wrap=reverse]{flex-wrap:wrap-reverse}@media (min-width:48rem){.Stack[data-padding-regular=none]{padding:0}.Stack[data-padding-regular=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-regular=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-regular=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-regular=horizontal]{flex-flow:row}.Stack[data-direction-regular=vertical]{flex-flow:column}.Stack[data-gap-regular=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-regular=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-regular=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-regular=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-regular=start]{align-items:flex-start}.Stack[data-align-regular=center]{align-items:center}.Stack[data-align-regular=end]{align-items:flex-end}.Stack[data-align-regular=baseline]{align-items:baseline}.Stack[data-justify-regular=start]{justify-content:flex-start}.Stack[data-justify-regular=center]{justify-content:center}.Stack[data-justify-regular=end]{justify-content:flex-end}.Stack[data-justify-regular=space-between]{justify-content:space-between}.Stack[data-justify-regular=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-regular=wrap]{flex-wrap:wrap}.Stack[data-wrap-regular=nowrap]{flex-wrap:nowrap}.Stack[data-wrap-regular=reverse]{flex-wrap:wrap-reverse}}@media (min-width:87.5rem){.Stack[data-padding-wide=none]{padding:0}.Stack[data-padding-wide=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-wide=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-wide=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-wide=horizontal]{flex-flow:row}.Stack[data-direction-wide=vertical]{flex-flow:column}.Stack[data-gap-wide=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-wide=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-wide=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-wide=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-wide=start]{align-items:flex-start}.Stack[data-align-wide=center]{align-items:center}.Stack[data-align-wide=end]{align-items:flex-end}.Stack[data-align-wide=baseline]{align-items:baseline}.Stack[data-justify-wide=start]{justify-content:flex-start}.Stack[data-justify-wide=center]{justify-content:center}.Stack[data-justify-wide=end]{justify-content:flex-end}.Stack[data-justify-wide=space-between]{justify-content:space-between}.Stack[data-justify-wide=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-wide=wrap]{flex-wrap:wrap}.Stack[data-wrap-wide=nowrap]{flex-wrap:nowrap}.Stack[data-wrap-wide=reverse]{flex-wrap:wrap-reverse}}

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

@@ -44,6 +44,8 @@
     ".Stack[data-wrap=wrap]",
     ".Stack[data-wrap-narrow=nowrap]",
     ".Stack[data-wrap=nowrap]",
+    ".Stack[data-wrap-narrow=reverse]",
+    ".Stack[data-wrap=reverse]",
     ".Stack[data-padding-regular=none]",
     ".Stack[data-padding-regular=condensed]",
     ".Stack[data-padding-regular=normal]",
@@ -65,6 +67,7 @@
     ".Stack[data-justify-regular=space-evenly]",
     ".Stack[data-wrap-regular=wrap]",
     ".Stack[data-wrap-regular=nowrap]",
+    ".Stack[data-wrap-regular=reverse]",
     ".Stack[data-padding-wide=none]",
     ".Stack[data-padding-wide=condensed]",
     ".Stack[data-padding-wide=normal]",
@@ -85,6 +88,7 @@
     ".Stack[data-justify-wide=space-between]",
     ".Stack[data-justify-wide=space-evenly]",
     ".Stack[data-wrap-wide=wrap]",
-    ".Stack[data-wrap-wide=nowrap]"
+    ".Stack[data-wrap-wide=nowrap]",
+    ".Stack[data-wrap-wide=reverse]"
   ]
 }

package/app/components/primer/open_project/filterable_tree_view.d.ts

@@ -0,0 +1,29 @@
+import { SegmentedControlElement } from '../alpha/segmented_control';
+import { TreeViewElement } from './tree_view/tree_view';
+import { TreeViewSubTreeNodeElement } from './tree_view/tree_view_sub_tree_node_element';
+export type FilterFn = (node: HTMLElement, query: string, filterMode?: string) => Range[] | null;
+export declare class FilterableTreeViewElement extends HTMLElement {
+    #private;
+    filterInput: HTMLInputElement;
+    filterModeControlList: HTMLElement;
+    treeViewList: HTMLElement;
+    noResultsMessage: HTMLElement;
+    includeSubItemsCheckBox: HTMLInputElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+    get filterModeControl(): SegmentedControlElement | null;
+    get treeView(): TreeViewElement | null;
+    set filterFn(newFn: FilterFn);
+    get filterFn(): FilterFn;
+    defaultFilterFn(node: HTMLElement, query: string, filterMode?: string): Range[] | null;
+    get filterMode(): string | null;
+    get queryString(): string;
+    eachDescendantDepthFirst(node: HTMLElement, level: number, ancestry: TreeViewSubTreeNodeElement[]): Generator<[NodeListOf<HTMLElement>, TreeViewSubTreeNodeElement[]]>;
+    eachShallowestCheckedSubTree(root: TreeViewSubTreeNodeElement): Generator<TreeViewSubTreeNodeElement>;
+}
+declare global {
+    interface Window {
+        FilterableTreeViewElement: typeof FilterableTreeViewElement;
+    }
+}

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

@@ -0,0 +1,409 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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;
+import { controller, target } from '@github/catalyst';
+import { TreeViewElement } from './tree_view/tree_view';
+import { TreeViewSubTreeNodeElement } from './tree_view/tree_view_sub_tree_node_element';
+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());
+    }
+    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 });
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _FilterableTreeViewElement_abortController, "f").abort();
+    }
+    handleEvent(event) {
+        if (event.target === this.filterModeControl) {
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleFilterModeEvent).call(this, event);
+        }
+        else if (event.target === this.filterInput) {
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleFilterInputEvent).call(this, event);
+        }
+        else if (event.target === this.includeSubItemsCheckBox) {
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent).call(this, event);
+        }
+        else if (event.target instanceof TreeViewElement || event.target instanceof TreeViewSubTreeNodeElement) {
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleTreeViewEvent).call(this, event);
+        }
+    }
+    get filterModeControl() {
+        return this.filterModeControlList.closest('segmented-control');
+    }
+    get treeView() {
+        return this.treeViewList.closest('tree-view');
+    }
+    set filterFn(newFn) {
+        __classPrivateFieldSet(this, _FilterableTreeViewElement_filterFn, newFn, "f");
+    }
+    get filterFn() {
+        if (__classPrivateFieldGet(this, _FilterableTreeViewElement_filterFn, "f")) {
+            return __classPrivateFieldGet(this, _FilterableTreeViewElement_filterFn, "f");
+        }
+        else {
+            return this.defaultFilterFn;
+        }
+    }
+    defaultFilterFn(node, query, filterMode) {
+        const ranges = [];
+        if (query.length > 0) {
+            const lowercaseQuery = query.toLowerCase();
+            const treeWalker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT);
+            let currentNode = treeWalker.nextNode();
+            while (currentNode) {
+                const lowercaseNodeText = currentNode.textContent?.toLocaleLowerCase() || '';
+                let startIndex = 0;
+                while (startIndex < lowercaseNodeText.length) {
+                    const index = lowercaseNodeText.indexOf(lowercaseQuery, startIndex);
+                    if (index === -1)
+                        break;
+                    const range = new Range();
+                    range.setStart(currentNode, index);
+                    range.setEnd(currentNode, index + lowercaseQuery.length);
+                    ranges.push(range);
+                    startIndex = index + lowercaseQuery.length;
+                }
+                currentNode = treeWalker.nextNode();
+            }
+        }
+        if (ranges.length === 0 && query.length > 0) {
+            return null;
+        }
+        switch (filterMode) {
+            case 'selected': {
+                // Only match nodes that have been checked
+                if (this.treeView?.getNodeCheckedValue(node) !== 'false') {
+                    return ranges;
+                }
+                break;
+            }
+            case 'all': {
+                return ranges;
+            }
+        }
+        return null;
+    }
+    get filterMode() {
+        const current = this.filterModeControl?.current;
+        if (current) {
+            return current.getAttribute('data-name');
+        }
+        else {
+            return null;
+        }
+    }
+    get queryString() {
+        return this.filterInput.value;
+    }
+    // Iterates over the nodes in the given sub-tree in depth-first order, yielding a list of leaf nodes
+    // and an array of ancestor nodes. It uses the aria-level information attached to each node to determine
+    // the next level of the tree to visit.
+    *eachDescendantDepthFirst(node, level, ancestry) {
+        for (const subTreeItem of node.querySelectorAll(`[role=treeitem][data-node-type='sub-tree'][aria-level='${level}']`)) {
+            const subTree = subTreeItem.closest('tree-view-sub-tree-node');
+            yield* this.eachDescendantDepthFirst(subTree, level + 1, [...ancestry, subTree]);
+        }
+        const leafNodes = node.querySelectorAll(`[role=treeitem][data-node-type='leaf'][aria-level='${level}']`);
+        yield [leafNodes, ancestry];
+    }
+    // Yields only the shallowest (i.e. lowest depth) sub-tree nodes that are checked, i.e. does not
+    // visit a sub-tree's children if that sub-tree is checked.
+    *eachShallowestCheckedSubTree(root) {
+        if (this.treeView?.getNodeCheckedValue(root.node) === 'true') {
+            yield root;
+            return; // do not descend further
+        }
+        for (const childSubTree of root.eachDirectDescendantSubTreeNode()) {
+            yield* this.eachShallowestCheckedSubTree(childSubTree);
+        }
+    }
+};
+_FilterableTreeViewElement_filterFn = new WeakMap();
+_FilterableTreeViewElement_abortController = new WeakMap();
+_FilterableTreeViewElement_stateMap = new WeakMap();
+_FilterableTreeViewElement_instances = new WeakSet();
+_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':
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleTreeViewNodeChecked).call(this, event);
+            break;
+    }
+};
+_FilterableTreeViewElement_handleTreeViewNodeChecked = function _FilterableTreeViewElement_handleTreeViewNodeChecked(event) {
+    if (!this.treeView)
+        return;
+    if (!this.includeSubItemsCheckBox.checked)
+        return;
+    // Although multiple nodes may have been checked (eg. if the TreeView is in descendants mode),
+    // the one that actually received the click, i.e. the local root the user checked, is the first
+    // entry. We only care about sub-tree nodes because checking them affects all leaf nodes, so
+    // there's no need to check or uncheck individual leaves.
+    const nodeInfo = event.detail[0];
+    if (this.treeView.getNodeType(nodeInfo.node) !== 'sub-tree')
+        return;
+    const subTree = nodeInfo.node.closest('tree-view-sub-tree-node');
+    if (nodeInfo.checkedValue === 'false') {
+        // If the sub-tree has been unchecked, restore whatever state they were in before. We don't
+        // need to explicitly enable the sub-tree because restoring will handle setting the enabled
+        // or disabled state per-node.
+        __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_restoreNodeState).call(this, subTree);
+    }
+    else {
+        __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_includeSubItemsUnder).call(this, subTree);
+    }
+};
+_FilterableTreeViewElement_restoreNodeState = function _FilterableTreeViewElement_restoreNodeState(subTree) {
+    if (!this.treeView)
+        return;
+    if (!__classPrivateFieldGet(this, _FilterableTreeViewElement_stateMap, "f").has(subTree))
+        return;
+    const descendantStates = __classPrivateFieldGet(this, _FilterableTreeViewElement_stateMap, "f").get(subTree);
+    for (const [element, state] of descendantStates.entries()) {
+        let node = element;
+        if (element instanceof TreeViewSubTreeNodeElement) {
+            node = element.node;
+        }
+        this.treeView.setNodeCheckedValue(node, state.checked ? 'true' : 'false');
+        this.treeView.setNodeDisabledValue(node, state.disabled);
+    }
+    // once node state has been restored, there's no reason to keep it around - it will be saved
+    // again if this sub-tree gets checked
+    __classPrivateFieldGet(this, _FilterableTreeViewElement_stateMap, "f").delete(subTree);
+};
+_FilterableTreeViewElement_handleFilterModeEvent = function _FilterableTreeViewElement_handleFilterModeEvent(event) {
+    if (event.type !== 'itemActivated')
+        return;
+    __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyFilterOptions).call(this);
+};
+_FilterableTreeViewElement_handleFilterInputEvent = function _FilterableTreeViewElement_handleFilterInputEvent(event) {
+    if (event.type !== 'input')
+        return;
+    __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);
+    if (this.includeSubItemsCheckBox.checked) {
+        __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_includeSubItems).call(this);
+    }
+    else {
+        __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_restoreAllNodeStates).call(this);
+    }
+};
+_FilterableTreeViewElement_includeSubItems = function _FilterableTreeViewElement_includeSubItems() {
+    if (!this.treeView)
+        return;
+    for (const subTree of this.treeView.rootSubTreeNodes()) {
+        for (const checkedSubTree of this.eachShallowestCheckedSubTree(subTree)) {
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_includeSubItemsUnder).call(this, checkedSubTree);
+        }
+    }
+};
+_FilterableTreeViewElement_includeSubItemsUnder = function _FilterableTreeViewElement_includeSubItemsUnder(subTree) {
+    if (!this.treeView)
+        return;
+    const descendantStates = new Map();
+    for (const node of subTree.eachDescendantNode()) {
+        descendantStates.set(node, {
+            checked: this.treeView.getNodeCheckedValue(node) === 'true',
+            disabled: this.treeView.getNodeDisabledValue(node),
+        });
+        this.treeView.setNodeCheckedValue(node, 'true');
+        this.treeView.setNodeDisabledValue(node, true);
+    }
+    __classPrivateFieldGet(this, _FilterableTreeViewElement_stateMap, "f").set(subTree, descendantStates);
+};
+_FilterableTreeViewElement_restoreAllNodeStates = function _FilterableTreeViewElement_restoreAllNodeStates() {
+    for (const subTree of __classPrivateFieldGet(this, _FilterableTreeViewElement_stateMap, "f").keys()) {
+        __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_restoreNodeState).call(this, subTree);
+    }
+};
+_FilterableTreeViewElement_applyFilterOptions = function _FilterableTreeViewElement_applyFilterOptions() {
+    if (!this.treeView)
+        return;
+    __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_removeHighlights).call(this);
+    const query = this.queryString;
+    const mode = this.filterMode || undefined;
+    const generation = window.crypto.randomUUID();
+    const filterRangesCache = new Map();
+    const expandAncestors = (...ancestors) => {
+        for (const ancestor of ancestors) {
+            ancestor.expand();
+            ancestor.removeAttribute('hidden');
+            ancestor.setAttribute('data-generation', generation);
+            if (cachedFilterFn(ancestor.node, query, mode)) {
+                ancestor.node.removeAttribute('aria-disabled');
+            }
+            else {
+                ancestor.node.setAttribute('aria-disabled', 'true');
+            }
+        }
+    };
+    // This function is called in the loop below for both leaf  nodes and sub-tree nodes to determine
+    // if they match, and subsequently whether or not to hide them. However, it serves a secondary purpose
+    // as well in that it remembers the range information returned by the filter function so it can be
+    // used to highlight matching ranges later.
+    const cachedFilterFn = (node, queryStr, filterMode) => {
+        if (!filterRangesCache.has(node)) {
+            filterRangesCache.set(node, this.filterFn(node, queryStr, filterMode));
+        }
+        return filterRangesCache.get(node) !== null;
+    };
+    /* We iterate depth-first here in order to be able to examine the most deeply nested leaf nodes
+     * before their parents. This enables us to easily hide the parent if none of its children match.
+     * To handle expanding and collapsing ancestors, the algorithm iterates over the provided ancestor
+     * chain, expanding "upwards" to the root.
+     *
+     * Using this technique does mean it's possible to iterate over the same ancestor multiple times.
+     * For example, consider two nodes that share the same ancestor. Node A contains matching children,
+     * but node B does not. The algorithm below will visit node A first and expand it and all its
+     * ancestors. Next, the algorithm will visit node B and collapse all its ancestors. To avoid this,
+     * the algorithm attaches a random "generation ID" to each node visited. If the generation ID
+     * matches when visiting a particular node, we know that node has already been visited and should
+     * not be hidden or collapsed.
+     */
+    for (const [leafNodes, ancestors] of this.eachDescendantDepthFirst(this.treeViewList, 1, [])) {
+        const parent = ancestors[ancestors.length - 1];
+        let atLeastOneLeafMatches = false;
+        for (const leafNode of leafNodes) {
+            if (cachedFilterFn(leafNode, query, mode)) {
+                leafNode.closest('li')?.removeAttribute('hidden');
+                atLeastOneLeafMatches = true;
+            }
+            else {
+                leafNode.closest('li')?.setAttribute('hidden', 'hidden');
+            }
+        }
+        if (atLeastOneLeafMatches) {
+            expandAncestors(...ancestors);
+        }
+        else {
+            if (parent) {
+                if (cachedFilterFn(parent.node, query, mode)) {
+                    // sub-tree matched, so expand ancestors
+                    expandAncestors(...ancestors);
+                }
+                else {
+                    // this node has already been marked by the current generation and is therefore
+                    // a shared ancestor - don't collapse or hide it
+                    if (parent.getAttribute('data-generation') !== generation) {
+                        parent.collapse();
+                        parent.setAttribute('hidden', 'hidden');
+                    }
+                }
+            }
+        }
+    }
+    // convert range map into a 1-dimensional array with no nulls so it can be given to
+    // #applyHighlights (and therefore CSS.highlights.set) more easily
+    const allRanges = Array.from(filterRangesCache.values())
+        .flat()
+        .filter(r => r !== null);
+    if (allRanges.length === 0 && query.length > 0) {
+        this.treeViewList.setAttribute('hidden', 'hidden');
+        this.noResultsMessage.removeAttribute('hidden');
+    }
+    else {
+        this.treeViewList.removeAttribute('hidden');
+        this.noResultsMessage.setAttribute('hidden', 'hidden');
+        __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyHighlights).call(this, allRanges);
+    }
+};
+_FilterableTreeViewElement_applyHighlights = function _FilterableTreeViewElement_applyHighlights(ranges) {
+    // Attempt to use the new-ish custom highlight API:
+    // https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API
+    if (CSS.highlights) {
+        CSS.highlights.set('primer-filterable-tree-view-search-results', new Highlight(...ranges));
+    }
+    else {
+        __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyManualHighlights).call(this, ranges);
+    }
+};
+_FilterableTreeViewElement_applyManualHighlights = function _FilterableTreeViewElement_applyManualHighlights(ranges) {
+    const textNode = ranges[0].startContainer;
+    const parent = textNode.parentNode;
+    const originalText = textNode.textContent;
+    const fragments = [];
+    let lastIndex = 0;
+    for (const { startOffset, endOffset } of ranges) {
+        // text before the highlight
+        if (startOffset > lastIndex) {
+            fragments.push(document.createTextNode(originalText.slice(lastIndex, startOffset)));
+        }
+        // highlighted text
+        const mark = document.createElement('mark');
+        mark.textContent = originalText.slice(startOffset, endOffset);
+        fragments.push(mark);
+        lastIndex = endOffset;
+    }
+    // remaining text after the last highlight
+    if (lastIndex < originalText.length) {
+        fragments.push(document.createTextNode(originalText.slice(lastIndex)));
+    }
+    // replace original text node with our text + <mark> elements
+    for (const frag of fragments.reverse()) {
+        parent.insertBefore(frag, textNode.nextSibling);
+    }
+    parent.removeChild(textNode);
+};
+_FilterableTreeViewElement_removeHighlights = function _FilterableTreeViewElement_removeHighlights() {
+    // quick-and-dirty way of ignoring any existing <mark> elements and restoring
+    // the original text
+    for (const mark of this.querySelectorAll('mark')) {
+        if (!mark.parentElement)
+            continue;
+        mark.parentElement.replaceChildren(mark.parentElement.textContent);
+    }
+};
+__decorate([
+    target
+], FilterableTreeViewElement.prototype, "filterInput", void 0);
+__decorate([
+    target
+], FilterableTreeViewElement.prototype, "filterModeControlList", void 0);
+__decorate([
+    target
+], FilterableTreeViewElement.prototype, "treeViewList", void 0);
+__decorate([
+    target
+], FilterableTreeViewElement.prototype, "noResultsMessage", void 0);
+__decorate([
+    target
+], FilterableTreeViewElement.prototype, "includeSubItemsCheckBox", void 0);
+FilterableTreeViewElement = __decorate([
+    controller
+], FilterableTreeViewElement);
+export { FilterableTreeViewElement };
+if (!window.customElements.get('filterable-tree-view')) {
+    window.FilterableTreeViewElement = FilterableTreeViewElement;
+    window.customElements.define('filterable-tree-view', FilterableTreeViewElement);
+}

package/app/components/primer/open_project/tree_view/tree_view.d.ts

@@ -1,10 +1,15 @@
-import { TreeViewSubTreeNodeElement } from './tree_view_sub_tree_node_element';
+import { SelectStrategy, TreeViewSubTreeNodeElement } from './tree_view_sub_tree_node_element';
 import type { TreeViewNodeType, TreeViewCheckedValue, TreeViewNodeInfo } from '../../shared_events';
 export declare class TreeViewElement extends HTMLElement {
     #private;
+    formInputContainer: HTMLElement;
+    formInputPrototype: HTMLInputElement;
     connectedCallback(): void;
+    rootLeafNodes(): NodeListOf<HTMLElement>;
+    rootSubTreeNodes(): NodeListOf<TreeViewSubTreeNodeElement>;
     disconnectedCallback(): void;
     handleEvent(event: Event): void;
+    getFormInputValueForNode(node: Element): string | null;
     getNodePath(node: Element): string[];
     getNodeType(node: Element): TreeViewNodeType | null;
     markCurrentAtPath(path: string[]): void;
@@ -16,13 +21,18 @@ export declare class TreeViewElement extends HTMLElement {
     uncheckAtPath(path: string[]): void;
     toggleCheckedAtPath(path: string[]): void;
     checkedValueAtPath(path: string[]): TreeViewCheckedValue;
+    disabledValueAtPath(path: string[]): boolean;
     nodeAtPath(path: string[], selector?: string): Element | null;
     subTreeAtPath(path: string[]): TreeViewSubTreeNodeElement | null;
     leafAtPath(path: string[]): HTMLLIElement | null;
+    setNodeCheckedValue(node: Element, value: TreeViewCheckedValue): void;
     getNodeCheckedValue(node: Element): TreeViewCheckedValue;
+    getNodeDisabledValue(node: Element): boolean;
+    setNodeDisabledValue(node: Element, disabled: boolean): void;
     nodeHasCheckBox(node: Element): boolean;
     nodeHasNativeAction(node: Element): boolean;
     expandAncestorsForNode(node: HTMLElement): void;
+    changeSelectStrategy(newStrategy: SelectStrategy): void;
     infoFromNode(node: Element, newCheckedValue?: TreeViewCheckedValue): TreeViewNodeInfo | null;
 }
 declare global {