openproject-primer_view_components 0.84.5 → 0.86.0

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

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

data/app/components/primer/alpha/select_panel_element.ts

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

data/app/components/primer/alpha/tree_view/leaf_node.html.erb

@@ -14,5 +14,10 @@
       <%= trailing_visual %>
     <% end %>
   <% end %>
+  <% if trailing_action? %>
+    <% node.with_trailing_action do %>
+      <%= trailing_action %>
+    <% end %>
+  <% end %>
   <% node.with_text_content { @label } %>
 <% end %>

data/app/components/primer/alpha/tree_view/leaf_node.rb

@@ -48,6 +48,24 @@ module Primer
           }
         }
 
+        # @!parse
+        #   # Adds a trailing action rendered to the right of the node's content.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::IconButton) %>.
+        #   def with_trailing_action_button(**system_arguments, &block)
+        #   end
+
+        renders_one :trailing_action, types: {
+          button: lambda { |**system_arguments|
+            TrailingAction.new(
+              action: Primer::Beta::IconButton.new(
+                scheme: :invisible,
+                **system_arguments
+              )
+            )
+          }
+        }
+
         # @!parse
         #   # Adds a trailing visual icon rendered to the right of the node's label.
         #   #

data/app/components/primer/alpha/tree_view/node.html.erb

@@ -31,6 +31,9 @@
         <%= trailing_visual %>
       <% end %>
     <% end %>
+    <% if trailing_action? %>
+      <%= trailing_action %>
+    <% end %>
   </div>
   <%= content %>
 <% end %>

data/app/components/primer/alpha/tree_view/node.rb

@@ -15,6 +15,9 @@ module Primer
         # Generic leading action slot
         renders_one :leading_action
 
+        # Generic trailing action slot
+        renders_one :trailing_action
+
         # Generic leading visual slot
         renders_one :leading_visual
 
@@ -182,6 +185,13 @@ module Primer
             )
           end
 
+          if trailing_action?
+            @content_arguments[:data] = merge_data(
+              @content_arguments,
+              { data: { "has-trailing-action": true } }
+            )
+          end
+
           if select_variant != :none && node_variant != :div
             raise ArgumentError, "TreeView nodes do not support select variants for tags other than :div."
           end

data/app/components/primer/alpha/tree_view/sub_tree_node.html.erb

@@ -15,6 +15,11 @@
         <%= trailing_visual %>
       <% end %>
     <% end %>
+    <% if trailing_action? %>
+      <% node.with_trailing_action do %>
+        <%= trailing_action %>
+      <% end %>
+    <% end %>
 
     <% node.with_text_content { @label } %>
 

data/app/components/primer/alpha/tree_view/sub_tree_node.rb

@@ -83,6 +83,24 @@ module Primer
           }
         }
 
+        # @!parse
+        #   # Adds a trailing action rendered to the right of the node's content.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::IconButton) %>.
+        #   def with_trailing_action_button(**system_arguments, &block)
+        #   end
+
+        renders_one :trailing_action, types: {
+          button: lambda { |**system_arguments|
+            TrailingAction.new(
+              action: Primer::Beta::IconButton.new(
+                scheme: :invisible,
+                **system_arguments
+              )
+            )
+          }
+        }
+
         # @!parse
         #   # Adds a trailing visual icon rendered to the right of the node's label.
         #   #

data/app/components/primer/alpha/tree_view/trailing_action.html.erb

@@ -0,0 +1,3 @@
+<div class="TreeViewItemTrailingAction" aria-hidden="true">
+  <%= render(@action) %>
+</div>

data/app/components/primer/alpha/tree_view/trailing_action.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class TreeView
+      # The trailing action for `TreeView` nodes.
+      #
+      # This component is part of the <%= link_to_component(Primer::Alpha::TreeView) %> component and should
+      # not be used directly.
+      class TrailingAction < Primer::Component
+        # @param action [ViewComponent::Base] A component or other renderable to use as the action button etc.
+        def initialize(action:)
+          @action = action
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/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 :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=false]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItem-singleSelectCheckmark{visibility:hidden}[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}}.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}}.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 trailingAction";grid-template-columns:var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr var(--trailing-action-width);position:relative;width:100%;--leading-action-width:calc(var(--has-leading-action, 0)*1.5rem);--trailing-action-width:calc(var(--has-trailing-action, 0)*1.5rem);--spacer-width:calc((var(--level) - 1)*(var(--toggle-width)/2))}:is(.TreeViewRootUlStyles .TreeViewItemContainer):has([data-has-leading-action]){--has-leading-action:1}:is(.TreeViewRootUlStyles .TreeViewItemContainer):has([data-has-trailing-action]){--has-trailing-action:1}:is(.TreeViewRootUlStyles .TreeViewItemContainer):hover{background-color:var(--control-transparent-bgColor-hover)}@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{align-items:center;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=false]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItem-singleSelectCheckmark{visibility:hidden}[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}}.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 .TreeViewItemTrailingAction{color:var(--fgColor-muted);display:flex;grid-area:trailingAction}:is(.TreeViewRootUlStyles .TreeViewItemTrailingAction)>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/alpha/tree_view.css.json

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

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

@@ -1 +1 @@
-{"version":3,"sources":["tree_view.pcss"],"names":[],"mappings":"AAEA,sBAGE,eAAgB,CADhB,QAAS,CADT,SA6UF,CA5TE,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,qEACE,kBACF,CAEA,2CAWE,cAAe,CAVf,YAAa,CAmBb,8BAA+B,CAD/B,iBAAkB,CAjBlB,WAAY,CAgBZ,+EAAkF,CAdlF,YAAa,CADb,4BAA6B,CAc7B,mFAAsF,CAFtF,gFA4FF,CArFE,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,CAMF,wGACE,iBACF,CAIA,0FACE,8CAA+C,CAC/C,oDAAqD,CACrD,0EASF,CANE,sGAGE,kEAAwE,CACxE,cAAe,CAFf,wUAAia,CADja,kBAIF,CAIJ,oEACE,mBAgCF,CA9BE,6FACE,qCACF,CAME,yLACE,oCACF,CAKA,qBAEE,qGACE,kBACF,CAMF,0EAEE,wBAA6B,CAD7B,kBAEF,CARA,CAaN,+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  & :has(.TreeViewItemContent[aria-disabled=\"true\"]) {\n    cursor: not-allowed;\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='false'] {\n      /* singleselect checkmark */\n      & .TreeViewItem-singleSelectCheckmark {\n        visibility: hidden;\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    &[aria-disabled='true'] {\n      pointer-events: none;\n\n      & .TreeViewItemContentText {\n        color: var(--control-fgColor-disabled);\n      }\n\n      & .TreeViewItemVisual {\n        fill: var(--control-fgColor-disabled);\n\n        /* stylelint-disable-next-line max-nesting-depth, selector-max-compound-selectors, selector-max-specificity */\n        & svg {\n          fill: var(--control-fgColor-disabled);\n        }\n      }\n\n      & .FormControl-checkbox {\n        /* stylelint-disable-next-line max-nesting-depth */\n        @media (hover: hover) {\n          /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity */\n          &:hover {\n            cursor: not-allowed;\n          }\n        }\n      }\n\n      @media (hover: hover) {\n        /* stylelint-disable-next-line max-nesting-depth */\n        &:hover {\n          cursor: not-allowed;\n          background-color: transparent;\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"]}
+{"version":3,"sources":["tree_view.pcss"],"names":[],"mappings":"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","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\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 var(--trailing-action-width);\n    grid-template-areas: 'spacer leadingAction toggle content trailingAction';\n\n    --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);\n    --trailing-action-width: calc(var(--has-trailing-action, 0) * 1.5rem);\n    --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));\n\n    &:has([data-has-leading-action]) {\n      --has-leading-action: 1;\n    }\n\n    &:has([data-has-trailing-action]) {\n      --has-trailing-action: 1;\n    }\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  & :has(.TreeViewItemContent[aria-disabled=\"true\"]) {\n    cursor: not-allowed;\n  }\n\n  & .TreeViewItemContent {\n    display: flex;\n    align-items: center;\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='false'] {\n      /* singleselect checkmark */\n      & .TreeViewItem-singleSelectCheckmark {\n        visibility: hidden;\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    &[aria-disabled='true'] {\n      pointer-events: none;\n\n      & .TreeViewItemContentText {\n        color: var(--control-fgColor-disabled);\n      }\n\n      & .TreeViewItemVisual {\n        fill: var(--control-fgColor-disabled);\n\n        /* stylelint-disable-next-line max-nesting-depth, selector-max-compound-selectors, selector-max-specificity */\n        & svg {\n          fill: var(--control-fgColor-disabled);\n        }\n      }\n\n      & .FormControl-checkbox {\n        /* stylelint-disable-next-line max-nesting-depth */\n        @media (hover: hover) {\n          /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity */\n          &:hover {\n            cursor: not-allowed;\n          }\n        }\n      }\n\n      @media (hover: hover) {\n        /* stylelint-disable-next-line max-nesting-depth */\n        &:hover {\n          cursor: not-allowed;\n          background-color: transparent;\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  & .TreeViewItemTrailingAction {\n    display: flex;\n    color: var(--fgColor-muted);\n    grid-area: trailingAction;\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"]}

data/app/components/primer/alpha/tree_view.pcss

@@ -30,10 +30,6 @@
         outline-offset: -2;
       }
     }
-
-    &[data-has-leading-action] {
-      --has-leading-action: 1;
-    }
   }
 
   & .TreeViewItemContainer {
@@ -47,12 +43,21 @@
     font-size: var(--text-body-size-medium);
     color: var(--fgColor-default);
     border-radius: var(--borderRadius-medium);
-    grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;
-    grid-template-areas: 'spacer leadingAction toggle content';
+    grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr var(--trailing-action-width);
+    grid-template-areas: 'spacer leadingAction toggle content trailingAction';
 
     --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);
+    --trailing-action-width: calc(var(--has-trailing-action, 0) * 1.5rem);
     --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));
 
+    &:has([data-has-leading-action]) {
+      --has-leading-action: 1;
+    }
+
+    &:has([data-has-trailing-action]) {
+      --has-trailing-action: 1;
+    }
+
     &:hover {
       background-color: var(--control-transparent-bgColor-hover);
 
@@ -149,6 +154,7 @@
 
   & .TreeViewItemContent {
     display: flex;
+    align-items: center;
     height: 100%;
     padding: 0 var(--base-size-8);
     outline: none;
@@ -293,6 +299,16 @@
     }
   }
 
+  & .TreeViewItemTrailingAction {
+    display: flex;
+    color: var(--fgColor-muted);
+    grid-area: trailingAction;
+
+    & > button {
+      flex-shrink: 1;
+    }
+  }
+
   & .TreeViewItemLevelLine {
     width: 100%;
     height: 100%;

data/app/components/primer/open_project/filterable_tree_view/sub_tree.rb

@@ -11,8 +11,8 @@ module Primer
         def with_sub_tree(**system_arguments, &block)
           system_arguments[:select_variant] ||= :multiple
 
-          if system_arguments[:select_variant] != :multiple && system_arguments[:select_variant] != :single
-            raise ArgumentError, "FilterableTreeView only supports `:multiple` or `:single` as select_variant"
+          unless FilterableTreeView::SUPPORTED_SELECT_VARIANTS.include?(system_arguments[:select_variant])
+            raise ArgumentError, "FilterableTreeView only supports #{SUPPORTED_SELECT_VARIANTS.map(&:inspect).to_sentence} as select_variant"
           end
 
           super(
@@ -26,8 +26,8 @@ module Primer
         def with_leaf(**system_arguments, &block)
           system_arguments[:select_variant] ||= :multiple
 
-          if system_arguments[:select_variant] != :multiple && system_arguments[:select_variant] != :single
-            raise ArgumentError, "FilterableTreeView only supports `:multiple` or `:single` as select_variant"
+          unless FilterableTreeView::SUPPORTED_SELECT_VARIANTS.include?(system_arguments[:select_variant])
+            raise ArgumentError, "FilterableTreeView only supports #{SUPPORTED_SELECT_VARIANTS.map(&:inspect).to_sentence} as select_variant"
           end
 
           super(
@@ -37,11 +37,11 @@ module Primer
         end
 
         def with_loading_spinner(**system_arguments)
-          raise ArgumentError, "FilterableTreeView does not support asynchronous loading"
+          raise ArgumentError, "FilterableTreeView does not support select variants for sub-trees loaded asynchronously. Please make the whole component load asynchronously."
         end
 
         def with_loading_skeleton(**system_arguments)
-          raise ArgumentError, "FilterableTreeView does not support asynchronous loading"
+          raise ArgumentError, "FilterableTreeView does not support select variants for sub-trees loaded asynchronously. Please make the whole component load asynchronously."
         end
       end
     end

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

@@ -0,0 +1 @@
+filterable-tree-view{display:flex;flex-direction:column;max-height:inherit;overflow:hidden}.FilterableTreeViewLayout{flex:1;min-height:0}.FilterableTreeViewTreeContainer{flex:1;min-height:0;overflow-y:auto}::highlight(primer-filterable-tree-view-search-results){background-color:var(--bgColor-attention-muted)}filterable-tree-view mark{background-color:var(--bgColor-attention-muted);color:inherit}.FilterableTreeViewLoadingSkeleton{display:none}filterable-tree-view[data-loading] .FilterableTreeViewLoadingSkeleton{display:block}filterable-tree-view[data-loading] [data-target~="filterable-tree-view.noResultsMessage"],filterable-tree-view[data-loading] tree-view{display:none}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["filterable_tree_view.pcss"],"names":[],"mappings":"AAYA,qBACE,YAAa,CACb,qBAAsB,CAEtB,kBAAmB,CADnB,eAEF,CAEA,0BACE,MAAO,CACP,YACF,CAEA,iCACE,MAAO,CACP,YAAa,CACb,eACF,CAGA,wDACE,+CACF,CAIA,0BACE,+CAAgD,CAChD,aACF,CAGA,mCACE,YACF,CAIA,sEACE,aACF,CAEA,uIAEE,YACF","file":"filterable_tree_view.css","sourcesContent":["/* CSS for FilterableTreeView */\n\n/* Scroll layout\n *\n * The filterable-tree-view element itself acts as a flex column container.\n * The toolbar (input, segmented control, checkbox) is fixed at the top.\n * Only the tree area scrolls. The consumer is responsible for setting a\n * height or max-height on the filterable-tree-view element (or its parent)\n * to activate scrolling.\n */\n\n/* stylelint-disable-next-line selector-max-type */\nfilterable-tree-view {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  max-height: inherit;\n}\n\n.FilterableTreeViewLayout {\n  flex: 1;\n  min-height: 0;\n}\n\n.FilterableTreeViewTreeContainer {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n/* Highlight style for CSS Custom Highlight API */\n::highlight(primer-filterable-tree-view-search-results) {\n  background-color: var(--bgColor-attention-muted);\n}\n\n/* Fallback: <mark> elements used when CSS Custom Highlight API is unavailable */\n/* stylelint-disable-next-line selector-max-type */\nfilterable-tree-view mark {\n  background-color: var(--bgColor-attention-muted);\n  color: inherit;\n}\n\n/* Loading skeleton */\n.FilterableTreeViewLoadingSkeleton {\n  display: none;\n}\n\n/* stylelint-disable selector-no-qualifying-type */\n/* stylelint-disable selector-max-type */\nfilterable-tree-view[data-loading] .FilterableTreeViewLoadingSkeleton {\n  display: block;\n}\n\nfilterable-tree-view[data-loading] tree-view,\nfilterable-tree-view[data-loading] [data-target~=\"filterable-tree-view.noResultsMessage\"] {\n  display: none;\n}\n"]}

data/app/components/primer/open_project/filterable_tree_view.html.erb

@@ -1,6 +1,11 @@
 <%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
-  <%= render(Primer::Alpha::Stack.new) do %>
-    <%= render(Primer::Alpha::Stack.new(wrap: :reverse, direction: :horizontal, align: :center)) do %>
+  <%= render(Primer::Alpha::Stack.new(classes: "FilterableTreeViewLayout")) do %>
+    <%= render(Primer::Alpha::Stack.new(wrap: :wrap, direction: :horizontal, align: :center)) do %>
+      <%= render(Primer::Alpha::StackItem.new(grow: true)) do %>
+        <%= render(@filter_input) do |input| %>
+          <% input.merge_input_arguments!(form: "") %>
+        <% end %>
+      <% end %>
       <%= render(Primer::ConditionalWrapper.new(condition: !hide_filter_mode_control? && !hide_include_sub_items_check_box?,
                                                 component: Primer::Alpha::Stack, wrap: :wrap, direction: :horizontal, align: :center)) do %>
         <%= render(Primer::Alpha::StackItem.new(hidden: hide_filter_mode_control?)) do %>
@@ -8,22 +13,29 @@
         <% end %>
         <%= render(Primer::Alpha::StackItem.new(hidden: hide_include_sub_items_check_box?)) do %>
           <%= render(@include_sub_items_check_box) do |input| %>
-            <% input.merge_input_arguments!(form: "") %>
+            <%# In async mode the checkbox value must reach the server on form submission so it can
+                include all descendants of checked nodes even when paginated. In non-async mode it is
+                a purely client-side control and must be excluded from form submissions. %>
+            <% input.merge_input_arguments!(form: "") unless async? %>
           <% end %>
         <% end %>
       <% end %>
-      <%= render(Primer::Alpha::StackItem.new(grow: true)) do %>
-        <%= render(@filter_input) do |input| %>
-          <%# exclude from form submissions %>
-          <% input.merge_input_arguments!(form: "") %>
-        <% end %>
-      <% end %>
     <% end %>
-    <%= render(Primer::BaseComponent.new(tag: :div, hidden: true, data: { target: "filterable-tree-view.noResultsMessage" })) do %>
-      <%= render(Primer::Alpha::TreeView.new) do |tree| %>
-        <% tree.with_leaf(**@no_results_node_arguments) %>
+    <div class="FilterableTreeViewTreeContainer">
+      <%= render(Primer::BaseComponent.new(tag: :div, hidden: true, data: { target: "filterable-tree-view.noResultsMessage" })) do %>
+        <%= render(Primer::Alpha::TreeView.new) do |tree| %>
+          <% tree.with_leaf(**@no_results_node_arguments) %>
+        <% end %>
       <% end %>
-    <% end %>
-    <%= render(@tree_view) %>
+      <div class="FilterableTreeViewLoadingSkeleton" aria-hidden="true">
+        <% [0, 8, 8, 16, 8, 0, 8, 8].each do |indent| %>
+          <span class="TreeViewSkeletonItemContainerStyle" style="padding-left: <%= indent %>px">
+            <%= render(Primer::Alpha::SkeletonBox.new(width: "16px")) %>
+            <%= render(Primer::Alpha::SkeletonBox.new(classes: "TreeItemSkeletonTextStyles")) %>
+          </span>
+        <% end %>
+      </div>
+      <%= render(@tree_view) %>
+    </div>
   <% end %>
 <% end %>