@openproject/primer-view-components 0.67.0 → 0.68.0-rc.882e71b3f

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

package/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';
 };

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

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

package/package.json

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