primer_view_components 0.43.5 → 0.44.0

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

@@ -0,0 +1,396 @@
+import {controller, target} from '@github/catalyst'
+import {TreeViewSubTreeNodeElement} from './tree_view_sub_tree_node_element'
+import {useRovingTabIndex} from './tree_view_roving_tab_index'
+import type {TreeViewNodeType, TreeViewCheckedValue, TreeViewNodeInfo} from '../../shared_events'
+
+@controller
+export class TreeViewElement extends HTMLElement {
+  @target formInputContainer: HTMLElement
+  @target formInputPrototype: HTMLInputElement
+
+  #abortController: AbortController
+
+  connectedCallback() {
+    const {signal} = (this.#abortController = new AbortController())
+    this.addEventListener('click', this, {signal})
+    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
+
+          if (addedNode.querySelector('[aria-expanded=true]')) {
+            this.#autoExpandFrom(addedNode)
+          }
+        }
+      }
+    }).observe(this, {childList: true, subtree: true})
+
+    const updateInputsObserver = new MutationObserver(mutations => {
+      if (!this.formInputContainer) return
+
+      // There is another MutationObserver in TreeViewSubTreeNodeElement that manages checking/unchecking
+      // nodes based on the component's select strategy. These two observers can conflict and cause infinite
+      // looping, so we make sure something actually changed before computing inputs again.
+      const somethingChanged = mutations.some(m => {
+        if (!(m.target instanceof HTMLElement)) return false
+        return m.target.getAttribute('aria-checked') !== m.oldValue
+      })
+
+      if (!somethingChanged) return
+
+      const newInputs = []
+
+      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)
+    })
+
+    updateInputsObserver.observe(this, {
+      childList: true,
+      subtree: true,
+      attributeFilter: ['aria-checked'],
+    })
+
+    // 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() {
+    this.#abortController.abort()
+  }
+
+  handleEvent(event: Event) {
+    const node = this.#nodeForEvent(event)
+
+    if (node) {
+      this.#handleNodeEvent(node, event)
+    }
+  }
+
+  #eventIsActivation(event: Event): boolean {
+    return event.type === 'click'
+  }
+
+  #nodeForEvent(event: Event): Element | null {
+    const eventTarget = event.target as Element
+    const node = eventTarget.closest('[role=treeitem]')
+    if (!node) return null
+
+    if (eventTarget.closest('.TreeViewItemToggle')) return null
+    if (eventTarget.closest('.TreeViewItemLeadingAction')) return null
+
+    return node
+  }
+
+  #handleNodeEvent(node: Element, event: Event) {
+    if (this.#eventIsCheckboxToggle(event, node)) {
+      this.#handleCheckboxToggle(event, node)
+    } else if (this.#eventIsActivation(event)) {
+      this.#handleNodeActivated(event, node)
+    } else if (event.type === 'focusin') {
+      this.#handleNodeFocused(node)
+    } else if (event instanceof KeyboardEvent) {
+      this.#handleNodeKeyboardEvent(event, node)
+    }
+  }
+
+  #eventIsCheckboxToggle(event: Event, node: Element) {
+    return event.type === 'click' && this.nodeHasCheckBox(node)
+  }
+
+  #handleCheckboxToggle(event: Event, node: Element) {
+    if (this.getNodeDisabledValue(node)) {
+      event.preventDefault()
+      return
+    }
+
+    // only handle checking of leaf nodes, see TreeViewSubTreeNodeElement for the code that
+    // handles checking sub tree items.
+    const type = this.getNodeType(node)
+    if (type !== 'leaf') return
+
+    if (this.getNodeCheckedValue(node) === 'true') {
+      this.setNodeCheckedValue(node, 'false')
+    } else {
+      this.setNodeCheckedValue(node, 'true')
+    }
+  }
+
+  #handleNodeActivated(event: Event, node: Element) {
+    if (this.getNodeDisabledValue(node)) {
+      event.preventDefault()
+      return
+    }
+
+    // do not emit activation events for buttons and anchors, since it is assumed any activation
+    // behavior for these element types is user- or browser-defined
+    if (!(node instanceof HTMLDivElement)) return
+
+    const path = this.getNodePath(node)
+
+    const activationSuccess = this.dispatchEvent(
+      new CustomEvent('treeViewBeforeNodeActivated', {
+        bubbles: true,
+        cancelable: true,
+        detail: this.infoFromNode(node),
+      }),
+    )
+
+    if (!activationSuccess) return
+
+    // navigate or trigger button, don't toggle
+    if (!this.nodeHasNativeAction(node)) {
+      this.toggleAtPath(path)
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('treeViewNodeActivated', {
+        bubbles: true,
+        detail: this.infoFromNode(node),
+      }),
+    )
+  }
+
+  #handleNodeFocused(node: Element) {
+    const previousNode = this.querySelector('[aria-selected=true]')
+    previousNode?.setAttribute('aria-selected', 'false')
+    node.setAttribute('aria-selected', 'true')
+  }
+
+  #handleNodeKeyboardEvent(event: KeyboardEvent, node: Element) {
+    if (!node || this.getNodeType(node) !== 'leaf') {
+      return
+    }
+
+    switch (event.key) {
+      case ' ':
+      case 'Enter':
+        if (this.getNodeDisabledValue(node)) {
+          event.preventDefault()
+          break
+        }
+
+        if (this.nodeHasCheckBox(node)) {
+          event.preventDefault()
+
+          if (this.getNodeCheckedValue(node) === 'true') {
+            this.setNodeCheckedValue(node, 'false')
+          } else {
+            this.setNodeCheckedValue(node, 'true')
+          }
+        } else if (node instanceof HTMLAnchorElement) {
+          // simulate click on space
+          node.click()
+        }
+
+        break
+    }
+  }
+
+  getFormInputValueForNode(node: Element): string | null {
+    return node.getAttribute('data-value')
+  }
+
+  getNodePath(node: Element): string[] {
+    const rawPath = node.getAttribute('data-path')
+
+    if (rawPath) {
+      return JSON.parse(rawPath)
+    }
+
+    return []
+  }
+
+  getNodeType(node: Element): TreeViewNodeType | null {
+    return node.getAttribute('data-node-type') as TreeViewNodeType | null
+  }
+
+  markCurrentAtPath(path: string[]) {
+    const pathStr = JSON.stringify(path)
+    const nodeToMark = this.querySelector(`[data-path="${CSS.escape(pathStr)}"`)
+    if (!nodeToMark) return
+
+    this.currentNode?.setAttribute('aria-current', 'false')
+    nodeToMark.setAttribute('aria-current', 'true')
+  }
+
+  get currentNode(): HTMLLIElement | null {
+    return this.querySelector('[aria-current=true]')
+  }
+
+  expandAtPath(path: string[]) {
+    const node = this.subTreeAtPath(path)
+    if (!node) return
+
+    node.expand()
+  }
+
+  collapseAtPath(path: string[]) {
+    const node = this.subTreeAtPath(path)
+    if (!node) return
+
+    node.collapse()
+  }
+
+  toggleAtPath(path: string[]) {
+    const node = this.subTreeAtPath(path)
+    if (!node) return
+
+    node.toggle()
+  }
+
+  checkAtPath(path: string[]) {
+    const node = this.nodeAtPath(path)
+    if (!node) return
+
+    this.setNodeCheckedValue(node, 'true')
+  }
+
+  uncheckAtPath(path: string[]) {
+    const node = this.nodeAtPath(path)
+    if (!node) return
+
+    this.setNodeCheckedValue(node, 'false')
+  }
+
+  toggleCheckedAtPath(path: string[]) {
+    const node = this.nodeAtPath(path)
+    if (!node) return
+
+    if (this.getNodeType(node) === 'leaf') {
+      if (this.getNodeCheckedValue(node) === 'true') {
+        this.uncheckAtPath(path)
+      } else {
+        this.checkAtPath(path)
+      }
+    }
+  }
+
+  checkedValueAtPath(path: string[]): TreeViewCheckedValue {
+    const node = this.nodeAtPath(path)
+    if (!node) return 'false'
+
+    return this.getNodeCheckedValue(node)
+  }
+
+  disabledValueAtPath(path: string[]): boolean {
+    const node = this.nodeAtPath(path)
+    if (!node) return false
+
+    return this.getNodeDisabledValue(node)
+  }
+
+  nodeAtPath(path: string[], selector?: string): Element | null {
+    const pathStr = JSON.stringify(path)
+    return this.querySelector(`${selector || ''}[data-path="${CSS.escape(pathStr)}"]`)
+  }
+
+  subTreeAtPath(path: string[]): TreeViewSubTreeNodeElement | null {
+    const node = this.nodeAtPath(path, '[data-node-type=sub-tree]')
+    if (!node) return null
+
+    return node.closest('tree-view-sub-tree-node') as TreeViewSubTreeNodeElement | null
+  }
+
+  leafAtPath(path: string[]): HTMLLIElement | null {
+    return this.nodeAtPath(path, '[data-node-type=leaf]') as HTMLLIElement | null
+  }
+
+  setNodeCheckedValue(node: Element, value: TreeViewCheckedValue) {
+    node.setAttribute('aria-checked', value.toString())
+  }
+
+  getNodeCheckedValue(node: Element): TreeViewCheckedValue {
+    return (node.getAttribute('aria-checked') || 'false') as TreeViewCheckedValue
+  }
+
+  getNodeDisabledValue(node: Element): boolean {
+    return node.getAttribute('aria-disabled') === 'true'
+  }
+
+  setNodeDisabledValue(node: Element, disabled: boolean) {
+    if (disabled) {
+      node.setAttribute('aria-disabled', 'true')
+    } else {
+      node.removeAttribute('aria-disabled')
+    }
+  }
+
+  nodeHasCheckBox(node: Element): boolean {
+    return node.querySelector('.TreeViewItemCheckbox') !== null
+  }
+
+  nodeHasNativeAction(node: Element): boolean {
+    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
+  // and thus must be public.
+  infoFromNode(node: Element, newCheckedValue?: TreeViewCheckedValue): TreeViewNodeInfo | null {
+    const type = this.getNodeType(node)
+    if (!type) return null
+
+    const checkedValue = this.getNodeCheckedValue(node)
+
+    return {
+      node,
+      type,
+      path: this.getNodePath(node),
+      checkedValue: newCheckedValue || checkedValue,
+      previousCheckedValue: checkedValue,
+    }
+  }
+}
+
+if (!window.customElements.get('tree-view')) {
+  window.TreeViewElement = TreeViewElement
+  window.customElements.define('tree-view', TreeViewElement)
+}
+
+declare global {
+  interface Window {
+    TreeViewElement: typeof TreeViewElement
+  }
+}

data/app/components/primer/alpha/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/alpha/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/alpha/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/alpha/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/alpha/tree_view/tree_view_include_fragment_element.js

@@ -0,0 +1,28 @@
+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;
+    window.customElements.define('tree-view-include-fragment', TreeViewIncludeFragmentElement);
+}

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

@@ -0,0 +1,28 @@
+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
+  window.customElements.define('tree-view-include-fragment', TreeViewIncludeFragmentElement)
+}
+
+declare global {
+  interface Window {
+    TreeViewIncludeFragmentElement: typeof TreeViewIncludeFragmentElement
+  }
+}

data/app/components/primer/alpha/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';