openproject-primer_view_components 0.70.4 → 0.71.0

data/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 {

data/app/components/primer/open_project/tree_view/tree_view.js

@@ -15,8 +15,8 @@ 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 _TreeViewElement_instances, _TreeViewElement_abortController, _TreeViewElement_autoExpandFrom, _TreeViewElement_eventIsActivation, _TreeViewElement_nodeForEvent, _TreeViewElement_handleNodeEvent, _TreeViewElement_eventIsCheckboxToggle, _TreeViewElement_handleCheckboxToggle, _TreeViewElement_handleNodeActivated, _TreeViewElement_handleNodeFocused, _TreeViewElement_handleNodeKeyboardEvent, _TreeViewElement_setNodeCheckedValue;
-import { controller } from '@github/catalyst';
+var _TreeViewElement_instances, _TreeViewElement_abortController, _TreeViewElement_autoExpandFrom, _TreeViewElement_eventIsActivation, _TreeViewElement_nodeForEvent, _TreeViewElement_handleNodeEvent, _TreeViewElement_eventIsCheckboxToggle, _TreeViewElement_handleCheckboxToggle, _TreeViewElement_handleNodeActivated, _TreeViewElement_handleNodeFocused, _TreeViewElement_handleNodeKeyboardEvent;
+import { controller, target } from '@github/catalyst';
 import { useRovingTabIndex } from './tree_view_roving_tab_index';
 let TreeViewElement = class TreeViewElement extends HTMLElement {
     constructor() {
@@ -43,12 +43,53 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
                 }
             }
         }).observe(this, { childList: true, subtree: true });
+        const updateInputsObserver = new MutationObserver(mutations => {
+            if (!this.formInputContainer)
+                return;
+            // There is another MutationObserver in TreeViewSubTreeNodeElement that manages checking/unchecking
+            // nodes based on the component's select strategy. These two observers can conflict and cause infinite
+            // looping, so we make sure something actually changed before computing inputs again.
+            const somethingChanged = mutations.some(m => {
+                if (!(m.target instanceof HTMLElement))
+                    return false;
+                return m.target.getAttribute('aria-checked') !== m.oldValue;
+            });
+            if (!somethingChanged)
+                return;
+            const newInputs = [];
+            // eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
+            for (const node of this.querySelectorAll('[role=treeitem][aria-checked=true]')) {
+                const newInput = this.formInputPrototype.cloneNode();
+                newInput.removeAttribute('data-target');
+                newInput.removeAttribute('form');
+                const payload = {
+                    path: this.getNodePath(node),
+                };
+                const inputValue = this.getFormInputValueForNode(node);
+                if (inputValue)
+                    payload.value = inputValue;
+                newInput.value = JSON.stringify(payload);
+                newInputs.push(newInput);
+            }
+            this.formInputContainer.replaceChildren(...newInputs);
+        });
+        updateInputsObserver.observe(this, {
+            childList: true,
+            subtree: true,
+            attributeFilter: ['aria-checked'],
+        });
         // eslint-disable-next-line github/no-then -- We don't want to wait for this to resolve, just get on with it
         customElements.whenDefined('tree-view-sub-tree-node').then(() => {
             // depends on TreeViewSubTreeNodeElement#eachAncestorSubTreeNode, which may not be defined yet
             __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_autoExpandFrom).call(this, this);
         });
     }
+    rootLeafNodes() {
+        return this.querySelectorAll(':scope > ul > li > .TreeViewItemContainer [role=treeitem]');
+    }
+    rootSubTreeNodes() {
+        return this.querySelectorAll(':scope > ul > tree-view-sub-tree-node');
+    }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _TreeViewElement_abortController, "f").abort();
     }
@@ -58,6 +99,9 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
             __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleNodeEvent).call(this, node, event);
         }
     }
+    getFormInputValueForNode(node) {
+        return node.getAttribute('data-value');
+    }
     getNodePath(node) {
         const rawPath = node.getAttribute('data-path');
         if (rawPath) {
@@ -101,13 +145,13 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
         const node = this.nodeAtPath(path);
         if (!node)
             return;
-        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'true');
+        this.setNodeCheckedValue(node, 'true');
     }
     uncheckAtPath(path) {
         const node = this.nodeAtPath(path);
         if (!node)
             return;
-        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'false');
+        this.setNodeCheckedValue(node, 'false');
     }
     toggleCheckedAtPath(path) {
         const node = this.nodeAtPath(path);
@@ -128,6 +172,12 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
             return 'false';
         return this.getNodeCheckedValue(node);
     }
+    disabledValueAtPath(path) {
+        const node = this.nodeAtPath(path);
+        if (!node)
+            return false;
+        return this.getNodeDisabledValue(node);
+    }
     nodeAtPath(path, selector) {
         const pathStr = JSON.stringify(path);
         return this.querySelector(`${selector || ''}[data-path="${CSS.escape(pathStr)}"]`);
@@ -141,9 +191,23 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
     leafAtPath(path) {
         return this.nodeAtPath(path, '[data-node-type=leaf]');
     }
+    setNodeCheckedValue(node, value) {
+        node.setAttribute('aria-checked', value.toString());
+    }
     getNodeCheckedValue(node) {
         return (node.getAttribute('aria-checked') || 'false');
     }
+    getNodeDisabledValue(node) {
+        return node.getAttribute('aria-disabled') === 'true';
+    }
+    setNodeDisabledValue(node, disabled) {
+        if (disabled) {
+            node.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            node.removeAttribute('aria-disabled');
+        }
+    }
     nodeHasCheckBox(node) {
         return node.querySelector('.TreeViewItemCheckbox') !== null;
     }
@@ -160,6 +224,11 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
             }
         }
     }
+    changeSelectStrategy(newStrategy) {
+        for (const subTreeNode of this.querySelectorAll('tree-view-sub-tree-node')) {
+            subTreeNode.changeSelectStrategy(newStrategy);
+        }
+    }
     // PRIVATE API METHOD
     //
     // This would normally be marked private, but it's called by TreeViewSubTreeNodes
@@ -189,22 +258,22 @@ _TreeViewElement_eventIsActivation = function _TreeViewElement_eventIsActivation
     return event.type === 'click';
 };
 _TreeViewElement_nodeForEvent = function _TreeViewElement_nodeForEvent(event) {
-    const target = event.target;
-    const node = target.closest('[role=treeitem]');
+    const eventTarget = event.target;
+    const node = eventTarget.closest('[role=treeitem]');
     if (!node)
         return null;
-    if (target.closest('.TreeViewItemToggle'))
+    if (eventTarget.closest('.TreeViewItemToggle'))
         return null;
-    if (target.closest('.TreeViewItemLeadingAction'))
+    if (eventTarget.closest('.TreeViewItemLeadingAction'))
         return null;
     return node;
 };
 _TreeViewElement_handleNodeEvent = function _TreeViewElement_handleNodeEvent(node, event) {
     if (__classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_eventIsCheckboxToggle).call(this, event, node)) {
-        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleCheckboxToggle).call(this, node);
+        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleCheckboxToggle).call(this, event, node);
     }
     else if (__classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_eventIsActivation).call(this, event)) {
-        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleNodeActivated).call(this, node);
+        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleNodeActivated).call(this, event, node);
     }
     else if (event.type === 'focusin') {
         __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleNodeFocused).call(this, node);
@@ -216,19 +285,43 @@ _TreeViewElement_handleNodeEvent = function _TreeViewElement_handleNodeEvent(nod
 _TreeViewElement_eventIsCheckboxToggle = function _TreeViewElement_eventIsCheckboxToggle(event, node) {
     return event.type === 'click' && this.nodeHasCheckBox(node);
 };
-_TreeViewElement_handleCheckboxToggle = function _TreeViewElement_handleCheckboxToggle(node) {
-    // only handle checking of leaf nodes
+_TreeViewElement_handleCheckboxToggle = function _TreeViewElement_handleCheckboxToggle(event, node) {
+    if (this.getNodeDisabledValue(node)) {
+        event.preventDefault();
+        return;
+    }
+    // only handle checking of leaf nodes, see TreeViewSubTreeNodeElement for the code that
+    // handles checking sub tree items.
     const type = this.getNodeType(node);
     if (type !== 'leaf')
         return;
+    const checkValue = this.getNodeCheckedValue(node);
+    const newCheckValue = checkValue === 'false' ? 'true' : 'false';
+    const nodeInfo = this.infoFromNode(node, newCheckValue);
+    const checkSuccess = this.dispatchEvent(new CustomEvent('treeViewBeforeNodeChecked', {
+        bubbles: true,
+        cancelable: true,
+        detail: [nodeInfo],
+    }));
+    if (!checkSuccess)
+        return;
     if (this.getNodeCheckedValue(node) === 'true') {
-        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'false');
+        this.setNodeCheckedValue(node, 'false');
     }
     else {
-        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'true');
+        this.setNodeCheckedValue(node, 'true');
     }
+    this.dispatchEvent(new CustomEvent('treeViewNodeChecked', {
+        bubbles: true,
+        cancelable: true,
+        detail: [nodeInfo],
+    }));
 };
-_TreeViewElement_handleNodeActivated = function _TreeViewElement_handleNodeActivated(node) {
+_TreeViewElement_handleNodeActivated = function _TreeViewElement_handleNodeActivated(event, node) {
+    if (this.getNodeDisabledValue(node)) {
+        event.preventDefault();
+        return;
+    }
     // do not emit activation events for buttons and anchors, since it is assumed any activation
     // behavior for these element types is user- or browser-defined
     if (!(node instanceof HTMLDivElement))
@@ -262,13 +355,17 @@ _TreeViewElement_handleNodeKeyboardEvent = function _TreeViewElement_handleNodeK
     switch (event.key) {
         case ' ':
         case 'Enter':
+            if (this.getNodeDisabledValue(node)) {
+                event.preventDefault();
+                break;
+            }
             if (this.nodeHasCheckBox(node)) {
                 event.preventDefault();
                 if (this.getNodeCheckedValue(node) === 'true') {
-                    __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'false');
+                    this.setNodeCheckedValue(node, 'false');
                 }
                 else {
-                    __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'true');
+                    this.setNodeCheckedValue(node, 'true');
                 }
             }
             else if (node instanceof HTMLAnchorElement) {
@@ -278,9 +375,12 @@ _TreeViewElement_handleNodeKeyboardEvent = function _TreeViewElement_handleNodeK
             break;
     }
 };
-_TreeViewElement_setNodeCheckedValue = function _TreeViewElement_setNodeCheckedValue(node, value) {
-    node.setAttribute('aria-checked', value.toString());
-};
+__decorate([
+    target
+], TreeViewElement.prototype, "formInputContainer", void 0);
+__decorate([
+    target
+], TreeViewElement.prototype, "formInputPrototype", void 0);
 TreeViewElement = __decorate([
     controller
 ], TreeViewElement);

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

@@ -1,10 +1,13 @@
-import {controller} from '@github/catalyst'
-import {TreeViewSubTreeNodeElement} from './tree_view_sub_tree_node_element'
+import {controller, target} from '@github/catalyst'
+import {SelectStrategy, TreeViewSubTreeNodeElement} from './tree_view_sub_tree_node_element'
 import {useRovingTabIndex} from './tree_view_roving_tab_index'
 import type {TreeViewNodeType, TreeViewCheckedValue, TreeViewNodeInfo} from '../../shared_events'
 
 @controller
 export class TreeViewElement extends HTMLElement {
+  @target formInputContainer: HTMLElement
+  @target formInputPrototype: HTMLInputElement
+
   #abortController: AbortController
 
   connectedCallback() {
@@ -29,6 +32,47 @@ export class TreeViewElement extends HTMLElement {
       }
     }).observe(this, {childList: true, subtree: true})
 
+    const updateInputsObserver = new MutationObserver(mutations => {
+      if (!this.formInputContainer) return
+
+      // There is another MutationObserver in TreeViewSubTreeNodeElement that manages checking/unchecking
+      // nodes based on the component's select strategy. These two observers can conflict and cause infinite
+      // looping, so we make sure something actually changed before computing inputs again.
+      const somethingChanged = mutations.some(m => {
+        if (!(m.target instanceof HTMLElement)) return false
+        return m.target.getAttribute('aria-checked') !== m.oldValue
+      })
+
+      if (!somethingChanged) return
+
+      const newInputs = []
+
+      // eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
+      for (const node of this.querySelectorAll('[role=treeitem][aria-checked=true]')) {
+        const newInput = this.formInputPrototype.cloneNode() as HTMLInputElement
+        newInput.removeAttribute('data-target')
+        newInput.removeAttribute('form')
+
+        const payload: {path: string[]; value?: string} = {
+          path: this.getNodePath(node),
+        }
+
+        const inputValue = this.getFormInputValueForNode(node)
+        if (inputValue) payload.value = inputValue
+
+        newInput.value = JSON.stringify(payload)
+        newInputs.push(newInput)
+      }
+
+      this.formInputContainer.replaceChildren(...newInputs)
+    })
+
+    updateInputsObserver.observe(this, {
+      childList: true,
+      subtree: true,
+      attributeFilter: ['aria-checked'],
+    })
+
     // eslint-disable-next-line github/no-then -- We don't want to wait for this to resolve, just get on with it
     customElements.whenDefined('tree-view-sub-tree-node').then(() => {
       // depends on TreeViewSubTreeNodeElement#eachAncestorSubTreeNode, which may not be defined yet
@@ -36,6 +80,14 @@ export class TreeViewElement extends HTMLElement {
     })
   }
 
+  rootLeafNodes(): NodeListOf<HTMLElement> {
+    return this.querySelectorAll(':scope > ul > li > .TreeViewItemContainer [role=treeitem]')
+  }
+
+  rootSubTreeNodes(): NodeListOf<TreeViewSubTreeNodeElement> {
+    return this.querySelectorAll(':scope > ul > tree-view-sub-tree-node')
+  }
+
   #autoExpandFrom(root: HTMLElement) {
     for (const element of root.querySelectorAll('[aria-expanded=true]')) {
       this.expandAncestorsForNode(element as HTMLElement)
@@ -59,21 +111,21 @@ export class TreeViewElement extends HTMLElement {
   }
 
   #nodeForEvent(event: Event): Element | null {
-    const target = event.target as Element
-    const node = target.closest('[role=treeitem]')
+    const eventTarget = event.target as Element
+    const node = eventTarget.closest('[role=treeitem]')
     if (!node) return null
 
-    if (target.closest('.TreeViewItemToggle')) return null
-    if (target.closest('.TreeViewItemLeadingAction')) return null
+    if (eventTarget.closest('.TreeViewItemToggle')) return null
+    if (eventTarget.closest('.TreeViewItemLeadingAction')) return null
 
     return node
   }
 
   #handleNodeEvent(node: Element, event: Event) {
     if (this.#eventIsCheckboxToggle(event, node)) {
-      this.#handleCheckboxToggle(node)
+      this.#handleCheckboxToggle(event, node)
     } else if (this.#eventIsActivation(event)) {
-      this.#handleNodeActivated(node)
+      this.#handleNodeActivated(event, node)
     } else if (event.type === 'focusin') {
       this.#handleNodeFocused(node)
     } else if (event instanceof KeyboardEvent) {
@@ -85,19 +137,52 @@ export class TreeViewElement extends HTMLElement {
     return event.type === 'click' && this.nodeHasCheckBox(node)
   }
 
-  #handleCheckboxToggle(node: Element) {
-    // only handle checking of leaf nodes
+  #handleCheckboxToggle(event: Event, node: Element) {
+    if (this.getNodeDisabledValue(node)) {
+      event.preventDefault()
+      return
+    }
+
+    // only handle checking of leaf nodes, see TreeViewSubTreeNodeElement for the code that
+    // handles checking sub tree items.
     const type = this.getNodeType(node)
     if (type !== 'leaf') return
 
+    const checkValue = this.getNodeCheckedValue(node)
+    const newCheckValue = checkValue === 'false' ? 'true' : 'false'
+    const nodeInfo = this.infoFromNode(node, newCheckValue)
+
+    const checkSuccess = this.dispatchEvent(
+      new CustomEvent('treeViewBeforeNodeChecked', {
+        bubbles: true,
+        cancelable: true,
+        detail: [nodeInfo],
+      }),
+    )
+
+    if (!checkSuccess) return
+
     if (this.getNodeCheckedValue(node) === 'true') {
-      this.#setNodeCheckedValue(node, 'false')
+      this.setNodeCheckedValue(node, 'false')
     } else {
-      this.#setNodeCheckedValue(node, 'true')
+      this.setNodeCheckedValue(node, 'true')
     }
+
+    this.dispatchEvent(
+      new CustomEvent('treeViewNodeChecked', {
+        bubbles: true,
+        cancelable: true,
+        detail: [nodeInfo],
+      }),
+    )
   }
 
-  #handleNodeActivated(node: Element) {
+  #handleNodeActivated(event: Event, node: Element) {
+    if (this.getNodeDisabledValue(node)) {
+      event.preventDefault()
+      return
+    }
+
     // do not emit activation events for buttons and anchors, since it is assumed any activation
     // behavior for these element types is user- or browser-defined
     if (!(node instanceof HTMLDivElement)) return
@@ -141,13 +226,18 @@ export class TreeViewElement extends HTMLElement {
     switch (event.key) {
       case ' ':
       case 'Enter':
+        if (this.getNodeDisabledValue(node)) {
+          event.preventDefault()
+          break
+        }
+
         if (this.nodeHasCheckBox(node)) {
           event.preventDefault()
 
           if (this.getNodeCheckedValue(node) === 'true') {
-            this.#setNodeCheckedValue(node, 'false')
+            this.setNodeCheckedValue(node, 'false')
           } else {
-            this.#setNodeCheckedValue(node, 'true')
+            this.setNodeCheckedValue(node, 'true')
           }
         } else if (node instanceof HTMLAnchorElement) {
           // simulate click on space
@@ -158,6 +248,10 @@ export class TreeViewElement extends HTMLElement {
     }
   }
 
+  getFormInputValueForNode(node: Element): string | null {
+    return node.getAttribute('data-value')
+  }
+
   getNodePath(node: Element): string[] {
     const rawPath = node.getAttribute('data-path')
 
@@ -210,14 +304,14 @@ export class TreeViewElement extends HTMLElement {
     const node = this.nodeAtPath(path)
     if (!node) return
 
-    this.#setNodeCheckedValue(node, 'true')
+    this.setNodeCheckedValue(node, 'true')
   }
 
   uncheckAtPath(path: string[]) {
     const node = this.nodeAtPath(path)
     if (!node) return
 
-    this.#setNodeCheckedValue(node, 'false')
+    this.setNodeCheckedValue(node, 'false')
   }
 
   toggleCheckedAtPath(path: string[]) {
@@ -240,6 +334,13 @@ export class TreeViewElement extends HTMLElement {
     return this.getNodeCheckedValue(node)
   }
 
+  disabledValueAtPath(path: string[]): boolean {
+    const node = this.nodeAtPath(path)
+    if (!node) return false
+
+    return this.getNodeDisabledValue(node)
+  }
+
   nodeAtPath(path: string[], selector?: string): Element | null {
     const pathStr = JSON.stringify(path)
     return this.querySelector(`${selector || ''}[data-path="${CSS.escape(pathStr)}"]`)
@@ -256,7 +357,7 @@ export class TreeViewElement extends HTMLElement {
     return this.nodeAtPath(path, '[data-node-type=leaf]') as HTMLLIElement | null
   }
 
-  #setNodeCheckedValue(node: Element, value: TreeViewCheckedValue) {
+  setNodeCheckedValue(node: Element, value: TreeViewCheckedValue) {
     node.setAttribute('aria-checked', value.toString())
   }
 
@@ -264,6 +365,18 @@ export class TreeViewElement extends HTMLElement {
     return (node.getAttribute('aria-checked') || 'false') as TreeViewCheckedValue
   }
 
+  getNodeDisabledValue(node: Element): boolean {
+    return node.getAttribute('aria-disabled') === 'true'
+  }
+
+  setNodeDisabledValue(node: Element, disabled: boolean) {
+    if (disabled) {
+      node.setAttribute('aria-disabled', 'true')
+    } else {
+      node.removeAttribute('aria-disabled')
+    }
+  }
+
   nodeHasCheckBox(node: Element): boolean {
     return node.querySelector('.TreeViewItemCheckbox') !== null
   }
@@ -283,6 +396,12 @@ export class TreeViewElement extends HTMLElement {
     }
   }
 
+  changeSelectStrategy(newStrategy: SelectStrategy) {
+    for (const subTreeNode of this.querySelectorAll<TreeViewSubTreeNodeElement>('tree-view-sub-tree-node')) {
+      subTreeNode.changeSelectStrategy(newStrategy)
+    }
+  }
+
   // PRIVATE API METHOD
   //
   // This would normally be marked private, but it's called by TreeViewSubTreeNodes

data/app/components/primer/open_project/tree_view/tree_view_sub_tree_node_element.d.ts

@@ -2,6 +2,7 @@ import { TreeViewIconPairElement } from './tree_view_icon_pair_element';
 import { TreeViewIncludeFragmentElement } from './tree_view_include_fragment_element';
 import { TreeViewElement } from './tree_view';
 type LoadingState = 'loading' | 'error' | 'success';
+export type SelectStrategy = 'self' | 'descendants' | 'mixed_descendants';
 export declare class TreeViewSubTreeNodeElement extends HTMLElement {
     #private;
     node: HTMLElement;
@@ -19,7 +20,8 @@ export declare class TreeViewSubTreeNodeElement extends HTMLElement {
     set expanded(newValue: boolean);
     get loadingState(): LoadingState;
     set loadingState(newState: LoadingState);
-    get selectStrategy(): string;
+    get selectStrategy(): SelectStrategy;
+    get level(): number;
     disconnectedCallback(): void;
     handleEvent(event: Event): void;
     expand(): void;
@@ -27,11 +29,13 @@ export declare class TreeViewSubTreeNodeElement extends HTMLElement {
     toggle(): void;
     get nodes(): NodeListOf<Element>;
     eachDirectDescendantNode(): Generator<Element>;
+    eachDirectDescendantSubTreeNode(): Generator<TreeViewSubTreeNodeElement>;
     eachDescendantNode(): Generator<Element>;
     eachAncestorSubTreeNode(): Generator<TreeViewSubTreeNodeElement>;
     get isEmpty(): boolean;
     get treeView(): TreeViewElement | null;
     toggleChecked(): void;
+    changeSelectStrategy(newStrategy: SelectStrategy): void;
 }
 declare global {
     interface Window {

data/app/components/primer/open_project/tree_view/tree_view_sub_tree_node_element.js

@@ -48,7 +48,7 @@ let TreeViewSubTreeNodeElement = class TreeViewSubTreeNodeElement extends HTMLEl
             }, { signal });
         });
         const checkedMutationObserver = new MutationObserver(() => {
-            if (this.selectStrategy !== 'descendants')
+            if (this.selectStrategy !== 'mixed_descendants')
                 return;
             let checkType = 'unknown';
             for (const node of this.eachDirectDescendantNode()) {
@@ -95,7 +95,10 @@ let TreeViewSubTreeNodeElement = class TreeViewSubTreeNodeElement extends HTMLEl
         __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_update).call(this);
     }
     get selectStrategy() {
-        return this.node.getAttribute('data-select-strategy') || 'descendants';
+        return (this.node.getAttribute('data-select-strategy') || 'descendants');
+    }
+    get level() {
+        return parseInt(this.node.getAttribute('aria-level') || '0');
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_abortController, "f").abort();
@@ -160,6 +163,11 @@ let TreeViewSubTreeNodeElement = class TreeViewSubTreeNodeElement extends HTMLEl
             yield subTree;
         }
     }
+    *eachDirectDescendantSubTreeNode() {
+        for (const subTree of this.subTree.querySelectorAll(':scope > tree-view-sub-tree-node')) {
+            yield subTree;
+        }
+    }
     *eachDescendantNode() {
         for (const node of this.subTree.querySelectorAll('[role=treeitem]')) {
             yield node;
@@ -182,13 +190,13 @@ let TreeViewSubTreeNodeElement = class TreeViewSubTreeNodeElement extends HTMLEl
         return this.closest('tree-view');
     }
     toggleChecked() {
-        const checkValue = this.node.getAttribute('aria-checked') || 'false';
+        const checkValue = this.treeView?.getNodeCheckedValue(this.node) || 'false';
         const newCheckValue = checkValue === 'false' ? 'true' : 'false';
         const nodeInfos = [];
         const rootInfo = this.treeView?.infoFromNode(this.node, newCheckValue);
         if (rootInfo)
             nodeInfos.push(rootInfo);
-        if (this.selectStrategy === 'descendants') {
+        if (this.selectStrategy === 'descendants' || this.selectStrategy === 'mixed_descendants') {
             for (const node of this.eachDescendantNode()) {
                 const info = this.treeView?.infoFromNode(node, newCheckValue);
                 if (info)
@@ -211,6 +219,9 @@ let TreeViewSubTreeNodeElement = class TreeViewSubTreeNodeElement extends HTMLEl
             detail: nodeInfos,
         }));
     }
+    changeSelectStrategy(newStrategy) {
+        this.node.setAttribute('data-select-strategy', newStrategy);
+    }
 };
 _TreeViewSubTreeNodeElement_expanded = new WeakMap();
 _TreeViewSubTreeNodeElement_loadingState = new WeakMap();
@@ -269,6 +280,10 @@ _TreeViewSubTreeNodeElement_handleKeyboardEvent = function _TreeViewSubTreeNodeE
     }
     switch (event.key) {
         case 'Enter':
+            if (this.treeView?.getNodeDisabledValue(node)) {
+                event.preventDefault();
+                break;
+            }
             // eslint-disable-next-line no-restricted-syntax
             event.stopPropagation();
             if (__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "a", _TreeViewSubTreeNodeElement_checkboxElement_get)) {
@@ -290,6 +305,10 @@ _TreeViewSubTreeNodeElement_handleKeyboardEvent = function _TreeViewSubTreeNodeE
             this.collapse();
             break;
         case ' ':
+            if (this.treeView?.getNodeDisabledValue(node)) {
+                event.preventDefault();
+                break;
+            }
             if (__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "a", _TreeViewSubTreeNodeElement_checkboxElement_get)) {
                 // eslint-disable-next-line no-restricted-syntax
                 event.stopPropagation();
@@ -309,6 +328,10 @@ _TreeViewSubTreeNodeElement_handleKeyboardEvent = function _TreeViewSubTreeNodeE
     }
 };
 _TreeViewSubTreeNodeElement_handleCheckboxEvent = function _TreeViewSubTreeNodeElement_handleCheckboxEvent(event) {
+    if (this.treeView?.getNodeDisabledValue(this.node)) {
+        event.preventDefault();
+        return;
+    }
     if (event.type !== 'click')
         return;
     this.toggleChecked();