openproject-primer_view_components 0.66.1 → 0.67.0

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

@@ -15,19 +15,19 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     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 _TreeViewSubTreeNodeElement_instances, _TreeViewSubTreeNodeElement_abortController, _TreeViewSubTreeNodeElement_activeElementIsLoader, _TreeViewSubTreeNodeElement_handleToggleEvent, _TreeViewSubTreeNodeElement_handleIncludeFragmentEvent, _TreeViewSubTreeNodeElement_handleRetryButtonEvent, _TreeViewSubTreeNodeElement_handleKeyboardEvent, _TreeViewSubTreeNodeElement_handleCheckboxEvent, _TreeViewSubTreeNodeElement_update, _TreeViewSubTreeNodeElement_checkboxElement_get;
+var _TreeViewSubTreeNodeElement_instances, _TreeViewSubTreeNodeElement_expanded, _TreeViewSubTreeNodeElement_loadingState, _TreeViewSubTreeNodeElement_abortController, _TreeViewSubTreeNodeElement_activeElementIsLoader, _TreeViewSubTreeNodeElement_handleToggleEvent, _TreeViewSubTreeNodeElement_handleIncludeFragmentEvent, _TreeViewSubTreeNodeElement_handleRetryButtonEvent, _TreeViewSubTreeNodeElement_handleKeyboardEvent, _TreeViewSubTreeNodeElement_handleCheckboxEvent, _TreeViewSubTreeNodeElement_update, _TreeViewSubTreeNodeElement_checkboxElement_get;
 import { controller, target } from '@github/catalyst';
 import { observeMutationsUntilConditionMet } from '../../utils';
 let TreeViewSubTreeNodeElement = class TreeViewSubTreeNodeElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _TreeViewSubTreeNodeElement_instances.add(this);
+        _TreeViewSubTreeNodeElement_expanded.set(this, null);
+        _TreeViewSubTreeNodeElement_loadingState.set(this, 'success');
         _TreeViewSubTreeNodeElement_abortController.set(this, void 0);
         _TreeViewSubTreeNodeElement_activeElementIsLoader.set(this, false);
     }
     connectedCallback() {
-        this.expanded = this.node.getAttribute('aria-expanded') === 'true';
-        this.loadingState = 'success';
         observeMutationsUntilConditionMet(this, () => Boolean(this.node) && Boolean(this.subTree), () => {
             __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_update).call(this);
         });
@@ -77,6 +77,23 @@ let TreeViewSubTreeNodeElement = class TreeViewSubTreeNodeElement extends HTMLEl
             attributeFilter: ['aria-checked'],
         });
     }
+    get expanded() {
+        if (__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_expanded, "f") === null) {
+            __classPrivateFieldSet(this, _TreeViewSubTreeNodeElement_expanded, this.node.getAttribute('aria-expanded') === 'true', "f");
+        }
+        return __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_expanded, "f");
+    }
+    set expanded(newValue) {
+        __classPrivateFieldSet(this, _TreeViewSubTreeNodeElement_expanded, newValue, "f");
+        __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_update).call(this);
+    }
+    get loadingState() {
+        return __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_loadingState, "f");
+    }
+    set loadingState(newState) {
+        __classPrivateFieldSet(this, _TreeViewSubTreeNodeElement_loadingState, newState, "f");
+        __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_update).call(this);
+    }
     get selectStrategy() {
         return this.node.getAttribute('data-select-strategy') || 'descendants';
     }
@@ -84,11 +101,7 @@ let TreeViewSubTreeNodeElement = class TreeViewSubTreeNodeElement extends HTMLEl
         __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_abortController, "f").abort();
     }
     handleEvent(event) {
-        const checkbox = event.target.closest('.TreeViewItemCheckbox');
-        if (checkbox && checkbox === __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "a", _TreeViewSubTreeNodeElement_checkboxElement_get)) {
-            __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_handleCheckboxEvent).call(this, event);
-        }
-        else if (event.target === this.toggleButton) {
+        if (event.target === this.toggleButton) {
             __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_handleToggleEvent).call(this, event);
         }
         else if (event.target === this.includeFragment) {
@@ -97,11 +110,15 @@ let TreeViewSubTreeNodeElement = class TreeViewSubTreeNodeElement extends HTMLEl
         else if (event instanceof KeyboardEvent) {
             __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_handleKeyboardEvent).call(this, event);
         }
+        else if (event.target.closest('[role=treeitem]') === this.node &&
+            event.type === 'click' &&
+            __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "a", _TreeViewSubTreeNodeElement_checkboxElement_get)) {
+            __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_handleCheckboxEvent).call(this, event);
+        }
     }
     expand() {
         const alreadyExpanded = this.expanded;
         this.expanded = true;
-        __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_update).call(this);
         if (!alreadyExpanded && this.treeView) {
             this.treeView.dispatchEvent(new CustomEvent('treeViewNodeExpanded', {
                 bubbles: true,
@@ -112,7 +129,6 @@ let TreeViewSubTreeNodeElement = class TreeViewSubTreeNodeElement extends HTMLEl
     collapse() {
         const alreadyCollapsed = !this.expanded;
         this.expanded = false;
-        __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_update).call(this);
         if (!alreadyCollapsed && this.treeView) {
             // Prevent issue where currently focusable node is stuck inside a collapsed
             // sub-tree and no node in the entire tree can be focused
@@ -137,10 +153,10 @@ let TreeViewSubTreeNodeElement = class TreeViewSubTreeNodeElement extends HTMLEl
         return this.querySelectorAll(':scope > [role=treeitem]');
     }
     *eachDirectDescendantNode() {
-        for (const leaf of this.subTree.querySelectorAll(':scope > [role=treeitem]')) {
+        for (const leaf of this.subTree.querySelectorAll(':scope > li > .TreeViewItemContainer > [role=treeitem]')) {
             yield leaf;
         }
-        for (const subTree of this.subTree.querySelectorAll(':scope > tree-view-sub-tree-node > [role=treeitem]')) {
+        for (const subTree of this.subTree.querySelectorAll(':scope > tree-view-sub-tree-node > li > .TreeViewItemContainer > [role=treeitem]')) {
             yield subTree;
         }
     }
@@ -186,12 +202,16 @@ let TreeViewSubTreeNodeElement = class TreeViewSubTreeNodeElement extends HTMLEl
         }));
     }
 };
+_TreeViewSubTreeNodeElement_expanded = new WeakMap();
+_TreeViewSubTreeNodeElement_loadingState = new WeakMap();
 _TreeViewSubTreeNodeElement_abortController = new WeakMap();
 _TreeViewSubTreeNodeElement_activeElementIsLoader = new WeakMap();
 _TreeViewSubTreeNodeElement_instances = new WeakSet();
 _TreeViewSubTreeNodeElement_handleToggleEvent = function _TreeViewSubTreeNodeElement_handleToggleEvent(event) {
     if (event.type === 'click') {
         this.toggle();
+        // eslint-disable-next-line no-restricted-syntax
+        event.stopPropagation();
     }
 };
 _TreeViewSubTreeNodeElement_handleIncludeFragmentEvent = function _TreeViewSubTreeNodeElement_handleIncludeFragmentEvent(event) {
@@ -199,31 +219,25 @@ _TreeViewSubTreeNodeElement_handleIncludeFragmentEvent = function _TreeViewSubTr
         // the request has started
         case 'loadstart':
             this.loadingState = 'loading';
-            __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_update).call(this);
             break;
         // the request failed
         case 'error':
             this.loadingState = 'error';
-            __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_update).call(this);
             break;
         // request succeeded but element has not yet been replaced
         case 'include-fragment-replace':
+            __classPrivateFieldSet(this, _TreeViewSubTreeNodeElement_activeElementIsLoader, document.activeElement === this.loadingIndicator.closest('[role=treeitem]'), "f");
             this.loadingState = 'success';
-            __classPrivateFieldSet(this, _TreeViewSubTreeNodeElement_activeElementIsLoader, document.activeElement === this.loadingIndicator.closest('li'), "f");
-            __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_update).call(this);
             break;
         case 'include-fragment-replaced':
             if (__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_activeElementIsLoader, "f")) {
-                const firstItem = this.querySelector('[role=treeitem] [role=group] > :first-child');
+                const firstItem = this.querySelector('[role=group] > :first-child');
                 if (!firstItem)
                     return;
-                if (firstItem.tagName.toLowerCase() === 'tree-view-sub-tree-node') {
-                    const firstChild = firstItem.querySelector('[role=treeitem]');
-                    firstChild?.focus();
-                }
-                else {
-                    firstItem?.focus();
-                }
+                const content = firstItem.querySelector('[role=treeitem]');
+                if (!content)
+                    return;
+                content.focus();
             }
             __classPrivateFieldSet(this, _TreeViewSubTreeNodeElement_activeElementIsLoader, false, "f");
             break;
@@ -232,7 +246,6 @@ _TreeViewSubTreeNodeElement_handleIncludeFragmentEvent = function _TreeViewSubTr
 _TreeViewSubTreeNodeElement_handleRetryButtonEvent = function _TreeViewSubTreeNodeElement_handleRetryButtonEvent(event) {
     if (event.type === 'click') {
         this.loadingState = 'loading';
-        __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_update).call(this);
         this.includeFragment.refetch();
     }
 };
@@ -245,7 +258,13 @@ _TreeViewSubTreeNodeElement_handleKeyboardEvent = function _TreeViewSubTreeNodeE
         case 'Enter':
             // eslint-disable-next-line no-restricted-syntax
             event.stopPropagation();
-            this.toggle();
+            if (__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "a", _TreeViewSubTreeNodeElement_checkboxElement_get)) {
+                this.toggleChecked();
+            }
+            else if (!this.treeView?.nodeHasNativeAction(node)) {
+                // toggle only if this node isn't eg. an anchor or button
+                this.toggle();
+            }
             break;
         case 'ArrowRight':
             // eslint-disable-next-line no-restricted-syntax
@@ -258,10 +277,21 @@ _TreeViewSubTreeNodeElement_handleKeyboardEvent = function _TreeViewSubTreeNodeE
             this.collapse();
             break;
         case ' ':
-            // eslint-disable-next-line no-restricted-syntax
-            event.stopPropagation();
-            event.preventDefault();
-            this.toggleChecked();
+            if (__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "a", _TreeViewSubTreeNodeElement_checkboxElement_get)) {
+                // eslint-disable-next-line no-restricted-syntax
+                event.stopPropagation();
+                event.preventDefault();
+                this.toggleChecked();
+            }
+            else {
+                if (node instanceof HTMLAnchorElement) {
+                    // simulate click on space for anchors (buttons already handle this natively)
+                    node.click();
+                }
+                else if (!this.treeView?.nodeHasNativeAction(node)) {
+                    this.toggle();
+                }
+            }
             break;
     }
 };

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

@@ -20,16 +20,12 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
   @target loadingFailureMessage: HTMLElement
   @target retryButton: HTMLButtonElement
 
-  expanded: boolean
-  loadingState: LoadingState
-
+  #expanded: boolean | null = null
+  #loadingState: LoadingState = 'success'
   #abortController: AbortController
   #activeElementIsLoader: boolean = false
 
   connectedCallback() {
-    this.expanded = this.node.getAttribute('aria-expanded') === 'true'
-    this.loadingState = 'success'
-
     observeMutationsUntilConditionMet(
       this,
       () => Boolean(this.node) && Boolean(this.subTree),
@@ -109,6 +105,28 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
     })
   }
 
+  get expanded(): boolean {
+    if (this.#expanded === null) {
+      this.#expanded = this.node.getAttribute('aria-expanded') === 'true'
+    }
+
+    return this.#expanded
+  }
+
+  set expanded(newValue: boolean) {
+    this.#expanded = newValue
+    this.#update()
+  }
+
+  get loadingState(): LoadingState {
+    return this.#loadingState
+  }
+
+  set loadingState(newState: LoadingState) {
+    this.#loadingState = newState
+    this.#update()
+  }
+
   get selectStrategy(): string {
     return this.node.getAttribute('data-select-strategy') || 'descendants'
   }
@@ -118,16 +136,18 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
   }
 
   handleEvent(event: Event) {
-    const checkbox = (event.target as Element).closest('.TreeViewItemCheckbox')
-
-    if (checkbox && checkbox === this.#checkboxElement) {
-      this.#handleCheckboxEvent(event)
-    } else if (event.target === this.toggleButton) {
+    if (event.target === this.toggleButton) {
       this.#handleToggleEvent(event)
     } else if (event.target === this.includeFragment) {
       this.#handleIncludeFragmentEvent(event)
     } else if (event instanceof KeyboardEvent) {
       this.#handleKeyboardEvent(event)
+    } else if (
+      (event.target as Element).closest('[role=treeitem]') === this.node &&
+      event.type === 'click' &&
+      this.#checkboxElement
+    ) {
+      this.#handleCheckboxEvent(event)
     }
   }
 
@@ -135,7 +155,6 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
     const alreadyExpanded = this.expanded
 
     this.expanded = true
-    this.#update()
 
     if (!alreadyExpanded && this.treeView) {
       this.treeView.dispatchEvent(
@@ -151,7 +170,6 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
     const alreadyCollapsed = !this.expanded
 
     this.expanded = false
-    this.#update()
 
     if (!alreadyCollapsed && this.treeView) {
       // Prevent issue where currently focusable node is stuck inside a collapsed
@@ -182,11 +200,13 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
   }
 
   *eachDirectDescendantNode(): Generator<Element> {
-    for (const leaf of this.subTree.querySelectorAll(':scope > [role=treeitem]')) {
+    for (const leaf of this.subTree.querySelectorAll(':scope > li > .TreeViewItemContainer > [role=treeitem]')) {
       yield leaf
     }
 
-    for (const subTree of this.subTree.querySelectorAll(':scope > tree-view-sub-tree-node > [role=treeitem]')) {
+    for (const subTree of this.subTree.querySelectorAll(
+      ':scope > tree-view-sub-tree-node > li > .TreeViewItemContainer > [role=treeitem]',
+    )) {
       yield subTree
     }
   }
@@ -208,6 +228,8 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
   #handleToggleEvent(event: Event) {
     if (event.type === 'click') {
       this.toggle()
+      // eslint-disable-next-line no-restricted-syntax
+      event.stopPropagation()
     }
   }
 
@@ -216,33 +238,28 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
       // the request has started
       case 'loadstart':
         this.loadingState = 'loading'
-        this.#update()
         break
 
       // the request failed
       case 'error':
         this.loadingState = 'error'
-        this.#update()
         break
 
       // request succeeded but element has not yet been replaced
       case 'include-fragment-replace':
+        this.#activeElementIsLoader = document.activeElement === this.loadingIndicator.closest('[role=treeitem]')
         this.loadingState = 'success'
-        this.#activeElementIsLoader = document.activeElement === this.loadingIndicator.closest('li')
-        this.#update()
         break
 
       case 'include-fragment-replaced':
         if (this.#activeElementIsLoader) {
-          const firstItem = this.querySelector('[role=treeitem] [role=group] > :first-child') as HTMLElement | null
+          const firstItem = this.querySelector('[role=group] > :first-child') as HTMLElement | null
           if (!firstItem) return
 
-          if (firstItem.tagName.toLowerCase() === 'tree-view-sub-tree-node') {
-            const firstChild = firstItem.querySelector('[role=treeitem]') as HTMLElement | null
-            firstChild?.focus()
-          } else {
-            firstItem?.focus()
-          }
+          const content = firstItem.querySelector('[role=treeitem]') as HTMLElement | null
+          if (!content) return
+
+          content.focus()
         }
 
         this.#activeElementIsLoader = false
@@ -253,8 +270,6 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
   #handleRetryButtonEvent(event: Event) {
     if (event.type === 'click') {
       this.loadingState = 'loading'
-      this.#update()
-
       this.includeFragment.refetch()
     }
   }
@@ -269,7 +284,14 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
       case 'Enter':
         // eslint-disable-next-line no-restricted-syntax
         event.stopPropagation()
-        this.toggle()
+
+        if (this.#checkboxElement) {
+          this.toggleChecked()
+        } else if (!this.treeView?.nodeHasNativeAction(node)) {
+          // toggle only if this node isn't eg. an anchor or button
+          this.toggle()
+        }
+
         break
 
       case 'ArrowRight':
@@ -285,10 +307,21 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
         break
 
       case ' ':
-        // eslint-disable-next-line no-restricted-syntax
-        event.stopPropagation()
-        event.preventDefault()
-        this.toggleChecked()
+        if (this.#checkboxElement) {
+          // eslint-disable-next-line no-restricted-syntax
+          event.stopPropagation()
+          event.preventDefault()
+
+          this.toggleChecked()
+        } else {
+          if (node instanceof HTMLAnchorElement) {
+            // simulate click on space for anchors (buttons already handle this natively)
+            node.click()
+          } else if (!this.treeView?.nodeHasNativeAction(node)) {
+            this.toggle()
+          }
+        }
+
         break
     }
   }

data/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);cursor:pointer;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}}.TreeViewRootUlStyles:where([data-omit-spacer=true]) .TreeViewItemContainer{grid-template-columns:0 0 0 1fr}.TreeViewRootUlStyles .TreeViewItem[aria-current=true]>.TreeViewItemContainer{background-color:var(--control-transparent-bgColor-selected)}:is(.TreeViewRootUlStyles .TreeViewItem[aria-current=true]>.TreeViewItemContainer):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[aria-current=true]>.TreeViewItemContainer):after{background-color:HighlightText}}[aria-checked=true]:is(.TreeViewRootUlStyles .TreeViewItem)>.TreeViewItemContainer .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 .TreeViewItem)>.TreeViewItemContainer .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 .TreeViewItem)>.TreeViewItemContainer .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 .TreeViewItem)>.TreeViewItemContainer .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 .TreeViewItemToggle{align-items:flex-start;color:var(--fgColor-muted);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 .TreeViewItemContent{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));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)}:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemCheckbox{background-color:initial;border:none;border-radius:var(--borderRadius-medium);color:var(--control-fgColor-rest);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.TreeViewRootUlStyles .TreeViewItemContentText{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 .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%}

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

@@ -8,18 +8,21 @@
     ".TreeViewRootUlStyles .TreeViewItemContainer",
     ":is(.TreeViewRootUlStyles .TreeViewItemContainer):hover",
     ":is(.TreeViewRootUlStyles .TreeViewItemContainer):has(.TreeViewFailureMessage):hover",
+    ":is(.TreeViewRootUlStyles .TreeViewItemContainer):has([role=treeitem]:focus-visible)",
     ".TreeViewRootUlStyles:where([data-omit-spacer=true]) .TreeViewItemContainer",
-    ".TreeViewRootUlStyles .TreeViewItem[aria-current=true]>.TreeViewItemContainer",
-    ":is(.TreeViewRootUlStyles .TreeViewItem[aria-current=true]>.TreeViewItemContainer):after",
-    "[aria-checked=true]:is(.TreeViewRootUlStyles .TreeViewItem)>.TreeViewItemContainer .FormControl-checkbox",
-    ":is([aria-checked=true]:is(.TreeViewRootUlStyles .TreeViewItem)>.TreeViewItemContainer .FormControl-checkbox):before",
-    "[aria-checked=mixed]:is(.TreeViewRootUlStyles .TreeViewItem)>.TreeViewItemContainer .FormControl-checkbox",
-    ":is([aria-checked=mixed]:is(.TreeViewRootUlStyles .TreeViewItem)>.TreeViewItemContainer .FormControl-checkbox):before",
+    ".TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true])",
+    ":is(.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true])):after",
     ".TreeViewRootUlStyles .TreeViewItemToggle",
     ".TreeViewRootUlStyles .TreeViewItemToggleHover:hover",
     ".TreeViewRootUlStyles .TreeViewItemToggleEnd",
+    ".TreeViewRootUlStyles a.TreeViewItemContent:hover",
+    ".TreeViewRootUlStyles button.TreeViewItemContent:hover",
     ".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",
     ".TreeViewRootUlStyles .TreeViewItemContentText",
     ".TreeViewRootUlStyles:where([data-truncate-text=true]) .TreeViewItemContentText",
     ".TreeViewRootUlStyles:where([data-truncate-text=false]) .TreeViewItemContentText",

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

@@ -1 +1 @@
-{"version":3,"sources":["tree_view.pcss"],"names":[],"mappings":"AAEA,sBAGE,eAAgB,CADhB,QAAS,CADT,SAgRF,CA/PE,oCACE,YAeF,CAbE,2DACE,uDAOF,CALE,8BAHF,2DAII,+BAAgC,CAEhC,iBAEJ,CADE,CAGF,kEACE,sBACF,CAGF,6CACE,SAAU,CACV,mBAAoB,CACpB,sBAAuB,CAQvB,wCAAyC,CAFzC,4BAA6B,CAC7B,cAAe,CAJf,YAAa,CAEb,sCAAuC,CAKvC,yDAA0D,CAD1D,6FAA8F,CAP9F,iBAAkB,CAElB,UAAW,CAQX,gEAAmE,CACnE,+DAwBF,CAtBE,wDACE,yDAMF,CAJE,8BAHF,wDAII,uBAA8B,CAC9B,mBAEJ,CADE,CAGF,wBA3BF,6CA4BI,qBAAsB,CACtB,yBAWJ,CAVE,CAEA,qFAEE,wBAA6B,CAD7B,cAMF,CAHE,8BAJF,qFAKI,YAEJ,CADE,CAIJ,4EACE,+BACF,CAEA,8EACE,4DAwBF,CApBE,yFAaE,sCAAuC,CACvC,wCAAyC,CARzC,UAAW,CADX,aAAc,CAFd,gCAAmC,CAFnC,iBAAkB,CAClB,mCAAoC,CAEpC,YAeF,CAHE,8BAhBF,yFAiBI,8BAEJ,CADE,CAQA,yGACE,8CAA+C,CAC/C,oDAAqD,CACrD,0EAQF,CALE,qHAGE,kEAAwE,CADxE,kCAAmC,CADnC,kBAGF,CAMF,0GACE,8CAA+C,CAC/C,oDAAqD,CACrD,0EASF,CANE,sHAGE,kEAAwE,CACxE,cAAe,CAFf,wUAAia,CADja,kBAIF,CAKN,0CAWE,sBAAuB,CAHvB,0BAA2B,CAP3B,YAAa,CAQb,gBAAiB,CAPjB,WAAY,CAQZ,sBAAuB,CAHvB,kEAKF,CAEA,qDACE,yDACF,CAEA,6CAEE,oDAAqD,CADrD,iDAEF,CAEA,2CACE,YAAa,CAWb,8BAA+B,CAD/B,iBAAkB,CATlB,WAAY,CAQZ,+EAAkF,CAPlF,4BAA6B,CAM7B,mFAAsF,CAFtF,gFAmBF,CAZE,sEAKE,wBAA6B,CAC7B,WAAY,CACZ,wCAAyC,CALzC,iCAAkC,CADlC,iBAAkB,CAElB,eAAgB,CAMhB,yBAA0B,CAD1B,qCAAsC,CAJtC,wBAAiB,CAAjB,gBAAiB,CAMjB,uCACF,CAGF,+CACE,aAAc,CACd,OACF,CAEA,gFACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,iFAEE,qBACF,CAEA,0CAOE,kBAAmB,CADnB,0BAA2B,CAL3B,YAAa,CAIb,uCAGF,CAEA,iDAEE,0BAA2B,CAD3B,YAAa,CAEb,uBAKF,CAHE,6DACE,aACF,CAGF,6CAQE,qCAAsC,CACtC,0CAA2C,CAP3C,WAAY,CADZ,UASF,CAQA,qBACE,6CACE,kBACF,CAEA,6GAEE,qCACF,CACF,CAEA,8CAGE,UAAW,CAGX,WAAY,CACZ,eAAgB,CAHhB,SAAU,CAHV,iBAAkB,CAClB,SAAU,CAMV,kBAAsB,CAEtB,cAAe,CADf,kBAEF,CAGF,oCAEE,kBAAmB,CACnB,gBAAkB,CAFlB,YAAa,CAGb,WAyBF,CAvBE,wBANF,oCAOI,cAsBJ,CArBE,CAEA,sDACE,6BACF,CAEA,sDACE,6BACF,CAEA,sDACE,6BACF,CAEA,sDACE,6BACF,CAEA,sDACE,6BACF,CAGF,4BACE,wCACF,CAEA,wBAKE,kBAAmB,CAJnB,YAAa,CAEb,SAAW,CADX,8BAA+B,CAE/B,UAEF","file":"tree_view.css","sourcesContent":["/* stylelint-disable selector-max-type -- Copied from primer/react */\n\n.TreeViewRootUlStyles {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n\n  /*\n   * WARNING: This is a performance optimization.\n   *\n   * We define styles for the tree items at the root level of the tree\n   * to avoid recomputing the styles for each item when the tree updates.\n   * We're sacrificing maintainability for performance because TreeView\n   * needs to be performant enough to handle large trees (thousands of items).\n   *\n   * This is intended to be a temporary solution until we can improve the\n   * performance of our styling patterns.\n   *\n   * Do NOT copy this pattern without understanding the tradeoffs.\n   */\n  & .TreeViewItem {\n    outline: none;\n\n    &:focus-visible > div {\n      box-shadow: var(--boxShadow-thick) var(--fgColor-accent);\n\n      @media (forced-colors: active) {\n        outline: 2px solid HighlightText;\n        /* stylelint-disable-next-line declaration-property-value-no-unknown -- Copied from primer/react */\n        outline-offset: -2;\n      }\n    }\n\n    &[data-has-leading-action] {\n      --has-leading-action: 1;\n    }\n  }\n\n  & .TreeViewItemContainer {\n    --level: 1;\n    --toggle-width: 1rem;\n    --min-item-height: 2rem;\n\n    position: relative;\n    display: grid;\n    width: 100%;\n    font-size: var(--text-body-size-medium);\n    color: var(--fgColor-default);\n    cursor: pointer;\n    border-radius: var(--borderRadius-medium);\n    grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;\n    grid-template-areas: 'spacer leadingAction toggle content';\n\n    --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);\n    --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));\n\n    &:hover {\n      background-color: var(--control-transparent-bgColor-hover);\n\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: -2px;\n      }\n    }\n\n    @media (pointer: coarse) {\n      --toggle-width: 1.5rem;\n      --min-item-height: 2.75rem;\n    }\n\n    &:has(.TreeViewFailureMessage):hover {\n      cursor: default;\n      background-color: transparent;\n\n      @media (forced-colors: active) {\n        outline: none;\n      }\n    }\n  }\n\n  &:where([data-omit-spacer='true']) .TreeViewItemContainer {\n    grid-template-columns: 0 0 0 1fr;\n  }\n\n  & .TreeViewItem[aria-current='true'] > .TreeViewItemContainer {\n    background-color: var(--control-transparent-bgColor-selected);\n\n    /* Current item indicator */\n    /* stylelint-disable-next-line selector-max-specificity -- Copied from primer/react */\n    &::after {\n      position: absolute;\n      top: calc(50% - var(--base-size-12));\n      left: calc(-1 * var(--base-size-8));\n      width: 0.25rem;\n      height: 1.5rem;\n      content: '';\n\n      /*\n       * Use fgColor accent for consistency across all themes. Using the \"correct\" variable,\n       * --bgColor-accent-emphasis, causes vrt failures for dark high contrast mode\n       */\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--fgColor-accent);\n      border-radius: var(--borderRadius-medium);\n\n      @media (forced-colors: active) {\n        background-color: HighlightText;\n      }\n    }\n  }\n\n  /* stylelint-disable-next-line no-duplicate-selectors -- Copied from primer/react */\n  & .TreeViewItem {\n    &[aria-checked='true'] {\n      /* stylelint-disable-next-line selector-max-compound-selectors, selector-max-specificity -- Copied from primer/react */\n      & > .TreeViewItemContainer .FormControl-checkbox {\n        background: var(--control-checked-bgColor-rest);\n        border-color: var(--control-checked-borderColor-rest);\n        transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n        /* stylelint-disable-next-line max-nesting-depth, selector-max-compound-selectors, selector-max-specificity -- Copied from primer/react */\n        &::before {\n          visibility: visible;\n          transition: visibility 0s linear 0s;\n          animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n        }\n      }\n    }\n\n    &[aria-checked='mixed'] {\n      /* stylelint-disable-next-line selector-max-compound-selectors, selector-max-specificity -- Copied from primer/react */\n      & > .TreeViewItemContainer .FormControl-checkbox {\n        background: var(--control-checked-bgColor-rest);\n        border-color: var(--control-checked-borderColor-rest);\n        transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n        /* stylelint-disable-next-line max-nesting-depth, selector-max-compound-selectors, selector-max-specificity -- Copied from primer/react */\n        &::before {\n          visibility: visible;\n          mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');\n          animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n          clip-path: none;\n        }\n      }\n    }\n  }\n\n  & .TreeViewItemToggle {\n    display: flex;\n    height: 100%;\n\n    /* The toggle should appear vertically centered for single-line items, but remain at the top for items that wrap\n    across more lines. */\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: calc(var(--min-item-height) / 2 - var(--base-size-12) / 2);\n    color: var(--fgColor-muted);\n    grid-area: toggle;\n    justify-content: center;\n    align-items: flex-start;\n  }\n\n  & .TreeViewItemToggleHover:hover {\n    background-color: var(--control-transparent-bgColor-hover);\n  }\n\n  & .TreeViewItemToggleEnd {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n\n  & .TreeViewItemContent {\n    display: flex;\n    height: 100%;\n    padding: 0 var(--base-size-8);\n\n    /* The dynamic top and bottom padding to maintain the minimum item height for single line items */\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n    line-height: var(--custom-line-height, var(--text-body-lineHeight-medium, 1.4285));\n    grid-area: content;\n    gap: var(--stack-gap-condensed);\n\n    & .TreeViewItemCheckbox {\n      position: relative;\n      color: var(--control-fgColor-rest);\n      text-align: left;\n      user-select: none;\n      background-color: transparent;\n      border: none;\n      border-radius: var(--borderRadius-medium);\n      transition: background 33.333ms linear;\n      touch-action: manipulation;\n      -webkit-tap-highlight-color: transparent;\n    }\n  }\n\n  & .TreeViewItemContentText {\n    flex: 1 1 auto;\n    width: 0;\n  }\n\n  &:where([data-truncate-text='true']) .TreeViewItemContentText {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &:where([data-truncate-text='false']) .TreeViewItemContentText {\n    /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- Copied from primer/react */\n    word-break: break-word;\n  }\n\n  & .TreeViewItemVisual {\n    display: flex;\n\n    /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap\n    across more lines. */\n    height: var(--custom-line-height, 1.3rem);\n    color: var(--fgColor-muted);\n    align-items: center;\n  }\n\n  & .TreeViewItemLeadingAction {\n    display: flex;\n    color: var(--fgColor-muted);\n    grid-area: leadingAction;\n\n    & > button {\n      flex-shrink: 1;\n    }\n  }\n\n  & .TreeViewItemLevelLine {\n    width: 100%;\n    height: 100%;\n\n    /*\n     * On devices without hover, the nesting indicator lines\n     * appear at all times.\n     */\n    border-color: var(--borderColor-muted);\n    border-right: var(--borderWidth-thin) solid;\n  }\n\n  /*\n   * On devices with :hover support, the nesting indicator lines\n   * fade in when the user mouses over the entire component,\n   * or when there's focus inside the component. This makes\n   * sure the component remains simple when not in use.\n   */\n  @media (hover: hover) {\n    .TreeViewItemLevelLine {\n      border-color: transparent;\n    }\n\n    &:hover .TreeViewItemLevelLine,\n    &:focus-within .TreeViewItemLevelLine {\n      border-color: var(--borderColor-muted);\n    }\n  }\n\n  & .TreeViewVisuallyHidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    /* stylelint-disable-next-line primer/spacing */\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n}\n\n.TreeViewSkeletonItemContainerStyle {\n  display: flex;\n  align-items: center;\n  column-gap: 0.5rem;\n  height: 2rem;\n\n  @media (pointer: coarse) {\n    height: 2.75rem;\n  }\n\n  &:nth-of-type(5n + 1) {\n    --tree-item-loading-width: 67%;\n  }\n\n  &:nth-of-type(5n + 2) {\n    --tree-item-loading-width: 47%;\n  }\n\n  &:nth-of-type(5n + 3) {\n    --tree-item-loading-width: 73%;\n  }\n\n  &:nth-of-type(5n + 4) {\n    --tree-item-loading-width: 64%;\n  }\n\n  &:nth-of-type(5n + 5) {\n    --tree-item-loading-width: 50%;\n  }\n}\n\n.TreeItemSkeletonTextStyles {\n  width: var(--tree-item-loading-width, 67%);\n}\n\n.TreeViewFailureMessage {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 0.5rem;\n  width: 100%;\n  align-items: center;\n}\n"]}
+{"version":3,"sources":["tree_view.pcss"],"names":[],"mappings":"AAEA,sBAGE,eAAgB,CADhB,QAAS,CADT,SA+RF,CA9QE,oCACE,YAeF,CAbE,2DACE,uDAOF,CALE,8BAHF,2DAII,+BAAgC,CAEhC,iBAEJ,CADE,CAGF,kEACE,sBACF,CAGF,6CACE,SAAU,CACV,mBAAoB,CACpB,sBAAuB,CAOvB,wCAAyC,CADzC,4BAA6B,CAH7B,YAAa,CAEb,sCAAuC,CAIvC,yDAA0D,CAD1D,6FAA8F,CAN9F,iBAAkB,CAElB,UAAW,CAOX,gEAAmE,CACnE,+DA4BF,CA1BE,wDACE,yDAMF,CAJE,8BAHF,wDAII,uBAA8B,CAC9B,mBAEJ,CADE,CAGF,wBA1BF,6CA2BI,qBAAsB,CACtB,yBAeJ,CAdE,CAEA,qFAEE,wBAA6B,CAD7B,cAMF,CAHE,8BAJF,qFAKI,YAEJ,CADE,CAGF,qFACE,uDACF,CAGF,4EACE,+BACF,CAGA,wGACE,4DAwBF,CApBE,mHAaE,sCAAuC,CACvC,wCAAyC,CARzC,UAAW,CADX,aAAc,CAFd,gCAAmC,CAFnC,iBAAkB,CAClB,mCAAoC,CAEpC,YAeF,CAHE,8BAhBF,mHAiBI,8BAEJ,CADE,CAIJ,0CAWE,sBAAuB,CAHvB,0BAA2B,CAI3B,cAAe,CAXf,YAAa,CAQb,gBAAiB,CAPjB,WAAY,CAQZ,sBAAuB,CAHvB,kEAMF,CAEA,qDACE,yDACF,CAEA,6CAEE,oDAAqD,CADrD,iDAEF,CAGA,yGACE,iCAA0B,CAA1B,yBAA0B,CAC1B,iDACF,CAEA,2CAWE,cAAe,CAVf,YAAa,CAmBb,8BAA+B,CAD/B,iBAAkB,CAjBlB,WAAY,CAgBZ,+EAAkF,CAdlF,YAAa,CADb,4BAA6B,CAc7B,mFAAsF,CAFtF,gFAkDF,CA3CE,iHAfA,wBAA6B,CAC7B,WAAY,CAHZ,eAAgB,CAIhB,yBAA0B,CAH1B,wBAAiB,CAAjB,gBAAiB,CAIjB,uCAuBA,CAXA,sEAOE,wCAAyC,CALzC,iCAAkC,CADlC,iBAAkB,CAOlB,qCAGF,CAGE,yFACE,8CAA+C,CAC/C,oDAAqD,CACrD,0EAQF,CALE,qGAGE,kEAAwE,CADxE,kCAAmC,CADnC,kBAGF,CAKF,0FACE,8CAA+C,CAC/C,oDAAqD,CACrD,0EASF,CANE,sGAGE,kEAAwE,CACxE,cAAe,CAFf,wUAAia,CADja,kBAIF,CAKN,+CACE,iCAAkC,CAClC,aAAc,CACd,OACF,CAEA,gFACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,iFAEE,qBACF,CAEA,0CAOE,kBAAmB,CADnB,0BAA2B,CAL3B,YAAa,CAIb,uCAGF,CAEA,iDAEE,0BAA2B,CAD3B,YAAa,CAEb,uBAKF,CAHE,6DACE,aACF,CAGF,6CAQE,qCAAsC,CACtC,0CAA2C,CAP3C,WAAY,CADZ,UASF,CAQA,qBACE,6CACE,kBACF,CAEA,6GAEE,qCACF,CACF,CAEA,8CAGE,UAAW,CAGX,WAAY,CACZ,eAAgB,CAHhB,SAAU,CAHV,iBAAkB,CAClB,SAAU,CAMV,kBAAsB,CAEtB,cAAe,CADf,kBAEF,CAGF,oCAEE,kBAAmB,CACnB,gBAAkB,CAFlB,YAAa,CAGb,WAyBF,CAvBE,wBANF,oCAOI,cAsBJ,CArBE,CAEA,sDACE,6BACF,CAEA,sDACE,6BACF,CAEA,sDACE,6BACF,CAEA,sDACE,6BACF,CAEA,sDACE,6BACF,CAGF,4BACE,wCACF,CAEA,wBAKE,kBAAmB,CAJnB,YAAa,CAEb,SAAW,CADX,8BAA+B,CAE/B,UAEF","file":"tree_view.css","sourcesContent":["/* stylelint-disable selector-max-type -- Copied from primer/react */\n\n.TreeViewRootUlStyles {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n\n  /*\n   * WARNING: This is a performance optimization.\n   *\n   * We define styles for the tree items at the root level of the tree\n   * to avoid recomputing the styles for each item when the tree updates.\n   * We're sacrificing maintainability for performance because TreeView\n   * needs to be performant enough to handle large trees (thousands of items).\n   *\n   * This is intended to be a temporary solution until we can improve the\n   * performance of our styling patterns.\n   *\n   * Do NOT copy this pattern without understanding the tradeoffs.\n   */\n  & .TreeViewItem {\n    outline: none;\n\n    &:focus-visible > div {\n      box-shadow: var(--boxShadow-thick) var(--fgColor-accent);\n\n      @media (forced-colors: active) {\n        outline: 2px solid HighlightText;\n        /* stylelint-disable-next-line declaration-property-value-no-unknown -- Copied from primer/react */\n        outline-offset: -2;\n      }\n    }\n\n    &[data-has-leading-action] {\n      --has-leading-action: 1;\n    }\n  }\n\n  & .TreeViewItemContainer {\n    --level: 1;\n    --toggle-width: 1rem;\n    --min-item-height: 2rem;\n\n    position: relative;\n    display: grid;\n    width: 100%;\n    font-size: var(--text-body-size-medium);\n    color: var(--fgColor-default);\n    border-radius: var(--borderRadius-medium);\n    grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;\n    grid-template-areas: 'spacer leadingAction toggle content';\n\n    --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);\n    --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));\n\n    &:hover {\n      background-color: var(--control-transparent-bgColor-hover);\n\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: -2px;\n      }\n    }\n\n    @media (pointer: coarse) {\n      --toggle-width: 1.5rem;\n      --min-item-height: 2.75rem;\n    }\n\n    &:has(.TreeViewFailureMessage):hover {\n      cursor: default;\n      background-color: transparent;\n\n      @media (forced-colors: active) {\n        outline: none;\n      }\n    }\n\n    &:has([role='treeitem']:focus-visible) {\n      box-shadow: var(--boxShadow-thick) var(--fgColor-accent);\n    }\n  }\n\n  &:where([data-omit-spacer='true']) .TreeViewItemContainer {\n    grid-template-columns: 0 0 0 1fr;\n  }\n\n  /* stylelint-disable-next-line selector-max-specificity */\n  & .TreeViewItem > .TreeViewItemContainer:has(.TreeViewItemContent[aria-current='true']) {\n    background-color: var(--control-transparent-bgColor-selected);\n\n    /* Current item indicator */\n    /* stylelint-disable-next-line selector-max-specificity -- Copied from primer/react */\n    &::after {\n      position: absolute;\n      top: calc(50% - var(--base-size-12));\n      left: calc(-1 * var(--base-size-8));\n      width: 0.25rem;\n      height: 1.5rem;\n      content: '';\n\n      /*\n       * Use fgColor accent for consistency across all themes. Using the \"correct\" variable,\n       * --bgColor-accent-emphasis, causes vrt failures for dark high contrast mode\n       */\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--fgColor-accent);\n      border-radius: var(--borderRadius-medium);\n\n      @media (forced-colors: active) {\n        background-color: HighlightText;\n      }\n    }\n  }\n\n  & .TreeViewItemToggle {\n    display: flex;\n    height: 100%;\n\n    /* The toggle should appear vertically centered for single-line items, but remain at the top for items that wrap\n    across more lines. */\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: calc(var(--min-item-height) / 2 - var(--base-size-12) / 2);\n    color: var(--fgColor-muted);\n    grid-area: toggle;\n    justify-content: center;\n    align-items: flex-start;\n    cursor: pointer;\n  }\n\n  & .TreeViewItemToggleHover:hover {\n    background-color: var(--control-transparent-bgColor-hover);\n  }\n\n  & .TreeViewItemToggleEnd {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n\n  /* stylelint-disable-next-line selector-no-qualifying-type */\n  & a.TreeViewItemContent:hover, button.TreeViewItemContent:hover {\n    text-decoration: underline;\n    text-decoration-color: var(--control-fgColor-rest);\n  }\n\n  & .TreeViewItemContent {\n    display: flex;\n    height: 100%;\n    padding: 0 var(--base-size-8);\n    outline: none;\n    text-align: left;\n    user-select: none;\n    background-color: transparent;\n    border: none;\n    touch-action: manipulation;\n    -webkit-tap-highlight-color: transparent;\n    cursor: pointer;\n\n    /* The dynamic top and bottom padding to maintain the minimum item height for single line items */\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n    line-height: var(--custom-line-height, var(--text-body-lineHeight-medium, 1.4285));\n    grid-area: content;\n    gap: var(--stack-gap-condensed);\n\n    & .TreeViewItemCheckbox {\n      position: relative;\n      color: var(--control-fgColor-rest);\n      text-align: left;\n      user-select: none;\n      background-color: transparent;\n      border: none;\n      border-radius: var(--borderRadius-medium);\n      transition: background 33.333ms linear;\n      touch-action: manipulation;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    &[aria-checked='true'] {\n      & .FormControl-checkbox {\n        background: var(--control-checked-bgColor-rest);\n        border-color: var(--control-checked-borderColor-rest);\n        transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n        /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity -- Copied from primer/react */\n        &::before {\n          visibility: visible;\n          transition: visibility 0s linear 0s;\n          animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n        }\n      }\n    }\n\n    &[aria-checked='mixed'] {\n      & .FormControl-checkbox {\n        background: var(--control-checked-bgColor-rest);\n        border-color: var(--control-checked-borderColor-rest);\n        transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n        /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity -- Copied from primer/react */\n        &::before {\n          visibility: visible;\n          mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');\n          animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n          clip-path: none;\n        }\n      }\n    }\n  }\n\n  & .TreeViewItemContentText {\n    color: var(--control-fgColor-rest);\n    flex: 1 1 auto;\n    width: 0;\n  }\n\n  &:where([data-truncate-text='true']) .TreeViewItemContentText {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &:where([data-truncate-text='false']) .TreeViewItemContentText {\n    /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- Copied from primer/react */\n    word-break: break-word;\n  }\n\n  & .TreeViewItemVisual {\n    display: flex;\n\n    /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap\n    across more lines. */\n    height: var(--custom-line-height, 1.3rem);\n    color: var(--fgColor-muted);\n    align-items: center;\n  }\n\n  & .TreeViewItemLeadingAction {\n    display: flex;\n    color: var(--fgColor-muted);\n    grid-area: leadingAction;\n\n    & > button {\n      flex-shrink: 1;\n    }\n  }\n\n  & .TreeViewItemLevelLine {\n    width: 100%;\n    height: 100%;\n\n    /*\n     * On devices without hover, the nesting indicator lines\n     * appear at all times.\n     */\n    border-color: var(--borderColor-muted);\n    border-right: var(--borderWidth-thin) solid;\n  }\n\n  /*\n   * On devices with :hover support, the nesting indicator lines\n   * fade in when the user mouses over the entire component,\n   * or when there's focus inside the component. This makes\n   * sure the component remains simple when not in use.\n   */\n  @media (hover: hover) {\n    .TreeViewItemLevelLine {\n      border-color: transparent;\n    }\n\n    &:hover .TreeViewItemLevelLine,\n    &:focus-within .TreeViewItemLevelLine {\n      border-color: var(--borderColor-muted);\n    }\n  }\n\n  & .TreeViewVisuallyHidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    /* stylelint-disable-next-line primer/spacing */\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n}\n\n.TreeViewSkeletonItemContainerStyle {\n  display: flex;\n  align-items: center;\n  column-gap: 0.5rem;\n  height: 2rem;\n\n  @media (pointer: coarse) {\n    height: 2.75rem;\n  }\n\n  &:nth-of-type(5n + 1) {\n    --tree-item-loading-width: 67%;\n  }\n\n  &:nth-of-type(5n + 2) {\n    --tree-item-loading-width: 47%;\n  }\n\n  &:nth-of-type(5n + 3) {\n    --tree-item-loading-width: 73%;\n  }\n\n  &:nth-of-type(5n + 4) {\n    --tree-item-loading-width: 64%;\n  }\n\n  &:nth-of-type(5n + 5) {\n    --tree-item-loading-width: 50%;\n  }\n}\n\n.TreeItemSkeletonTextStyles {\n  width: var(--tree-item-loading-width, 67%);\n}\n\n.TreeViewFailureMessage {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 0.5rem;\n  width: 100%;\n  align-items: center;\n}\n"]}