openproject-primer_view_components 0.64.0 → 0.65.0

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

@@ -0,0 +1,15 @@
+export declare class TreeViewIconPairElement extends HTMLElement {
+    #private;
+    expandedIcon: HTMLElement;
+    collapsedIcon: HTMLElement;
+    expanded: boolean;
+    connectedCallback(): void;
+    showExpanded(): void;
+    showCollapsed(): void;
+    toggle(): void;
+}
+declare global {
+    interface Window {
+        TreeViewIconPairElement: typeof TreeViewIconPairElement;
+    }
+}

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

@@ -0,0 +1,62 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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 _TreeViewIconPairElement_instances, _TreeViewIconPairElement_update;
+import { controller, target } from '@github/catalyst';
+import { observeMutationsUntilConditionMet } from '../../utils';
+let TreeViewIconPairElement = class TreeViewIconPairElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _TreeViewIconPairElement_instances.add(this);
+    }
+    connectedCallback() {
+        observeMutationsUntilConditionMet(this, () => Boolean(this.collapsedIcon) && Boolean(this.expandedIcon), () => {
+            this.expanded = this.collapsedIcon.hidden;
+        });
+    }
+    showExpanded() {
+        this.expanded = true;
+        __classPrivateFieldGet(this, _TreeViewIconPairElement_instances, "m", _TreeViewIconPairElement_update).call(this);
+    }
+    showCollapsed() {
+        this.expanded = false;
+        __classPrivateFieldGet(this, _TreeViewIconPairElement_instances, "m", _TreeViewIconPairElement_update).call(this);
+    }
+    toggle() {
+        this.expanded = !this.expanded;
+        __classPrivateFieldGet(this, _TreeViewIconPairElement_instances, "m", _TreeViewIconPairElement_update).call(this);
+    }
+};
+_TreeViewIconPairElement_instances = new WeakSet();
+_TreeViewIconPairElement_update = function _TreeViewIconPairElement_update() {
+    if (this.expanded) {
+        this.expandedIcon.hidden = false;
+        this.collapsedIcon.hidden = true;
+    }
+    else {
+        this.expandedIcon.hidden = true;
+        this.collapsedIcon.hidden = false;
+    }
+};
+__decorate([
+    target
+], TreeViewIconPairElement.prototype, "expandedIcon", void 0);
+__decorate([
+    target
+], TreeViewIconPairElement.prototype, "collapsedIcon", void 0);
+TreeViewIconPairElement = __decorate([
+    controller
+], TreeViewIconPairElement);
+export { TreeViewIconPairElement };
+if (!window.customElements.get('tree-view-icon-pair')) {
+    window.TreeViewIconPairElement = TreeViewIconPairElement;
+    window.customElements.define('tree-view-icon-pair', TreeViewIconPairElement);
+}

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

@@ -0,0 +1,56 @@
+import {controller, target} from '@github/catalyst'
+import {observeMutationsUntilConditionMet} from '../../utils'
+
+@controller
+export class TreeViewIconPairElement extends HTMLElement {
+  @target expandedIcon: HTMLElement
+  @target collapsedIcon: HTMLElement
+
+  expanded: boolean
+
+  connectedCallback() {
+    observeMutationsUntilConditionMet(
+      this,
+      () => Boolean(this.collapsedIcon) && Boolean(this.expandedIcon),
+      () => {
+        this.expanded = this.collapsedIcon.hidden
+      },
+    )
+  }
+
+  showExpanded() {
+    this.expanded = true
+    this.#update()
+  }
+
+  showCollapsed() {
+    this.expanded = false
+    this.#update()
+  }
+
+  toggle() {
+    this.expanded = !this.expanded
+    this.#update()
+  }
+
+  #update() {
+    if (this.expanded) {
+      this.expandedIcon.hidden = false
+      this.collapsedIcon.hidden = true
+    } else {
+      this.expandedIcon.hidden = true
+      this.collapsedIcon.hidden = false
+    }
+  }
+}
+
+if (!window.customElements.get('tree-view-icon-pair')) {
+  window.TreeViewIconPairElement = TreeViewIconPairElement
+  window.customElements.define('tree-view-icon-pair', TreeViewIconPairElement)
+}
+
+declare global {
+  interface Window {
+    TreeViewIconPairElement: typeof TreeViewIconPairElement
+  }
+}

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

@@ -0,0 +1,9 @@
+import { IncludeFragmentElement } from '@github/include-fragment-element';
+export declare class TreeViewIncludeFragmentElement extends IncludeFragmentElement {
+    request(): Request;
+}
+declare global {
+    interface Window {
+        TreeViewIncludeFragmentElement: typeof TreeViewIncludeFragmentElement;
+    }
+}

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

@@ -0,0 +1,29 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { controller } from '@github/catalyst';
+import { IncludeFragmentElement } from '@github/include-fragment-element';
+let TreeViewIncludeFragmentElement = class TreeViewIncludeFragmentElement extends IncludeFragmentElement {
+    request() {
+        const originalRequest = super.request();
+        const url = new URL(originalRequest.url);
+        url.searchParams.set('path', this.getAttribute('data-path') || '');
+        return new Request(url, {
+            method: originalRequest.method,
+            headers: originalRequest.headers,
+            credentials: originalRequest.credentials,
+        });
+    }
+};
+TreeViewIncludeFragmentElement = __decorate([
+    controller
+], TreeViewIncludeFragmentElement);
+export { TreeViewIncludeFragmentElement };
+if (!window.customElements.get('tree-view-include-fragment')) {
+    window.TreeViewIncludeFragmentElement = TreeViewIncludeFragmentElement;
+    // eslint-disable-next-line custom-elements/extends-correct-class
+    window.customElements.define('tree-view-include-fragment', TreeViewIncludeFragmentElement);
+}

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

@@ -0,0 +1,29 @@
+import {controller} from '@github/catalyst'
+import {IncludeFragmentElement} from '@github/include-fragment-element'
+
+@controller
+export class TreeViewIncludeFragmentElement extends IncludeFragmentElement {
+  request(): Request {
+    const originalRequest = super.request()
+    const url = new URL(originalRequest.url)
+    url.searchParams.set('path', this.getAttribute('data-path') || '')
+
+    return new Request(url, {
+      method: originalRequest.method,
+      headers: originalRequest.headers,
+      credentials: originalRequest.credentials,
+    })
+  }
+}
+
+if (!window.customElements.get('tree-view-include-fragment')) {
+  window.TreeViewIncludeFragmentElement = TreeViewIncludeFragmentElement
+  // eslint-disable-next-line custom-elements/extends-correct-class
+  window.customElements.define('tree-view-include-fragment', TreeViewIncludeFragmentElement)
+}
+
+declare global {
+  interface Window {
+    TreeViewIncludeFragmentElement: typeof TreeViewIncludeFragmentElement
+  }
+}

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

@@ -0,0 +1,3 @@
+import { TreeViewElement } from './tree_view';
+export declare function useRovingTabIndex(containerEl: TreeViewElement): void;
+export declare function getElementState(element: HTMLElement): 'open' | 'closed' | 'end';

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

@@ -0,0 +1,126 @@
+import { FocusKeys, focusZone } from '@primer/behaviors';
+// This code was adapted from the roving tab index implementation in primer/react, see:
+// https://github.com/primer/react/blob/f9785343716435f43e3d82482b057a17bd345c25/packages/react/src/TreeView/useRovingTabIndex.ts
+export function useRovingTabIndex(containerEl) {
+    // TODO: Initialize focus to the aria-current item if it exists
+    focusZone(containerEl, {
+        bindKeys: FocusKeys.ArrowVertical | FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd | FocusKeys.Backspace,
+        getNextFocusable: (_direction, from, event) => {
+            if (!(from instanceof HTMLElement))
+                return;
+            // Skip elements within a modal dialog
+            // This need to be in a try/catch to avoid errors in
+            // non-supported browsers
+            try {
+                if (from.closest('dialog:modal')) {
+                    return;
+                }
+            }
+            catch {
+                // Don't return
+            }
+            return getNextFocusableElement(from, event) ?? from;
+        },
+        focusInStrategy: () => {
+            // Don't try to execute the focusInStrategy if focus is coming from a click.
+            // The clicked row will receive focus correctly by default.
+            // If a chevron is clicked, setting the focus through the focuszone will prevent its toggle.
+            // if (mouseDownRef.current) {
+            //   return undefined
+            // }
+            let currentItem = containerEl.querySelector('[aria-current]');
+            currentItem = currentItem?.checkVisibility() ? currentItem : null;
+            const firstItem = containerEl.querySelector('[role="treeitem"]');
+            // Focus the aria-current item if it exists
+            if (currentItem instanceof HTMLElement) {
+                return currentItem;
+            }
+            // Otherwise, focus the activeElement if it's a treeitem
+            if (document.activeElement instanceof HTMLElement &&
+                containerEl.contains(document.activeElement) &&
+                document.activeElement.getAttribute('role') === 'treeitem') {
+                return document.activeElement;
+            }
+            // Otherwise, focus the first treeitem
+            return firstItem instanceof HTMLElement ? firstItem : undefined;
+        },
+    });
+}
+// DOM utilities used for focus management
+function getNextFocusableElement(activeElement, event) {
+    const elementState = getElementState(activeElement);
+    // Reference: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboard-interaction-24
+    switch (`${elementState} ${event.key}`) {
+        case 'open ArrowRight':
+            // Focus first child node
+            return getFirstChildElement(activeElement);
+        case 'open ArrowLeft':
+            // Close node; don't change focus
+            return;
+        case 'closed ArrowRight':
+            // Open node; don't change focus
+            return;
+        case 'closed ArrowLeft':
+            // Focus parent element
+            return getParentElement(activeElement);
+        case 'end ArrowRight':
+            // Do nothing
+            return;
+        case 'end ArrowLeft':
+            // Focus parent element
+            return getParentElement(activeElement);
+    }
+    // ArrowUp and ArrowDown behavior is the same regardless of element state
+    switch (event.key) {
+        case 'ArrowUp':
+            // Focus previous visible element
+            return getVisibleElement(activeElement, 'previous');
+        case 'ArrowDown':
+            // Focus next visible element
+            return getVisibleElement(activeElement, 'next');
+        case 'Backspace':
+            return getParentElement(activeElement);
+    }
+}
+export function getElementState(element) {
+    if (element.getAttribute('role') !== 'treeitem') {
+        throw new Error('Element is not a treeitem');
+    }
+    switch (element.getAttribute('aria-expanded')) {
+        case 'true':
+            return 'open';
+        case 'false':
+            return 'closed';
+        default:
+            return 'end';
+    }
+}
+function getVisibleElement(element, direction) {
+    const root = element.closest('[role=tree]');
+    if (!root)
+        return;
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, node => {
+        if (!(node instanceof HTMLElement))
+            return NodeFilter.FILTER_SKIP;
+        return node.getAttribute('role') === 'treeitem' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    });
+    let current = walker.firstChild();
+    while (current !== element) {
+        current = walker.nextNode();
+    }
+    let next = direction === 'next' ? walker.nextNode() : walker.previousNode();
+    // If next element is nested inside a collapsed subtree, continue iterating
+    while (next instanceof HTMLElement && next.parentElement?.closest('[role=treeitem][aria-expanded=false]')) {
+        next = direction === 'next' ? walker.nextNode() : walker.previousNode();
+    }
+    return next instanceof HTMLElement ? next : undefined;
+}
+function getFirstChildElement(element) {
+    const firstChild = element.querySelector('[role=treeitem]');
+    return firstChild instanceof HTMLElement ? firstChild : undefined;
+}
+function getParentElement(element) {
+    const group = element.closest('[role=group]');
+    const parent = group?.closest('[role=treeitem]');
+    return parent instanceof HTMLElement ? parent : undefined;
+}

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

@@ -0,0 +1,156 @@
+import {TreeViewElement} from './tree_view'
+import {FocusKeys, focusZone} from '@primer/behaviors'
+
+// This code was adapted from the roving tab index implementation in primer/react, see:
+// https://github.com/primer/react/blob/f9785343716435f43e3d82482b057a17bd345c25/packages/react/src/TreeView/useRovingTabIndex.ts
+export function useRovingTabIndex(containerEl: TreeViewElement) {
+  // TODO: Initialize focus to the aria-current item if it exists
+  focusZone(containerEl, {
+    bindKeys: FocusKeys.ArrowVertical | FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd | FocusKeys.Backspace,
+    getNextFocusable: (_direction, from, event) => {
+      if (!(from instanceof HTMLElement)) return
+
+      // Skip elements within a modal dialog
+      // This need to be in a try/catch to avoid errors in
+      // non-supported browsers
+      try {
+        if (from.closest('dialog:modal')) {
+          return
+        }
+      } catch {
+        // Don't return
+      }
+
+      return getNextFocusableElement(from, event) ?? from
+    },
+    focusInStrategy: () => {
+      // Don't try to execute the focusInStrategy if focus is coming from a click.
+      // The clicked row will receive focus correctly by default.
+      // If a chevron is clicked, setting the focus through the focuszone will prevent its toggle.
+      // if (mouseDownRef.current) {
+      //   return undefined
+      // }
+
+      let currentItem = containerEl.querySelector('[aria-current]')
+      currentItem = currentItem?.checkVisibility() ? currentItem : null
+
+      const firstItem = containerEl.querySelector('[role="treeitem"]')
+
+      // Focus the aria-current item if it exists
+      if (currentItem instanceof HTMLElement) {
+        return currentItem
+      }
+
+      // Otherwise, focus the activeElement if it's a treeitem
+      if (
+        document.activeElement instanceof HTMLElement &&
+        containerEl.contains(document.activeElement) &&
+        document.activeElement.getAttribute('role') === 'treeitem'
+      ) {
+        return document.activeElement
+      }
+
+      // Otherwise, focus the first treeitem
+      return firstItem instanceof HTMLElement ? firstItem : undefined
+    },
+  })
+}
+
+// DOM utilities used for focus management
+
+function getNextFocusableElement(activeElement: HTMLElement, event: KeyboardEvent): HTMLElement | undefined {
+  const elementState = getElementState(activeElement)
+
+  // Reference: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboard-interaction-24
+  switch (`${elementState} ${event.key}`) {
+    case 'open ArrowRight':
+      // Focus first child node
+      return getFirstChildElement(activeElement)
+
+    case 'open ArrowLeft':
+      // Close node; don't change focus
+      return
+
+    case 'closed ArrowRight':
+      // Open node; don't change focus
+      return
+
+    case 'closed ArrowLeft':
+      // Focus parent element
+      return getParentElement(activeElement)
+
+    case 'end ArrowRight':
+      // Do nothing
+      return
+
+    case 'end ArrowLeft':
+      // Focus parent element
+      return getParentElement(activeElement)
+  }
+
+  // ArrowUp and ArrowDown behavior is the same regardless of element state
+  switch (event.key) {
+    case 'ArrowUp':
+      // Focus previous visible element
+      return getVisibleElement(activeElement, 'previous')
+
+    case 'ArrowDown':
+      // Focus next visible element
+      return getVisibleElement(activeElement, 'next')
+
+    case 'Backspace':
+      return getParentElement(activeElement)
+  }
+}
+
+export function getElementState(element: HTMLElement): 'open' | 'closed' | 'end' {
+  if (element.getAttribute('role') !== 'treeitem') {
+    throw new Error('Element is not a treeitem')
+  }
+
+  switch (element.getAttribute('aria-expanded')) {
+    case 'true':
+      return 'open'
+    case 'false':
+      return 'closed'
+    default:
+      return 'end'
+  }
+}
+
+function getVisibleElement(element: HTMLElement, direction: 'next' | 'previous'): HTMLElement | undefined {
+  const root = element.closest('[role=tree]')
+
+  if (!root) return
+
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, node => {
+    if (!(node instanceof HTMLElement)) return NodeFilter.FILTER_SKIP
+    return node.getAttribute('role') === 'treeitem' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
+  })
+
+  let current = walker.firstChild()
+
+  while (current !== element) {
+    current = walker.nextNode()
+  }
+
+  let next = direction === 'next' ? walker.nextNode() : walker.previousNode()
+
+  // If next element is nested inside a collapsed subtree, continue iterating
+  while (next instanceof HTMLElement && next.parentElement?.closest('[role=treeitem][aria-expanded=false]')) {
+    next = direction === 'next' ? walker.nextNode() : walker.previousNode()
+  }
+
+  return next instanceof HTMLElement ? next : undefined
+}
+
+function getFirstChildElement(element: HTMLElement): HTMLElement | undefined {
+  const firstChild = element.querySelector('[role=treeitem]')
+  return firstChild instanceof HTMLElement ? firstChild : undefined
+}
+
+function getParentElement(element: HTMLElement): HTMLElement | undefined {
+  const group = element.closest('[role=group]')
+  const parent = group?.closest('[role=treeitem]')
+  return parent instanceof HTMLElement ? parent : undefined
+}

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

@@ -0,0 +1,38 @@
+import { TreeViewIconPairElement } from './tree_view_icon_pair_element';
+import { TreeViewIncludeFragmentElement } from './tree_view_include_fragment_element';
+import { TreeViewElement } from './tree_view';
+type LoadingState = 'loading' | 'error' | 'success';
+export declare class TreeViewSubTreeNodeElement extends HTMLElement {
+    #private;
+    node: HTMLElement;
+    subTree: HTMLElement;
+    iconPair: TreeViewIconPairElement;
+    toggleButton: HTMLElement;
+    expandedToggleIcon: HTMLElement;
+    collapsedToggleIcon: HTMLElement;
+    includeFragment: TreeViewIncludeFragmentElement;
+    loadingIndicator: HTMLElement;
+    loadingFailureMessage: HTMLElement;
+    retryButton: HTMLButtonElement;
+    expanded: boolean;
+    loadingState: LoadingState;
+    connectedCallback(): void;
+    get selectStrategy(): string;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+    expand(): void;
+    collapse(): void;
+    toggle(): void;
+    get nodes(): NodeListOf<Element>;
+    eachDirectDescendantNode(): Generator<Element>;
+    eachDescendantNode(): Generator<Element>;
+    get isEmpty(): boolean;
+    get treeView(): TreeViewElement | null;
+    toggleChecked(): void;
+}
+declare global {
+    interface Window {
+        TreeViewSubTreeNodeElement: typeof TreeViewSubTreeNodeElement;
+    }
+}
+export {};