openproject-primer_view_components 0.67.0 → 0.68.0

data/app/components/primer/open_project/border_box/collapsible_header.rb

@@ -12,8 +12,6 @@ module Primer
         #
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         renders_one :title, lambda { |**system_arguments, &block|
-          raise ArgumentError, "Title must be a string" unless block.call.is_a?(String)
-
           system_arguments[:mr] ||= 2
 
           Primer::Beta::Text.new(**system_arguments, &block)
@@ -33,7 +31,6 @@ module Primer
         #
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         renders_one :description, lambda { |**system_arguments, &block|
-          raise ArgumentError, "Description must be a string" unless block.call.is_a?(String)
           system_arguments[:color] ||= :subtle
           system_arguments[:hidden] = @collapsed
 

data/app/components/primer/open_project/collapsible_section.rb

@@ -15,8 +15,6 @@ module Primer
       # @param tag [Symbol] Customize the element type of the rendered title container.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :title, lambda { |tag: TITLE_TAG_FALLBACK, **system_arguments, &block|
-        raise ArgumentError, "Title must be a string" unless block.call.is_a?(String)
-
         system_arguments[:tag] = fetch_or_fallback(TITLE_TAG_OPTIONS, tag, TITLE_TAG_FALLBACK)
         system_arguments[:font_size] ||= 3
         system_arguments[:mr] ||= 2
@@ -28,8 +26,6 @@ module Primer
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :caption, lambda { |**system_arguments, &block|
-        raise ArgumentError, "Caption must be a string" unless block.call.is_a?(String)
-
         system_arguments[:color] ||= :subtle
         system_arguments[:mr] ||= 2
         system_arguments[:display] ||= [:none, :block]
@@ -40,9 +36,7 @@ module Primer
       # Optional right-side content
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_one :additional_information, lambda { |**system_arguments, &block|
-        raise ArgumentError, "The additional information must be a string" unless block.call.is_a?(String)
-
+      renders_one :additional_information, lambda { |**system_arguments|
         Primer::BaseComponent.new(tag: :div, **system_arguments)
       }
 

data/app/components/primer/open_project/page_header/title.rb

@@ -9,7 +9,7 @@ module Primer
         status :open_project
 
         HEADING_TAG_OPTIONS = [:h1, :h2, :h3, :h4, :h5, :h6].freeze
-        HEADING_TAG_FALLBACK = :h1
+        HEADING_TAG_FALLBACK = :h2
 
         renders_one :editable_form, lambda { |model: false, update_path:, cancel_path:, input_name: :title, method: :put, label: I18n.t(:label_title), placeholder: I18n.t(:label_title), **system_arguments|
           primer_form_with(

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

@@ -22,6 +22,7 @@ export declare class TreeViewElement extends HTMLElement {
     getNodeCheckedValue(node: Element): TreeViewCheckedValue;
     nodeHasCheckBox(node: Element): boolean;
     nodeHasNativeAction(node: Element): boolean;
+    expandAncestorsForNode(node: HTMLElement): void;
     infoFromNode(node: Element, newCheckedValue?: TreeViewCheckedValue): TreeViewNodeInfo | null;
 }
 declare global {

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

@@ -15,7 +15,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _TreeViewElement_instances, _TreeViewElement_abortController, _TreeViewElement_eventIsActivation, _TreeViewElement_nodeForEvent, _TreeViewElement_handleNodeEvent, _TreeViewElement_eventIsCheckboxToggle, _TreeViewElement_handleCheckboxToggle, _TreeViewElement_handleNodeActivated, _TreeViewElement_handleNodeFocused, _TreeViewElement_handleNodeKeyboardEvent, _TreeViewElement_setNodeCheckedValue;
+var _TreeViewElement_instances, _TreeViewElement_abortController, _TreeViewElement_autoExpandFrom, _TreeViewElement_eventIsActivation, _TreeViewElement_nodeForEvent, _TreeViewElement_handleNodeEvent, _TreeViewElement_eventIsCheckboxToggle, _TreeViewElement_handleCheckboxToggle, _TreeViewElement_handleNodeActivated, _TreeViewElement_handleNodeFocused, _TreeViewElement_handleNodeKeyboardEvent, _TreeViewElement_setNodeCheckedValue;
 import { controller } from '@github/catalyst';
 import { useRovingTabIndex } from './tree_view_roving_tab_index';
 let TreeViewElement = class TreeViewElement extends HTMLElement {
@@ -30,6 +30,24 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
         this.addEventListener('focusin', this, { signal });
         this.addEventListener('keydown', this, { signal });
         useRovingTabIndex(this);
+        // catch-all for any straggler nodes that aren't available when connectedCallback runs
+        new MutationObserver(mutations => {
+            for (const mutation of mutations) {
+                for (const addedNode of mutation.addedNodes) {
+                    if (!(addedNode instanceof HTMLElement))
+                        continue;
+                    // eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
+                    if (addedNode.querySelector('[aria-expanded=true]')) {
+                        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_autoExpandFrom).call(this, addedNode);
+                    }
+                }
+            }
+        }).observe(this, { childList: true, subtree: true });
+        // eslint-disable-next-line github/no-then -- We don't want to wait for this to resolve, just get on with it
+        customElements.whenDefined('tree-view-sub-tree-node').then(() => {
+            // depends on TreeViewSubTreeNodeElement#eachAncestorSubTreeNode, which may not be defined yet
+            __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_autoExpandFrom).call(this, this);
+        });
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _TreeViewElement_abortController, "f").abort();
@@ -132,6 +150,16 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
     nodeHasNativeAction(node) {
         return node instanceof HTMLAnchorElement || node instanceof HTMLButtonElement;
     }
+    expandAncestorsForNode(node) {
+        const subTreeNode = node.closest('tree-view-sub-tree-node');
+        if (!subTreeNode)
+            return;
+        for (const ancestor of subTreeNode.eachAncestorSubTreeNode()) {
+            if (!ancestor.expanded) {
+                ancestor.expand();
+            }
+        }
+    }
     // PRIVATE API METHOD
     //
     // This would normally be marked private, but it's called by TreeViewSubTreeNodes
@@ -152,6 +180,11 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
 };
 _TreeViewElement_abortController = new WeakMap();
 _TreeViewElement_instances = new WeakSet();
+_TreeViewElement_autoExpandFrom = function _TreeViewElement_autoExpandFrom(root) {
+    for (const element of root.querySelectorAll('[aria-expanded=true]')) {
+        this.expandAncestorsForNode(element);
+    }
+};
 _TreeViewElement_eventIsActivation = function _TreeViewElement_eventIsActivation(event) {
     return event.type === 'click';
 };

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

@@ -14,6 +14,32 @@ export class TreeViewElement extends HTMLElement {
     this.addEventListener('keydown', this, {signal})
 
     useRovingTabIndex(this)
+
+    // catch-all for any straggler nodes that aren't available when connectedCallback runs
+    new MutationObserver(mutations => {
+      for (const mutation of mutations) {
+        for (const addedNode of mutation.addedNodes) {
+          if (!(addedNode instanceof HTMLElement)) continue
+
+          // eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
+          if (addedNode.querySelector('[aria-expanded=true]')) {
+            this.#autoExpandFrom(addedNode)
+          }
+        }
+      }
+    }).observe(this, {childList: true, subtree: true})
+
+    // eslint-disable-next-line github/no-then -- We don't want to wait for this to resolve, just get on with it
+    customElements.whenDefined('tree-view-sub-tree-node').then(() => {
+      // depends on TreeViewSubTreeNodeElement#eachAncestorSubTreeNode, which may not be defined yet
+      this.#autoExpandFrom(this)
+    })
+  }
+
+  #autoExpandFrom(root: HTMLElement) {
+    for (const element of root.querySelectorAll('[aria-expanded=true]')) {
+      this.expandAncestorsForNode(element as HTMLElement)
+    }
   }
 
   disconnectedCallback() {
@@ -246,6 +272,17 @@ export class TreeViewElement extends HTMLElement {
     return node instanceof HTMLAnchorElement || node instanceof HTMLButtonElement
   }
 
+  expandAncestorsForNode(node: HTMLElement) {
+    const subTreeNode = node.closest('tree-view-sub-tree-node') as TreeViewSubTreeNodeElement
+    if (!subTreeNode) return
+
+    for (const ancestor of subTreeNode.eachAncestorSubTreeNode()) {
+      if (!ancestor.expanded) {
+        ancestor.expand()
+      }
+    }
+  }
+
   // PRIVATE API METHOD
   //
   // This would normally be marked private, but it's called by TreeViewSubTreeNodes

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

@@ -28,6 +28,7 @@ export declare class TreeViewSubTreeNodeElement extends HTMLElement {
     get nodes(): NodeListOf<Element>;
     eachDirectDescendantNode(): Generator<Element>;
     eachDescendantNode(): Generator<Element>;
+    eachAncestorSubTreeNode(): Generator<TreeViewSubTreeNodeElement>;
     get isEmpty(): boolean;
     get treeView(): TreeViewElement | null;
     toggleChecked(): void;

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

@@ -165,6 +165,16 @@ let TreeViewSubTreeNodeElement = class TreeViewSubTreeNodeElement extends HTMLEl
             yield node;
         }
     }
+    *eachAncestorSubTreeNode() {
+        if (!this.treeView)
+            return;
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        let current = this;
+        while (current && this.treeView.contains(current)) {
+            yield current;
+            current = current.parentElement?.closest('tree-view-sub-tree-node');
+        }
+    }
     get isEmpty() {
         return this.nodes.length === 0;
     }
@@ -230,6 +240,9 @@ _TreeViewSubTreeNodeElement_handleIncludeFragmentEvent = function _TreeViewSubTr
             this.loadingState = 'success';
             break;
         case 'include-fragment-replaced':
+            // Make sure to expand the new sub-tree, otherwise it looks like nothing happened. This prevents
+            // having to remember to pass `SubTree.new(expanded: true)` in the controller.
+            this.expanded = true;
             if (__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_activeElementIsLoader, "f")) {
                 const firstItem = this.querySelector('[role=group] > :first-child');
                 if (!firstItem)
@@ -308,6 +321,7 @@ _TreeViewSubTreeNodeElement_update = function _TreeViewSubTreeNodeElement_update
         if (this.subTree)
             this.subTree.hidden = false;
         this.node.setAttribute('aria-expanded', 'true');
+        this.treeView?.expandAncestorsForNode(this);
         if (this.iconPair) {
             this.iconPair.showExpanded();
         }

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

@@ -217,6 +217,19 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
     }
   }
 
+  *eachAncestorSubTreeNode(): Generator<TreeViewSubTreeNodeElement> {
+    if (!this.treeView) return
+
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    let current: TreeViewSubTreeNodeElement | null = this
+
+    while (current && this.treeView.contains(current)) {
+      yield current
+
+      current = current.parentElement?.closest('tree-view-sub-tree-node') as TreeViewSubTreeNodeElement | null
+    }
+  }
+
   get isEmpty(): boolean {
     return this.nodes.length === 0
   }
@@ -252,6 +265,10 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
         break
 
       case 'include-fragment-replaced':
+        // Make sure to expand the new sub-tree, otherwise it looks like nothing happened. This prevents
+        // having to remember to pass `SubTree.new(expanded: true)` in the controller.
+        this.expanded = true
+
         if (this.#activeElementIsLoader) {
           const firstItem = this.querySelector('[role=group] > :first-child') as HTMLElement | null
           if (!firstItem) return
@@ -377,6 +394,7 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
     if (this.expanded) {
       if (this.subTree) this.subTree.hidden = false
       this.node.setAttribute('aria-expanded', 'true')
+      this.treeView?.expandAncestorsForNode(this)
 
       if (this.iconPair) {
         this.iconPair.showExpanded()

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 67
+      MINOR = 68
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/previews/primer/open_project/border_box/collapsible_header_preview/playground.html.erb

@@ -4,7 +4,7 @@
                                                                      collapsed: collapsed)) do |header| %>
       <% header.with_title { title } %>
       <% header.with_count(count: count) %>
-      <% header.with_description { description } unless description.nil? %>
+      <% header.with_description { description } %>
     <% end %>
   <% end %>
   <% component.with_body { "Body" } %>

data/previews/primer/open_project/tree_view_preview/async_alpha.html.erb

@@ -0,0 +1,12 @@
+<div style="max-width: 400px">
+  <%= render(Primer::OpenProject::TreeView.new) do |tree_view| %>
+    <% tree_view.with_sub_tree(label: "primer") do |sub_tree| %>
+      <% sub_tree.with_leading_visual_icons do |icons| %>
+        <% icons.with_expanded_icon(icon: :"file-directory-open-fill", color: :accent) %>
+        <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
+      <% end %>
+
+      <% sub_tree.with_loading_skeleton(src: tree_view_items_async_alpha_path(action_menu_expanded: action_menu_expanded)) %>
+    <% end %>
+  <% end %>
+</div>

data/previews/primer/open_project/tree_view_preview.rb

@@ -76,6 +76,15 @@ module Primer
         })
       end
 
+      # @label Async alpha
+      #
+      # @param action_menu_expanded [Boolean] toggle
+      def async_alpha(action_menu_expanded: false)
+        render_with_template(locals: {
+          action_menu_expanded: coerce_bool(action_menu_expanded)
+        })
+      end
+
       # @label Leaf node playground
       #
       # @param label [String] text
@@ -117,6 +126,21 @@ module Primer
         })
       end
 
+      # @label Auto expansion
+      #
+      def auto_expansion
+        render(Primer::OpenProject::TreeView.new) do |tree|
+          tree.with_sub_tree(label: "Level 1") do |level1|
+            level1.with_sub_tree(label: "Level 2") do |level2|
+              # marking this node as expanded should automatically expand all ancestors
+              level2.with_sub_tree(label: "Level 3", expanded: true) do |level3|
+                level3.with_leaf(label: "Level 4")
+              end
+            end
+          end
+        end
+      end
+
       private
 
       def coerce_bool(value)

data/static/constants.json

@@ -1721,7 +1721,7 @@
   },
   "Primer::OpenProject::PageHeader::Title": {
     "GeneratedSlotMethods": "Primer::OpenProject::PageHeader::Title::GeneratedSlotMethods",
-    "HEADING_TAG_FALLBACK": "h1",
+    "HEADING_TAG_FALLBACK": "h2",
     "HEADING_TAG_OPTIONS": [
       "h1",
       "h2",

data/static/info_arch.json

@@ -20619,6 +20619,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/open_project/tree_view/async_alpha",
+        "name": "async_alpha",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/open_project/tree_view/leaf_node_playground",
         "name": "leaf_node_playground",
@@ -20657,6 +20670,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/open_project/tree_view/auto_expansion",
+        "name": "auto_expansion",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [

data/static/previews.json

@@ -8988,6 +8988,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/open_project/tree_view/async_alpha",
+        "name": "async_alpha",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/open_project/tree_view/leaf_node_playground",
         "name": "leaf_node_playground",
@@ -9026,6 +9039,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/open_project/tree_view/auto_expansion",
+        "name": "auto_expansion",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.67.0
+  version: 0.68.0
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-05-23 00:00:00.000000000 Z
+date: 2025-05-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -1175,6 +1175,7 @@ files:
 - previews/primer/open_project/sub_header_preview/custom_filter_button.html.erb
 - previews/primer/open_project/sub_header_preview/dialog_buttons.html.erb
 - previews/primer/open_project/tree_view_preview.rb
+- previews/primer/open_project/tree_view_preview/async_alpha.html.erb
 - previews/primer/open_project/tree_view_preview/buttons.html.erb
 - previews/primer/open_project/tree_view_preview/default.html.erb
 - previews/primer/open_project/tree_view_preview/empty.html.erb