@primer/view-components 0.43.6 → 0.44.0-rc.dd789cab

package/app/components/primer/alpha/skeleton_box.css

@@ -0,0 +1 @@
+@keyframes shimmer{0%{mask-position:200%}to{mask-position:0}}.SkeletonBox{animation:shimmer;background-color:var(--bgColor-muted);border-radius:var(--borderRadius-small);display:block;height:1rem}@media (prefers-reduced-motion:no-preference){.SkeletonBox{animation:shimmer;animation-duration:1s;animation-iteration-count:infinite;mask-image:linear-gradient(75deg,#000 30%,#000000a6 80%);mask-size:200%}}@media (forced-colors:active){.SkeletonBox{outline:1px solid #0000;outline-offset:-1px}}

package/app/components/primer/alpha/skeleton_box.css.json

@@ -0,0 +1,6 @@
+{
+  "name": "alpha/skeleton_box",
+  "selectors": [
+    ".SkeletonBox"
+  ]
+}

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

@@ -0,0 +1,39 @@
+import { TreeViewSubTreeNodeElement } from './tree_view_sub_tree_node_element';
+import type { TreeViewNodeType, TreeViewCheckedValue, TreeViewNodeInfo } from '../../shared_events';
+export declare class TreeViewElement extends HTMLElement {
+    #private;
+    formInputContainer: HTMLElement;
+    formInputPrototype: HTMLInputElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+    getFormInputValueForNode(node: Element): string | null;
+    getNodePath(node: Element): string[];
+    getNodeType(node: Element): TreeViewNodeType | null;
+    markCurrentAtPath(path: string[]): void;
+    get currentNode(): HTMLLIElement | null;
+    expandAtPath(path: string[]): void;
+    collapseAtPath(path: string[]): void;
+    toggleAtPath(path: string[]): void;
+    checkAtPath(path: string[]): void;
+    uncheckAtPath(path: string[]): void;
+    toggleCheckedAtPath(path: string[]): void;
+    checkedValueAtPath(path: string[]): TreeViewCheckedValue;
+    disabledValueAtPath(path: string[]): boolean;
+    nodeAtPath(path: string[], selector?: string): Element | null;
+    subTreeAtPath(path: string[]): TreeViewSubTreeNodeElement | null;
+    leafAtPath(path: string[]): HTMLLIElement | null;
+    setNodeCheckedValue(node: Element, value: TreeViewCheckedValue): void;
+    getNodeCheckedValue(node: Element): TreeViewCheckedValue;
+    getNodeDisabledValue(node: Element): boolean;
+    setNodeDisabledValue(node: Element, disabled: boolean): void;
+    nodeHasCheckBox(node: Element): boolean;
+    nodeHasNativeAction(node: Element): boolean;
+    expandAncestorsForNode(node: HTMLElement): void;
+    infoFromNode(node: Element, newCheckedValue?: TreeViewCheckedValue): TreeViewNodeInfo | null;
+}
+declare global {
+    interface Window {
+        TreeViewElement: typeof TreeViewElement;
+    }
+}

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

@@ -0,0 +1,363 @@
+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 __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+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 _TreeViewElement_instances, _TreeViewElement_abortController, _TreeViewElement_autoExpandFrom, _TreeViewElement_eventIsActivation, _TreeViewElement_nodeForEvent, _TreeViewElement_handleNodeEvent, _TreeViewElement_eventIsCheckboxToggle, _TreeViewElement_handleCheckboxToggle, _TreeViewElement_handleNodeActivated, _TreeViewElement_handleNodeFocused, _TreeViewElement_handleNodeKeyboardEvent;
+import { controller, target } from '@github/catalyst';
+import { useRovingTabIndex } from './tree_view_roving_tab_index';
+let TreeViewElement = class TreeViewElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _TreeViewElement_instances.add(this);
+        _TreeViewElement_abortController.set(this, void 0);
+    }
+    connectedCallback() {
+        const { signal } = (__classPrivateFieldSet(this, _TreeViewElement_abortController, new AbortController(), "f"));
+        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]')) {
+                        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_autoExpandFrom).call(this, 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();
+                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);
+        });
+        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
+            __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_autoExpandFrom).call(this, this);
+        });
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _TreeViewElement_abortController, "f").abort();
+    }
+    handleEvent(event) {
+        const node = __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_nodeForEvent).call(this, event);
+        if (node) {
+            __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleNodeEvent).call(this, node, event);
+        }
+    }
+    getFormInputValueForNode(node) {
+        return node.getAttribute('data-value');
+    }
+    getNodePath(node) {
+        const rawPath = node.getAttribute('data-path');
+        if (rawPath) {
+            return JSON.parse(rawPath);
+        }
+        return [];
+    }
+    getNodeType(node) {
+        return node.getAttribute('data-node-type');
+    }
+    markCurrentAtPath(path) {
+        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() {
+        return this.querySelector('[aria-current=true]');
+    }
+    expandAtPath(path) {
+        const node = this.subTreeAtPath(path);
+        if (!node)
+            return;
+        node.expand();
+    }
+    collapseAtPath(path) {
+        const node = this.subTreeAtPath(path);
+        if (!node)
+            return;
+        node.collapse();
+    }
+    toggleAtPath(path) {
+        const node = this.subTreeAtPath(path);
+        if (!node)
+            return;
+        node.toggle();
+    }
+    checkAtPath(path) {
+        const node = this.nodeAtPath(path);
+        if (!node)
+            return;
+        this.setNodeCheckedValue(node, 'true');
+    }
+    uncheckAtPath(path) {
+        const node = this.nodeAtPath(path);
+        if (!node)
+            return;
+        this.setNodeCheckedValue(node, 'false');
+    }
+    toggleCheckedAtPath(path) {
+        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) {
+        const node = this.nodeAtPath(path);
+        if (!node)
+            return 'false';
+        return this.getNodeCheckedValue(node);
+    }
+    disabledValueAtPath(path) {
+        const node = this.nodeAtPath(path);
+        if (!node)
+            return false;
+        return this.getNodeDisabledValue(node);
+    }
+    nodeAtPath(path, selector) {
+        const pathStr = JSON.stringify(path);
+        return this.querySelector(`${selector || ''}[data-path="${CSS.escape(pathStr)}"]`);
+    }
+    subTreeAtPath(path) {
+        const node = this.nodeAtPath(path, '[data-node-type=sub-tree]');
+        if (!node)
+            return null;
+        return node.closest('tree-view-sub-tree-node');
+    }
+    leafAtPath(path) {
+        return this.nodeAtPath(path, '[data-node-type=leaf]');
+    }
+    setNodeCheckedValue(node, value) {
+        node.setAttribute('aria-checked', value.toString());
+    }
+    getNodeCheckedValue(node) {
+        return (node.getAttribute('aria-checked') || 'false');
+    }
+    getNodeDisabledValue(node) {
+        return node.getAttribute('aria-disabled') === 'true';
+    }
+    setNodeDisabledValue(node, disabled) {
+        if (disabled) {
+            node.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            node.removeAttribute('aria-disabled');
+        }
+    }
+    nodeHasCheckBox(node) {
+        return node.querySelector('.TreeViewItemCheckbox') !== null;
+    }
+    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
+    // and thus must be public.
+    infoFromNode(node, newCheckedValue) {
+        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,
+        };
+    }
+};
+_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';
+};
+_TreeViewElement_nodeForEvent = function _TreeViewElement_nodeForEvent(event) {
+    const eventTarget = event.target;
+    const node = eventTarget.closest('[role=treeitem]');
+    if (!node)
+        return null;
+    if (eventTarget.closest('.TreeViewItemToggle'))
+        return null;
+    if (eventTarget.closest('.TreeViewItemLeadingAction'))
+        return null;
+    return node;
+};
+_TreeViewElement_handleNodeEvent = function _TreeViewElement_handleNodeEvent(node, event) {
+    if (__classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_eventIsCheckboxToggle).call(this, event, node)) {
+        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleCheckboxToggle).call(this, event, node);
+    }
+    else if (__classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_eventIsActivation).call(this, event)) {
+        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleNodeActivated).call(this, event, node);
+    }
+    else if (event.type === 'focusin') {
+        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleNodeFocused).call(this, node);
+    }
+    else if (event instanceof KeyboardEvent) {
+        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleNodeKeyboardEvent).call(this, event, node);
+    }
+};
+_TreeViewElement_eventIsCheckboxToggle = function _TreeViewElement_eventIsCheckboxToggle(event, node) {
+    return event.type === 'click' && this.nodeHasCheckBox(node);
+};
+_TreeViewElement_handleCheckboxToggle = function _TreeViewElement_handleCheckboxToggle(event, node) {
+    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');
+    }
+};
+_TreeViewElement_handleNodeActivated = function _TreeViewElement_handleNodeActivated(event, node) {
+    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),
+    }));
+};
+_TreeViewElement_handleNodeFocused = function _TreeViewElement_handleNodeFocused(node) {
+    const previousNode = this.querySelector('[aria-selected=true]');
+    previousNode?.setAttribute('aria-selected', 'false');
+    node.setAttribute('aria-selected', 'true');
+};
+_TreeViewElement_handleNodeKeyboardEvent = function _TreeViewElement_handleNodeKeyboardEvent(event, node) {
+    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;
+    }
+};
+__decorate([
+    target
+], TreeViewElement.prototype, "formInputContainer", void 0);
+__decorate([
+    target
+], TreeViewElement.prototype, "formInputPrototype", void 0);
+TreeViewElement = __decorate([
+    controller
+], TreeViewElement);
+export { TreeViewElement };
+if (!window.customElements.get('tree-view')) {
+    window.TreeViewElement = TreeViewElement;
+    window.customElements.define('tree-view', TreeViewElement);
+}

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

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

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

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

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

package/app/components/primer/alpha/tree_view/tree_view_roving_tab_index.js

@@ -0,0 +1,130 @@
+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: () => {
+            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 && collapsedParent(next, root)) {
+        next = direction === 'next' ? walker.nextNode() : walker.previousNode();
+    }
+    return next instanceof HTMLElement ? next : undefined;
+}
+function collapsedParent(node, root) {
+    for (const ancestor of root.querySelectorAll('[role=treeitem][aria-expanded=false]')) {
+        if (node === ancestor)
+            continue;
+        if (ancestor.closest('li')?.contains(node)) {
+            return ancestor;
+        }
+    }
+    return null;
+}
+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;
+}