openproject-primer_view_components 0.78.0 → 0.78.1

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

@@ -38,6 +38,7 @@ export declare class TreeViewElement extends HTMLElement {
     changeSelectStrategy(newStrategy: SelectStrategy): void;
     infoFromNode(node: Element, newCheckedValue?: TreeViewCheckedValue): TreeViewNodeInfo | null;
     selectVariant(node: Element): SelectVariant;
+    updateHiddenFormInputs(): void;
 }
 declare global {
     interface Window {

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

@@ -56,28 +56,17 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
             });
             if (!somethingChanged)
                 return;
-            const newInputs = [];
-            // eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
-            for (const node of this.querySelectorAll('[role=treeitem][aria-checked=true]')) {
-                const newInput = this.formInputPrototype.cloneNode();
-                newInput.removeAttribute('data-target');
-                newInput.removeAttribute('form');
-                const payload = {
-                    path: this.getNodePath(node),
-                };
-                const inputValue = this.getFormInputValueForNode(node);
-                if (inputValue)
-                    payload.value = inputValue;
-                newInput.value = JSON.stringify(payload);
-                newInputs.push(newInput);
-            }
-            this.formInputContainer.replaceChildren(...newInputs);
+            this.updateHiddenFormInputs();
         });
         updateInputsObserver.observe(this, {
             childList: true,
             subtree: true,
             attributeFilter: ['aria-checked'],
         });
+        // Correctly initialize the form
+        if (this.formInputContainer) {
+            this.updateHiddenFormInputs();
+        }
         // 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
@@ -287,6 +276,24 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
     selectVariant(node) {
         return (node.getAttribute('data-select-variant') || 'none');
     }
+    updateHiddenFormInputs() {
+        const newInputs = [];
+        // eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
+        for (const node of this.querySelectorAll('[role=treeitem][aria-checked=true]')) {
+            const newInput = this.formInputPrototype.cloneNode();
+            newInput.removeAttribute('data-target');
+            newInput.removeAttribute('form');
+            const payload = {
+                path: this.getNodePath(node),
+            };
+            const inputValue = this.getFormInputValueForNode(node);
+            if (inputValue)
+                payload.value = inputValue;
+            newInput.value = JSON.stringify(payload);
+            newInputs.push(newInput);
+        }
+        this.formInputContainer.replaceChildren(...newInputs);
+    }
 };
 _TreeViewElement_abortController = new WeakMap();
 _TreeViewElement_instances = new WeakSet();

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

@@ -45,26 +45,7 @@ export class TreeViewElement extends HTMLElement {
 
       if (!somethingChanged) return
 
-      const newInputs = []
-
-      // eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
-      for (const node of this.querySelectorAll('[role=treeitem][aria-checked=true]')) {
-        const newInput = this.formInputPrototype.cloneNode() as HTMLInputElement
-        newInput.removeAttribute('data-target')
-        newInput.removeAttribute('form')
-
-        const payload: {path: string[]; value?: string} = {
-          path: this.getNodePath(node),
-        }
-
-        const inputValue = this.getFormInputValueForNode(node)
-        if (inputValue) payload.value = inputValue
-
-        newInput.value = JSON.stringify(payload)
-        newInputs.push(newInput)
-      }
-
-      this.formInputContainer.replaceChildren(...newInputs)
+      this.updateHiddenFormInputs()
     })
 
     updateInputsObserver.observe(this, {
@@ -73,6 +54,11 @@ export class TreeViewElement extends HTMLElement {
       attributeFilter: ['aria-checked'],
     })
 
+    // Correctly initialize the form
+    if (this.formInputContainer) {
+      this.updateHiddenFormInputs()
+    }
+
     // 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
@@ -483,6 +469,29 @@ export class TreeViewElement extends HTMLElement {
   selectVariant(node: Element): SelectVariant {
     return (node.getAttribute('data-select-variant') || 'none') as SelectVariant
   }
+
+  updateHiddenFormInputs() {
+    const newInputs = []
+
+    // eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
+    for (const node of this.querySelectorAll('[role=treeitem][aria-checked=true]')) {
+      const newInput = this.formInputPrototype.cloneNode() as HTMLInputElement
+      newInput.removeAttribute('data-target')
+      newInput.removeAttribute('form')
+
+      const payload: {path: string[]; value?: string} = {
+        path: this.getNodePath(node),
+      }
+
+      const inputValue = this.getFormInputValueForNode(node)
+      if (inputValue) payload.value = inputValue
+
+      newInput.value = JSON.stringify(payload)
+      newInputs.push(newInput)
+    }
+
+    this.formInputContainer.replaceChildren(...newInputs)
+  }
 }
 
 if (!window.customElements.get('tree-view')) {

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

@@ -1 +1 @@
-.PageHeader{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:column;margin-bottom:var(--base-size-16);padding-bottom:var(--base-size-8)}.PageHeader--withTabNav{border-bottom:none;margin-bottom:0;padding-bottom:0}.PageHeader-contextBar{height:var(--control-small-size)}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end;margin-bottom:var(--base-size-8)}.PageHeader-title{flex:1 1 auto;font-size:var(--text-title-size-medium)}.PageHeader-title--large{font-size:var(--text-title-size-large)}.PageHeader-description{color:var(--fgColor-muted);flex:1 auto;font-size:var(--text-body-size-medium)}.PageHeader-description--underlined-links a{-webkit-text-decoration:underline;text-decoration:underline}.PageHeader-tabNavBar{overflow:auto}.PageHeader-tabNavBar .PageHeader-tabNav{min-width:max-content}.PageHeader--withTabNav .PageHeader-description{margin-bottom:var(--base-size-16)}.PageHeader-actions{align-items:center;display:flex;justify-content:flex-end}.PageHeader-breadcrumbs{display:block;width:100%}.PageHeader-leadingAction{margin-right:var(--base-size-4);margin-top:var(--base-size-2)}.PageHeader-parentLink{flex:1 1 auto}@media screen and (min-width:543.98px){.PageHeader--noBreadcrumb .PageHeader-contextBar{display:none}}.PageHeader--noBreadcrumb .PageHeader-titleBar{line-height:var(--control-small-size)}
+.PageHeader{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:column;margin-bottom:var(--base-size-16);padding-bottom:var(--base-size-8)}.PageHeader--withTabNav{border-bottom:none;margin-bottom:0;padding-bottom:0}.PageHeader-contextBar{height:var(--control-small-size)}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end;margin-bottom:var(--base-size-8)}.PageHeader-title{flex:1 1 auto;font-size:var(--text-title-size-medium)}.PageHeader-title--large{font-size:var(--text-title-size-large)}.PageHeader-description{color:var(--fgColor-muted);flex:1 auto;font-size:var(--text-body-size-medium)}.PageHeader-description--underlined-links a{-webkit-text-decoration:underline;text-decoration:underline}.PageHeader-tabNavBar{overflow:auto}.PageHeader-tabNavBar .PageHeader-tabNav{min-width:max-content}.PageHeader--withTabNav .PageHeader-description{margin-bottom:var(--base-size-16)}.PageHeader-actions{align-items:center;display:flex;justify-content:flex-end}.PageHeader-breadcrumbs{display:block;width:100%}.PageHeader-leadingAction{margin-right:var(--base-size-4);margin-top:var(--base-size-2)}.PageHeader-parentLink{flex:1 1 auto}@media screen and (min-width:543.98px){.PageHeader--noBreadcrumb .PageHeader-contextBar{display:none}}.PageHeader--noBreadcrumb .PageHeader-titleBar{line-height:var(--control-small-size)}.PageHeader--noBreadcrumb .PageHeader-actions{height:var(--control-small-size)}

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

@@ -17,6 +17,7 @@
     ".PageHeader-leadingAction",
     ".PageHeader-parentLink",
     ".PageHeader--noBreadcrumb .PageHeader-contextBar",
-    ".PageHeader--noBreadcrumb .PageHeader-titleBar"
+    ".PageHeader--noBreadcrumb .PageHeader-titleBar",
+    ".PageHeader--noBreadcrumb .PageHeader-actions"
   ]
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,oEAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,iCAAkC,CADlC,iCAIF,CAEA,wBACE,kBAAmB,CAEnB,eAAgB,CADhB,gBAEF,CAEA,uBAME,gCACF,CAEA,4CALE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAAyB,CAEzB,gCAUF,CAEA,kBAEE,aAAc,CADd,uCAEF,CAEA,yBACE,sCACF,CAGA,wBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAGF,CAEA,4CAEE,iCAA0B,CAA1B,yBACF,CAEA,sBACE,aACF,CAEA,yCACE,qBACF,CAEA,gDACE,iCACF,CAEA,oBAGE,kBAAmB,CADnB,YAAa,CADb,wBAGF,CAEA,wBACE,aAAc,CACd,UACF,CAEA,0BAEE,+BAAgC,CADhC,6BAEF,CAEA,uBACE,aACF,CAGA,uCACE,iDACE,YACF,CACF,CAGA,+CACE,qCACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--base-size-8);\n  margin-bottom: var(--base-size-16);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: column;\n}\n\n.PageHeader--withTabNav {\n  border-bottom: none;\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n\n.PageHeader-contextBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center;\n  margin-bottom: var(--base-size-8);\n  height: var(--control-small-size);\n}\n\n.PageHeader-titleBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center; /* Keep back button vertically aligned. */\n  margin-bottom: var(--base-size-8);\n}\n\n.PageHeader-title {\n  font-size: var(--text-title-size-medium);\n  flex: 1 1 auto;\n}\n\n.PageHeader-title--large {\n  font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 auto;\n}\n\n.PageHeader-description--underlined-links a {\n  /* Ensure the accessibility is met, given that the description is written in light grey */\n  text-decoration: underline;\n}\n\n.PageHeader-tabNavBar {\n  overflow: auto;\n}\n\n.PageHeader-tabNavBar .PageHeader-tabNav {\n  min-width: max-content;\n}\n\n.PageHeader--withTabNav .PageHeader-description {\n  margin-bottom: var(--base-size-16);\n}\n\n.PageHeader-actions {\n  justify-content: flex-end;\n  display: flex;\n  align-items: center;\n}\n\n.PageHeader-breadcrumbs {\n  display: block;\n  width: 100%;\n}\n\n.PageHeader-leadingAction {\n  margin-top: var(--base-size-2); /* to center align with label */\n  margin-right: var(--base-size-4);\n}\n\n.PageHeader-parentLink {\n  flex: 1 1 auto;\n}\n\n/* Hide the context bar on desktop when no breadcrumb is visible */\n@media screen and (min-width: 543.98px) {\n  .PageHeader--noBreadcrumb .PageHeader-contextBar {\n    display: none;\n  }\n}\n\n/* Match the title bar height with the toggle menu button for proper vertical alignment */\n.PageHeader--noBreadcrumb .PageHeader-titleBar {\n  line-height: var(--control-small-size);\n}"]}
+{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,oEAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,iCAAkC,CADlC,iCAIF,CAEA,wBACE,kBAAmB,CAEnB,eAAgB,CADhB,gBAEF,CAEA,uBAME,gCACF,CAEA,4CALE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAAyB,CAEzB,gCAUF,CAEA,kBAEE,aAAc,CADd,uCAEF,CAEA,yBACE,sCACF,CAGA,wBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAGF,CAEA,4CAEE,iCAA0B,CAA1B,yBACF,CAEA,sBACE,aACF,CAEA,yCACE,qBACF,CAEA,gDACE,iCACF,CAEA,oBAGE,kBAAmB,CADnB,YAAa,CADb,wBAGF,CAEA,wBACE,aAAc,CACd,UACF,CAEA,0BAEE,+BAAgC,CADhC,6BAEF,CAEA,uBACE,aACF,CAGA,uCACE,iDACE,YACF,CACF,CAIE,+CACE,qCACF,CAEA,8CACE,gCACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--base-size-8);\n  margin-bottom: var(--base-size-16);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: column;\n}\n\n.PageHeader--withTabNav {\n  border-bottom: none;\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n\n.PageHeader-contextBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center;\n  margin-bottom: var(--base-size-8);\n  height: var(--control-small-size);\n}\n\n.PageHeader-titleBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center; /* Keep back button vertically aligned. */\n  margin-bottom: var(--base-size-8);\n}\n\n.PageHeader-title {\n  font-size: var(--text-title-size-medium);\n  flex: 1 1 auto;\n}\n\n.PageHeader-title--large {\n  font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 auto;\n}\n\n.PageHeader-description--underlined-links a {\n  /* Ensure the accessibility is met, given that the description is written in light grey */\n  text-decoration: underline;\n}\n\n.PageHeader-tabNavBar {\n  overflow: auto;\n}\n\n.PageHeader-tabNavBar .PageHeader-tabNav {\n  min-width: max-content;\n}\n\n.PageHeader--withTabNav .PageHeader-description {\n  margin-bottom: var(--base-size-16);\n}\n\n.PageHeader-actions {\n  justify-content: flex-end;\n  display: flex;\n  align-items: center;\n}\n\n.PageHeader-breadcrumbs {\n  display: block;\n  width: 100%;\n}\n\n.PageHeader-leadingAction {\n  margin-top: var(--base-size-2); /* to center align with label */\n  margin-right: var(--base-size-4);\n}\n\n.PageHeader-parentLink {\n  flex: 1 1 auto;\n}\n\n/* Hide the context bar on desktop when no breadcrumb is visible */\n@media screen and (min-width: 543.98px) {\n  .PageHeader--noBreadcrumb .PageHeader-contextBar {\n    display: none;\n  }\n}\n\n/* Match the title bar and actions height with the toggle menu button for proper vertical alignment */\n.PageHeader--noBreadcrumb {\n  & .PageHeader-titleBar {\n    line-height: var(--control-small-size);\n  }\n\n  & .PageHeader-actions {\n    height: var(--control-small-size);\n  }\n}"]}

data/app/components/primer/open_project/page_header.pcss

@@ -91,7 +91,13 @@
   }
 }
 
-/* Match the title bar height with the toggle menu button for proper vertical alignment */
-.PageHeader--noBreadcrumb .PageHeader-titleBar {
-  line-height: var(--control-small-size);
+/* Match the title bar and actions height with the toggle menu button for proper vertical alignment */
+.PageHeader--noBreadcrumb {
+  & .PageHeader-titleBar {
+    line-height: var(--control-small-size);
+  }
+
+  & .PageHeader-actions {
+    height: var(--control-small-size);
+  }
 }

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 78
-      PATCH = 0
+      PATCH = 1
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/tree_view_preview/form_input.html.erb

@@ -2,7 +2,7 @@
   <%= render(Primer::Alpha::Stack.new) do %>
     <%= render(Primer::Alpha::TreeView.new(form_arguments: { builder: f, name: "folder_structure" })) do |tree| %>
       <% tree.with_sub_tree(label: "src", expanded: expanded, select_variant: select_variant, value: 0) do |sub_tree| %>
-        <% sub_tree.with_leaf(label: "button.rb", select_variant: select_variant, value: 1) %>
+        <% sub_tree.with_leaf(label: "button.rb", select_variant: select_variant, value: 1, checked: true) %>
         <% sub_tree.with_leaf(label: "icon_button.rb", current: true, select_variant: select_variant, value: 2) %>
       <% end %>
 

data/previews/primer/open_project/filterable_tree_view_preview/form_input.html.erb

@@ -7,7 +7,7 @@
         <% end %>
 
         <% hogwarts.with_sub_tree(label: "Slytherin", select_variant: select_variant, expanded: expanded) do |hufflepuff| %>
-          <% hufflepuff.with_leaf(label: "Draco Malfoy", select_variant: select_variant) %>
+          <% hufflepuff.with_leaf(label: "Draco Malfoy", select_variant: select_variant, checked: true) %>
         <% end %>
 
         <% hogwarts.with_sub_tree(label: "Hufflepuff", select_variant: select_variant, expanded: expanded) do |hufflepuff| %>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.78.0
+  version: 0.78.1
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-11-13 00:00:00.000000000 Z
+date: 2025-12-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview