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

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

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

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

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

@@ -1 +1 @@
-.TreeViewRootUlStyles{list-style:none;margin:0;padding:0}.TreeViewRootUlStyles .TreeViewItem{outline:none}:is(.TreeViewRootUlStyles .TreeViewItem):focus-visible>div{box-shadow:var(--boxShadow-thick) var(--fgColor-accent)}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItem):focus-visible>div{outline:2px solid HighlightText;outline-offset:-2}}[data-has-leading-action]:is(.TreeViewRootUlStyles .TreeViewItem){--has-leading-action:1}.TreeViewRootUlStyles .TreeViewItemContainer{--level:1;--toggle-width:1rem;--min-item-height:2rem;border-radius:var(--borderRadius-medium);color:var(--fgColor-default);display:grid;font-size:var(--text-body-size-medium);grid-template-areas:"spacer leadingAction toggle content";grid-template-columns:var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;position:relative;width:100%;--leading-action-width:calc(var(--has-leading-action, 0)*1.5rem);--spacer-width:calc((var(--level) - 1)*(var(--toggle-width)/2))}:is(.TreeViewRootUlStyles .TreeViewItemContainer):hover{background-color:var(--control-transparent-bgColor-hover)}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItemContainer):hover{outline:2px solid #0000;outline-offset:-2px}}@media (pointer:coarse){.TreeViewRootUlStyles .TreeViewItemContainer{--toggle-width:1.5rem;--min-item-height:2.75rem}}:is(.TreeViewRootUlStyles .TreeViewItemContainer):has(.TreeViewFailureMessage):hover{background-color:initial;cursor:default}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItemContainer):has(.TreeViewFailureMessage):hover{outline:none}}:is(.TreeViewRootUlStyles .TreeViewItemContainer):has([role=treeitem]:focus-visible){box-shadow:var(--boxShadow-thick) var(--fgColor-accent)}.TreeViewRootUlStyles:where([data-omit-spacer=true]) .TreeViewItemContainer{grid-template-columns:0 0 0 1fr}.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true]){background-color:var(--control-transparent-bgColor-selected)}:is(.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true])):after{background-color:var(--fgColor-accent);border-radius:var(--borderRadius-medium);content:"";height:1.5rem;left:calc(var(--base-size-8)*-1);position:absolute;top:calc(50% - var(--base-size-12));width:.25rem}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true])):after{background-color:HighlightText}}.TreeViewRootUlStyles .TreeViewItemToggle{align-items:flex-start;color:var(--fgColor-muted);cursor:pointer;display:flex;grid-area:toggle;height:100%;justify-content:center;padding-top:calc(var(--min-item-height)/2 - var(--base-size-12)/2)}.TreeViewRootUlStyles .TreeViewItemToggleHover:hover{background-color:var(--control-transparent-bgColor-hover)}.TreeViewRootUlStyles .TreeViewItemToggleEnd{border-bottom-left-radius:var(--borderRadius-medium);border-top-left-radius:var(--borderRadius-medium)}.TreeViewRootUlStyles a.TreeViewItemContent:hover,.TreeViewRootUlStyles button.TreeViewItemContent:hover{-webkit-text-decoration:underline;text-decoration:underline;text-decoration-color:var(--control-fgColor-rest)}.TreeViewRootUlStyles .TreeViewItemContent{cursor:pointer;display:flex;gap:var(--stack-gap-condensed);grid-area:content;height:100%;line-height:var(--custom-line-height,var(--text-body-lineHeight-medium,1.4285));outline:none;padding:0 var(--base-size-8);padding-bottom:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2);padding-top:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2)}.TreeViewRootUlStyles .TreeViewItemContent,:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemCheckbox{background-color:initial;border:none;text-align:left;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemCheckbox{border-radius:var(--borderRadius-medium);color:var(--control-fgColor-rest);position:relative;transition:background 33.333ms linear}[aria-checked=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox{background:var(--control-checked-bgColor-rest);border-color:var(--control-checked-borderColor-rest);transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0s}:is([aria-checked=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards;transition:visibility 0s linear 0s;visibility:visible}[aria-checked=mixed]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox{background:var(--control-checked-bgColor-rest);border-color:var(--control-checked-borderColor-rest);transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0s}:is([aria-checked=mixed]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards;clip-path:none;mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgMiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAxIDEgMCAySDFhMSAxIDAgMCAxLTEtMSIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");visibility:visible}.TreeViewRootUlStyles .TreeViewItemContentText{color:var(--control-fgColor-rest);flex:1 1 auto;width:0}.TreeViewRootUlStyles:where([data-truncate-text=true]) .TreeViewItemContentText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.TreeViewRootUlStyles:where([data-truncate-text=false]) .TreeViewItemContentText{word-break:break-word}.TreeViewRootUlStyles .TreeViewItemVisual{align-items:center;color:var(--fgColor-muted);display:flex;height:var(--custom-line-height,1.3rem)}.TreeViewRootUlStyles .TreeViewItemLeadingAction{color:var(--fgColor-muted);display:flex;grid-area:leadingAction}:is(.TreeViewRootUlStyles .TreeViewItemLeadingAction)>button{flex-shrink:1}.TreeViewRootUlStyles .TreeViewItemLevelLine{border-color:var(--borderColor-muted);border-right:var(--borderWidth-thin) solid;height:100%;width:100%}@media (hover:hover){.TreeViewRootUlStyles .TreeViewItemLevelLine{border-color:#0000}.TreeViewRootUlStyles:focus-within .TreeViewItemLevelLine,.TreeViewRootUlStyles:hover .TreeViewItemLevelLine{border-color:var(--borderColor-muted)}}.TreeViewRootUlStyles .TreeViewVisuallyHidden{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.TreeViewSkeletonItemContainerStyle{align-items:center;column-gap:.5rem;display:flex;height:2rem}@media (pointer:coarse){.TreeViewSkeletonItemContainerStyle{height:2.75rem}}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+1){--tree-item-loading-width:67%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+2){--tree-item-loading-width:47%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+3){--tree-item-loading-width:73%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+4){--tree-item-loading-width:64%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+5){--tree-item-loading-width:50%}.TreeItemSkeletonTextStyles{width:var(--tree-item-loading-width,67%)}.TreeViewFailureMessage{align-items:center;display:grid;gap:.5rem;grid-template-columns:auto 1fr;width:100%}
+.TreeViewRootUlStyles{list-style:none;margin:0;padding:0}.TreeViewRootUlStyles .TreeViewItem{outline:none}:is(.TreeViewRootUlStyles .TreeViewItem):focus-visible>div{box-shadow:var(--boxShadow-thick) var(--fgColor-accent)}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItem):focus-visible>div{outline:2px solid HighlightText;outline-offset:-2}}[data-has-leading-action]:is(.TreeViewRootUlStyles .TreeViewItem){--has-leading-action:1}.TreeViewRootUlStyles .TreeViewItemContainer{--level:1;--toggle-width:1rem;--min-item-height:2rem;border-radius:var(--borderRadius-medium);color:var(--fgColor-default);display:grid;font-size:var(--text-body-size-medium);grid-template-areas:"spacer leadingAction toggle content";grid-template-columns:var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;position:relative;width:100%;--leading-action-width:calc(var(--has-leading-action, 0)*1.5rem);--spacer-width:calc((var(--level) - 1)*(var(--toggle-width)/2))}:is(.TreeViewRootUlStyles .TreeViewItemContainer):hover{background-color:var(--control-transparent-bgColor-hover)}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItemContainer):hover{outline:2px solid #0000;outline-offset:-2px}}@media (pointer:coarse){.TreeViewRootUlStyles .TreeViewItemContainer{--toggle-width:1.5rem;--min-item-height:2.75rem}}:is(.TreeViewRootUlStyles .TreeViewItemContainer):has(.TreeViewFailureMessage):hover{background-color:initial;cursor:default}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItemContainer):has(.TreeViewFailureMessage):hover{outline:none}}:is(.TreeViewRootUlStyles .TreeViewItemContainer):has([role=treeitem]:focus-visible){box-shadow:var(--boxShadow-thick) var(--fgColor-accent)}.TreeViewRootUlStyles:where([data-omit-spacer=true]) .TreeViewItemContainer{grid-template-columns:0 0 0 1fr}.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true]){background-color:var(--control-transparent-bgColor-selected)}:is(.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true])):after{background-color:var(--fgColor-accent);border-radius:var(--borderRadius-medium);content:"";height:1.5rem;left:calc(var(--base-size-8)*-1);position:absolute;top:calc(50% - var(--base-size-12));width:.25rem}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true])):after{background-color:HighlightText}}.TreeViewRootUlStyles .TreeViewItemToggle{align-items:flex-start;color:var(--fgColor-muted);cursor:pointer;display:flex;grid-area:toggle;height:100%;justify-content:center;padding-top:calc(var(--min-item-height)/2 - var(--base-size-12)/2)}.TreeViewRootUlStyles .TreeViewItemToggleHover:hover{background-color:var(--control-transparent-bgColor-hover)}.TreeViewRootUlStyles .TreeViewItemToggleEnd{border-bottom-left-radius:var(--borderRadius-medium);border-top-left-radius:var(--borderRadius-medium)}.TreeViewRootUlStyles a.TreeViewItemContent:hover,.TreeViewRootUlStyles button.TreeViewItemContent:hover{-webkit-text-decoration:underline;text-decoration:underline;text-decoration-color:var(--control-fgColor-rest)}.TreeViewRootUlStyles :has(.TreeViewItemContent[aria-disabled=true]){cursor:not-allowed}.TreeViewRootUlStyles .TreeViewItemContent{cursor:pointer;display:flex;gap:var(--stack-gap-condensed);grid-area:content;height:100%;line-height:var(--custom-line-height,var(--text-body-lineHeight-medium,1.4285));outline:none;padding:0 var(--base-size-8);padding-bottom:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2);padding-top:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2)}.TreeViewRootUlStyles .TreeViewItemContent,:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemCheckbox{background-color:initial;border:none;text-align:left;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemCheckbox{border-radius:var(--borderRadius-medium);color:var(--control-fgColor-rest);position:relative;transition:background 33.333ms linear}[aria-checked=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox{background:var(--control-checked-bgColor-rest);border-color:var(--control-checked-borderColor-rest);transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0s}:is([aria-checked=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards;transition:visibility 0s linear 0s;visibility:visible}[aria-checked=mixed]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox{background:var(--control-checked-bgColor-rest);border-color:var(--control-checked-borderColor-rest);transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0s}:is([aria-checked=mixed]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards;clip-path:none;mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgMiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAxIDEgMCAySDFhMSAxIDAgMCAxLTEtMSIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");visibility:visible}[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent){pointer-events:none}[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemContentText{color:var(--control-fgColor-disabled)}:is([aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemVisual) svg,[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemVisual{fill:var(--control-fgColor-disabled)}@media (hover:hover){:is([aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):hover{cursor:not-allowed}[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent):hover{background-color:initial;cursor:not-allowed}}:is(.TreeViewRootUlStyles .TreeViewItemContent) ::highlight(primer-filterable-tree-view-search-results){background-color:var(--label-yellow-bgColor-active);color:var(--fgColor-default)}:is(.TreeViewRootUlStyles .TreeViewItemContent) mark{background-color:var(--label-yellow-bgColor-active);color:var(--fgColor-default)}.TreeViewRootUlStyles .TreeViewItemContentText{color:var(--control-fgColor-rest);flex:1 1 auto;-webkit-user-select:auto;width:0}.TreeViewRootUlStyles:where([data-truncate-text=true]) .TreeViewItemContentText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.TreeViewRootUlStyles:where([data-truncate-text=false]) .TreeViewItemContentText{word-break:break-word}.TreeViewRootUlStyles .TreeViewItemVisual{align-items:center;color:var(--fgColor-muted);display:flex;height:var(--custom-line-height,1.3rem)}.TreeViewRootUlStyles .TreeViewItemLeadingAction{color:var(--fgColor-muted);display:flex;grid-area:leadingAction}:is(.TreeViewRootUlStyles .TreeViewItemLeadingAction)>button{flex-shrink:1}.TreeViewRootUlStyles .TreeViewItemLevelLine{border-color:var(--borderColor-muted);border-right:var(--borderWidth-thin) solid;height:100%;width:100%}@media (hover:hover){.TreeViewRootUlStyles .TreeViewItemLevelLine{border-color:#0000}.TreeViewRootUlStyles:focus-within .TreeViewItemLevelLine,.TreeViewRootUlStyles:hover .TreeViewItemLevelLine{border-color:var(--borderColor-muted)}}.TreeViewRootUlStyles .TreeViewVisuallyHidden{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.TreeViewSkeletonItemContainerStyle{align-items:center;column-gap:.5rem;display:flex;height:2rem}@media (pointer:coarse){.TreeViewSkeletonItemContainerStyle{height:2.75rem}}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+1){--tree-item-loading-width:67%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+2){--tree-item-loading-width:47%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+3){--tree-item-loading-width:73%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+4){--tree-item-loading-width:64%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+5){--tree-item-loading-width:50%}.TreeItemSkeletonTextStyles{width:var(--tree-item-loading-width,67%)}.TreeViewFailureMessage{align-items:center;display:grid;gap:.5rem;grid-template-columns:auto 1fr;width:100%}

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

@@ -17,12 +17,21 @@
     ".TreeViewRootUlStyles .TreeViewItemToggleEnd",
     ".TreeViewRootUlStyles a.TreeViewItemContent:hover",
     ".TreeViewRootUlStyles button.TreeViewItemContent:hover",
+    ".TreeViewRootUlStyles :has(.TreeViewItemContent[aria-disabled=true])",
     ".TreeViewRootUlStyles .TreeViewItemContent",
     ":is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemCheckbox",
     "[aria-checked=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox",
     ":is([aria-checked=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):before",
     "[aria-checked=mixed]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox",
     ":is([aria-checked=mixed]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):before",
+    "[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent)",
+    "[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemContentText",
+    ":is([aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemVisual) svg",
+    "[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemVisual",
+    ":is([aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):hover",
+    "[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent):hover",
+    ":is(.TreeViewRootUlStyles .TreeViewItemContent) ::highlight(primer-filterable-tree-view-search-results)",
+    ":is(.TreeViewRootUlStyles .TreeViewItemContent) mark",
     ".TreeViewRootUlStyles .TreeViewItemContentText",
     ".TreeViewRootUlStyles:where([data-truncate-text=true]) .TreeViewItemContentText",
     ".TreeViewRootUlStyles:where([data-truncate-text=false]) .TreeViewItemContentText",

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

@@ -37,3 +37,4 @@ import './open_project/tree_view/tree_view';
 import './open_project/tree_view/tree_view_icon_pair_element';
 import './open_project/tree_view/tree_view_sub_tree_node_element';
 import './open_project/tree_view/tree_view_include_fragment_element';
+import './open_project/filterable_tree_view';

package/app/components/primer/primer.js

@@ -37,3 +37,4 @@ import './open_project/tree_view/tree_view';
 import './open_project/tree_view/tree_view_icon_pair_element';
 import './open_project/tree_view/tree_view_sub_tree_node_element';
 import './open_project/tree_view/tree_view_include_fragment_element';
+import './open_project/filterable_tree_view';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.70.5",
+  "version": "0.71.0-rc.5dc134b91",
   "description": "ViewComponents of the Primer Design System for OpenProject",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",