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

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

@@ -0,0 +1,42 @@
+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 type SelectStrategy = 'self' | 'descendants' | 'mixed_descendants';
+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;
+    connectedCallback(): void;
+    get expanded(): boolean;
+    set expanded(newValue: boolean);
+    get loadingState(): LoadingState;
+    set loadingState(newState: LoadingState);
+    get selectStrategy(): SelectStrategy;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+    expand(): void;
+    collapse(): void;
+    toggle(): void;
+    get nodes(): NodeListOf<Element>;
+    eachDirectDescendantNode(): Generator<Element>;
+    eachDescendantNode(): Generator<Element>;
+    eachAncestorSubTreeNode(): Generator<TreeViewSubTreeNodeElement>;
+    get isEmpty(): boolean;
+    get treeView(): TreeViewElement | null;
+    toggleChecked(): void;
+}
+declare global {
+    interface Window {
+        TreeViewSubTreeNodeElement: typeof TreeViewSubTreeNodeElement;
+    }
+}
+export {};

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

@@ -0,0 +1,418 @@
+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 __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 _TreeViewSubTreeNodeElement_instances, _TreeViewSubTreeNodeElement_expanded, _TreeViewSubTreeNodeElement_loadingState, _TreeViewSubTreeNodeElement_abortController, _TreeViewSubTreeNodeElement_activeElementIsLoader, _TreeViewSubTreeNodeElement_handleToggleEvent, _TreeViewSubTreeNodeElement_handleIncludeFragmentEvent, _TreeViewSubTreeNodeElement_handleRetryButtonEvent, _TreeViewSubTreeNodeElement_handleKeyboardEvent, _TreeViewSubTreeNodeElement_handleCheckboxEvent, _TreeViewSubTreeNodeElement_update, _TreeViewSubTreeNodeElement_checkboxElement_get;
+import { controller, target } from '@github/catalyst';
+import { observeMutationsUntilConditionMet } from '../../utils';
+let TreeViewSubTreeNodeElement = class TreeViewSubTreeNodeElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _TreeViewSubTreeNodeElement_instances.add(this);
+        _TreeViewSubTreeNodeElement_expanded.set(this, null);
+        _TreeViewSubTreeNodeElement_loadingState.set(this, 'success');
+        _TreeViewSubTreeNodeElement_abortController.set(this, void 0);
+        _TreeViewSubTreeNodeElement_activeElementIsLoader.set(this, false);
+    }
+    connectedCallback() {
+        observeMutationsUntilConditionMet(this, () => Boolean(this.node) && Boolean(this.subTree), () => {
+            __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_update).call(this);
+        });
+        const { signal } = (__classPrivateFieldSet(this, _TreeViewSubTreeNodeElement_abortController, new AbortController(), "f"));
+        this.addEventListener('click', this, { signal });
+        this.addEventListener('keydown', this, { signal });
+        observeMutationsUntilConditionMet(this, () => Boolean(this.includeFragment), () => {
+            this.includeFragment.addEventListener('loadstart', this, { signal });
+            this.includeFragment.addEventListener('error', this, { signal });
+            this.includeFragment.addEventListener('include-fragment-replace', this, { signal });
+            this.includeFragment.addEventListener('include-fragment-replaced', (e) => {
+                __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_handleIncludeFragmentEvent).call(this, e);
+            }, { signal });
+        });
+        observeMutationsUntilConditionMet(this, () => Boolean(this.retryButton), () => {
+            this.retryButton.addEventListener('click', event => {
+                __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_handleRetryButtonEvent).call(this, event);
+            }, { signal });
+        });
+        const checkedMutationObserver = new MutationObserver(() => {
+            if (this.selectStrategy !== 'mixed_descendants')
+                return;
+            let checkType = 'unknown';
+            for (const node of this.eachDirectDescendantNode()) {
+                switch (`${checkType} ${node.getAttribute('aria-checked') || 'false'}`) {
+                    case 'unknown mixed':
+                    case 'false mixed':
+                    case 'true mixed':
+                    case 'false true':
+                    case 'true false':
+                        checkType = 'mixed';
+                        break;
+                    case 'unknown false':
+                        checkType = 'false';
+                        break;
+                    case 'unknown true':
+                        checkType = 'true';
+                }
+            }
+            if (checkType !== 'unknown' && this.node?.getAttribute('aria-checked') !== checkType) {
+                this.node?.setAttribute('aria-checked', checkType);
+            }
+        });
+        checkedMutationObserver.observe(this, {
+            childList: true,
+            subtree: true,
+            attributeFilter: ['aria-checked'],
+        });
+    }
+    get expanded() {
+        if (__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_expanded, "f") === null) {
+            __classPrivateFieldSet(this, _TreeViewSubTreeNodeElement_expanded, this.node.getAttribute('aria-expanded') === 'true', "f");
+        }
+        return __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_expanded, "f");
+    }
+    set expanded(newValue) {
+        __classPrivateFieldSet(this, _TreeViewSubTreeNodeElement_expanded, newValue, "f");
+        __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_update).call(this);
+    }
+    get loadingState() {
+        return __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_loadingState, "f");
+    }
+    set loadingState(newState) {
+        __classPrivateFieldSet(this, _TreeViewSubTreeNodeElement_loadingState, newState, "f");
+        __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_update).call(this);
+    }
+    get selectStrategy() {
+        return (this.node.getAttribute('data-select-strategy') || 'descendants');
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_abortController, "f").abort();
+    }
+    handleEvent(event) {
+        if (event.target === this.toggleButton) {
+            __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_handleToggleEvent).call(this, event);
+        }
+        else if (event.target === this.includeFragment) {
+            __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_handleIncludeFragmentEvent).call(this, event);
+        }
+        else if (event instanceof KeyboardEvent) {
+            __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_handleKeyboardEvent).call(this, event);
+        }
+        else if (event.target.closest('[role=treeitem]') === this.node &&
+            event.type === 'click' &&
+            __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "a", _TreeViewSubTreeNodeElement_checkboxElement_get)) {
+            __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_handleCheckboxEvent).call(this, event);
+        }
+    }
+    expand() {
+        const alreadyExpanded = this.expanded;
+        this.expanded = true;
+        if (!alreadyExpanded && this.treeView) {
+            this.treeView.dispatchEvent(new CustomEvent('treeViewNodeExpanded', {
+                bubbles: true,
+                detail: this.treeView?.infoFromNode(this.node),
+            }));
+        }
+    }
+    collapse() {
+        const alreadyCollapsed = !this.expanded;
+        this.expanded = false;
+        if (!alreadyCollapsed && this.treeView) {
+            // Prevent issue where currently focusable node is stuck inside a collapsed
+            // sub-tree and no node in the entire tree can be focused
+            const previousNode = this.subTree.querySelector("[tabindex='0']");
+            previousNode?.setAttribute('tabindex', '-1');
+            this.node.setAttribute('tabindex', '0');
+            this.treeView.dispatchEvent(new CustomEvent('treeViewNodeCollapsed', {
+                bubbles: true,
+                detail: this.treeView?.infoFromNode(this.node),
+            }));
+        }
+    }
+    toggle() {
+        if (this.expanded) {
+            this.collapse();
+        }
+        else {
+            this.expand();
+        }
+    }
+    get nodes() {
+        return this.querySelectorAll(':scope > [role=treeitem]');
+    }
+    *eachDirectDescendantNode() {
+        for (const leaf of this.subTree.querySelectorAll(':scope > li > .TreeViewItemContainer > [role=treeitem]')) {
+            yield leaf;
+        }
+        for (const subTree of this.subTree.querySelectorAll(':scope > tree-view-sub-tree-node > li > .TreeViewItemContainer > [role=treeitem]')) {
+            yield subTree;
+        }
+    }
+    *eachDescendantNode() {
+        for (const node of this.subTree.querySelectorAll('[role=treeitem]')) {
+            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;
+    }
+    get treeView() {
+        return this.closest('tree-view');
+    }
+    toggleChecked() {
+        const checkValue = this.treeView?.getNodeCheckedValue(this.node) || 'false';
+        const newCheckValue = checkValue === 'false' ? 'true' : 'false';
+        const nodeInfos = [];
+        const rootInfo = this.treeView?.infoFromNode(this.node, newCheckValue);
+        if (rootInfo)
+            nodeInfos.push(rootInfo);
+        if (this.selectStrategy === 'descendants' || this.selectStrategy === 'mixed_descendants') {
+            for (const node of this.eachDescendantNode()) {
+                const info = this.treeView?.infoFromNode(node, newCheckValue);
+                if (info)
+                    nodeInfos.push(info);
+            }
+        }
+        const checkSuccess = this.dispatchEvent(new CustomEvent('treeViewBeforeNodeChecked', {
+            bubbles: true,
+            cancelable: true,
+            detail: nodeInfos,
+        }));
+        if (!checkSuccess)
+            return;
+        for (const nodeInfo of nodeInfos) {
+            nodeInfo.node.setAttribute('aria-checked', newCheckValue);
+        }
+        this.dispatchEvent(new CustomEvent('treeViewNodeChecked', {
+            bubbles: true,
+            cancelable: true,
+            detail: nodeInfos,
+        }));
+    }
+};
+_TreeViewSubTreeNodeElement_expanded = new WeakMap();
+_TreeViewSubTreeNodeElement_loadingState = new WeakMap();
+_TreeViewSubTreeNodeElement_abortController = new WeakMap();
+_TreeViewSubTreeNodeElement_activeElementIsLoader = new WeakMap();
+_TreeViewSubTreeNodeElement_instances = new WeakSet();
+_TreeViewSubTreeNodeElement_handleToggleEvent = function _TreeViewSubTreeNodeElement_handleToggleEvent(event) {
+    if (event.type === 'click') {
+        this.toggle();
+        // eslint-disable-next-line no-restricted-syntax
+        event.stopPropagation();
+    }
+};
+_TreeViewSubTreeNodeElement_handleIncludeFragmentEvent = function _TreeViewSubTreeNodeElement_handleIncludeFragmentEvent(event) {
+    switch (event.type) {
+        // the request has started
+        case 'loadstart':
+            this.loadingState = 'loading';
+            break;
+        // the request failed
+        case 'error':
+            this.loadingState = 'error';
+            break;
+        // request succeeded but element has not yet been replaced
+        case 'include-fragment-replace':
+            __classPrivateFieldSet(this, _TreeViewSubTreeNodeElement_activeElementIsLoader, document.activeElement === this.loadingIndicator.closest('[role=treeitem]'), "f");
+            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)
+                    return;
+                const content = firstItem.querySelector('[role=treeitem]');
+                if (!content)
+                    return;
+                content.focus();
+            }
+            __classPrivateFieldSet(this, _TreeViewSubTreeNodeElement_activeElementIsLoader, false, "f");
+            break;
+    }
+};
+_TreeViewSubTreeNodeElement_handleRetryButtonEvent = function _TreeViewSubTreeNodeElement_handleRetryButtonEvent(event) {
+    if (event.type === 'click') {
+        this.loadingState = 'loading';
+        this.includeFragment.refetch();
+    }
+};
+_TreeViewSubTreeNodeElement_handleKeyboardEvent = function _TreeViewSubTreeNodeElement_handleKeyboardEvent(event) {
+    const node = event.target.closest('[role=treeitem]');
+    if (!node || this.treeView?.getNodeType(node) !== 'sub-tree') {
+        return;
+    }
+    switch (event.key) {
+        case 'Enter':
+            if (this.treeView?.getNodeDisabledValue(node)) {
+                event.preventDefault();
+                break;
+            }
+            // eslint-disable-next-line no-restricted-syntax
+            event.stopPropagation();
+            if (__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "a", _TreeViewSubTreeNodeElement_checkboxElement_get)) {
+                this.toggleChecked();
+            }
+            else if (!this.treeView?.nodeHasNativeAction(node)) {
+                // toggle only if this node isn't eg. an anchor or button
+                this.toggle();
+            }
+            break;
+        case 'ArrowRight':
+            // eslint-disable-next-line no-restricted-syntax
+            event.stopPropagation();
+            this.expand();
+            break;
+        case 'ArrowLeft':
+            // eslint-disable-next-line no-restricted-syntax
+            event.stopPropagation();
+            this.collapse();
+            break;
+        case ' ':
+            if (this.treeView?.getNodeDisabledValue(node)) {
+                event.preventDefault();
+                break;
+            }
+            if (__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "a", _TreeViewSubTreeNodeElement_checkboxElement_get)) {
+                // eslint-disable-next-line no-restricted-syntax
+                event.stopPropagation();
+                event.preventDefault();
+                this.toggleChecked();
+            }
+            else {
+                if (node instanceof HTMLAnchorElement) {
+                    // simulate click on space for anchors (buttons already handle this natively)
+                    node.click();
+                }
+                else if (!this.treeView?.nodeHasNativeAction(node)) {
+                    this.toggle();
+                }
+            }
+            break;
+    }
+};
+_TreeViewSubTreeNodeElement_handleCheckboxEvent = function _TreeViewSubTreeNodeElement_handleCheckboxEvent(event) {
+    if (this.treeView?.getNodeDisabledValue(this.node)) {
+        event.preventDefault();
+        return;
+    }
+    if (event.type !== 'click')
+        return;
+    this.toggleChecked();
+    // prevent receiving this event twice
+    // eslint-disable-next-line no-restricted-syntax
+    event.stopPropagation();
+};
+_TreeViewSubTreeNodeElement_update = function _TreeViewSubTreeNodeElement_update() {
+    if (this.expanded) {
+        if (this.subTree)
+            this.subTree.hidden = false;
+        this.node.setAttribute('aria-expanded', 'true');
+        this.treeView?.expandAncestorsForNode(this);
+        if (this.iconPair) {
+            this.iconPair.showExpanded();
+        }
+        if (this.expandedToggleIcon && this.collapsedToggleIcon) {
+            this.expandedToggleIcon.removeAttribute('hidden');
+            this.collapsedToggleIcon.setAttribute('hidden', 'hidden');
+        }
+    }
+    else {
+        if (this.subTree)
+            this.subTree.hidden = true;
+        this.node.setAttribute('aria-expanded', 'false');
+        if (this.iconPair) {
+            this.iconPair.showCollapsed();
+        }
+        if (this.expandedToggleIcon && this.collapsedToggleIcon) {
+            this.expandedToggleIcon.setAttribute('hidden', 'hidden');
+            this.collapsedToggleIcon.removeAttribute('hidden');
+        }
+    }
+    switch (this.loadingState) {
+        case 'loading':
+            if (this.loadingFailureMessage)
+                this.loadingFailureMessage.hidden = true;
+            if (this.loadingIndicator)
+                this.loadingIndicator.hidden = false;
+            break;
+        case 'error':
+            if (this.loadingIndicator)
+                this.loadingIndicator.hidden = true;
+            if (this.loadingFailureMessage)
+                this.loadingFailureMessage.hidden = false;
+            break;
+        // success/init case
+        default:
+            if (this.loadingIndicator)
+                this.loadingIndicator.hidden = true;
+            if (this.loadingFailureMessage)
+                this.loadingFailureMessage.hidden = true;
+    }
+};
+_TreeViewSubTreeNodeElement_checkboxElement_get = function _TreeViewSubTreeNodeElement_checkboxElement_get() {
+    return this.querySelector('.TreeViewItemCheckbox');
+};
+__decorate([
+    target
+], TreeViewSubTreeNodeElement.prototype, "node", void 0);
+__decorate([
+    target
+], TreeViewSubTreeNodeElement.prototype, "subTree", void 0);
+__decorate([
+    target
+], TreeViewSubTreeNodeElement.prototype, "iconPair", void 0);
+__decorate([
+    target
+], TreeViewSubTreeNodeElement.prototype, "toggleButton", void 0);
+__decorate([
+    target
+], TreeViewSubTreeNodeElement.prototype, "expandedToggleIcon", void 0);
+__decorate([
+    target
+], TreeViewSubTreeNodeElement.prototype, "collapsedToggleIcon", void 0);
+__decorate([
+    target
+], TreeViewSubTreeNodeElement.prototype, "includeFragment", void 0);
+__decorate([
+    target
+], TreeViewSubTreeNodeElement.prototype, "loadingIndicator", void 0);
+__decorate([
+    target
+], TreeViewSubTreeNodeElement.prototype, "loadingFailureMessage", void 0);
+__decorate([
+    target
+], TreeViewSubTreeNodeElement.prototype, "retryButton", void 0);
+TreeViewSubTreeNodeElement = __decorate([
+    controller
+], TreeViewSubTreeNodeElement);
+export { TreeViewSubTreeNodeElement };
+if (!window.customElements.get('tree-view-sub-tree-node')) {
+    window.TreeViewSubTreeNodeElement = TreeViewSubTreeNodeElement;
+    window.customElements.define('tree-view-sub-tree-node', TreeViewSubTreeNodeElement);
+}

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

@@ -0,0 +1 @@
+.TreeViewRootUlStyles{list-style:none;margin:0;padding:0}.TreeViewRootUlStyles .TreeViewItem{outline:none}:is(.TreeViewRootUlStyles .TreeViewItem):focus-visible>div{box-shadow:var(--boxShadow-thick) var(--fgColor-accent)}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItem):focus-visible>div{outline:2px solid HighlightText;outline-offset:-2}}[data-has-leading-action]:is(.TreeViewRootUlStyles .TreeViewItem){--has-leading-action:1}.TreeViewRootUlStyles .TreeViewItemContainer{--level:1;--toggle-width:1rem;--min-item-height:2rem;border-radius:var(--borderRadius-medium);color:var(--fgColor-default);display:grid;font-size:var(--text-body-size-medium);grid-template-areas:"spacer leadingAction toggle content";grid-template-columns:var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;position:relative;width:100%;--leading-action-width:calc(var(--has-leading-action, 0)*1.5rem);--spacer-width:calc((var(--level) - 1)*(var(--toggle-width)/2))}:is(.TreeViewRootUlStyles .TreeViewItemContainer):hover{background-color:var(--control-transparent-bgColor-hover)}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItemContainer):hover{outline:2px solid #0000;outline-offset:-2px}}@media (pointer:coarse){.TreeViewRootUlStyles .TreeViewItemContainer{--toggle-width:1.5rem;--min-item-height:2.75rem}}:is(.TreeViewRootUlStyles .TreeViewItemContainer):has(.TreeViewFailureMessage):hover{background-color:initial;cursor:default}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItemContainer):has(.TreeViewFailureMessage):hover{outline:none}}:is(.TreeViewRootUlStyles .TreeViewItemContainer):has([role=treeitem]:focus-visible){box-shadow:var(--boxShadow-thick) var(--fgColor-accent)}.TreeViewRootUlStyles:where([data-omit-spacer=true]) .TreeViewItemContainer{grid-template-columns:0 0 0 1fr}.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true]){background-color:var(--control-transparent-bgColor-selected)}:is(.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true])):after{background-color:var(--fgColor-accent);border-radius:var(--borderRadius-medium);content:"";height:1.5rem;left:calc(var(--base-size-8)*-1);position:absolute;top:calc(50% - var(--base-size-12));width:.25rem}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true])):after{background-color:HighlightText}}.TreeViewRootUlStyles .TreeViewItemToggle{align-items:flex-start;color:var(--fgColor-muted);cursor:pointer;display:flex;grid-area:toggle;height:100%;justify-content:center;padding-top:calc(var(--min-item-height)/2 - var(--base-size-12)/2)}.TreeViewRootUlStyles .TreeViewItemToggleHover:hover{background-color:var(--control-transparent-bgColor-hover)}.TreeViewRootUlStyles .TreeViewItemToggleEnd{border-bottom-left-radius:var(--borderRadius-medium);border-top-left-radius:var(--borderRadius-medium)}.TreeViewRootUlStyles a.TreeViewItemContent:hover,.TreeViewRootUlStyles button.TreeViewItemContent:hover{-webkit-text-decoration:underline;text-decoration:underline;text-decoration-color:var(--control-fgColor-rest)}.TreeViewRootUlStyles :has(.TreeViewItemContent[aria-disabled=true]){cursor:not-allowed}.TreeViewRootUlStyles .TreeViewItemContent{cursor:pointer;display:flex;gap:var(--stack-gap-condensed);grid-area:content;height:100%;line-height:var(--custom-line-height,var(--text-body-lineHeight-medium,1.4285));outline:none;padding:0 var(--base-size-8);padding-bottom:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2);padding-top:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2)}.TreeViewRootUlStyles .TreeViewItemContent,:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemCheckbox{background-color:initial;border:none;text-align:left;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemCheckbox{border-radius:var(--borderRadius-medium);color:var(--control-fgColor-rest);position:relative;transition:background 33.333ms linear}[aria-checked=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox{background:var(--control-checked-bgColor-rest);border-color:var(--control-checked-borderColor-rest);transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0s}:is([aria-checked=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards;transition:visibility 0s linear 0s;visibility:visible}[aria-checked=mixed]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox{background:var(--control-checked-bgColor-rest);border-color:var(--control-checked-borderColor-rest);transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0s}:is([aria-checked=mixed]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards;clip-path:none;mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgMiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAxIDEgMCAySDFhMSAxIDAgMCAxLTEtMSIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");visibility:visible}[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent){pointer-events:none}[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemContentText{color:var(--control-fgColor-disabled)}:is([aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemVisual) svg,[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemVisual{fill:var(--control-fgColor-disabled)}@media (hover:hover){:is([aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):hover{cursor:not-allowed}[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent):hover{background-color:initial;cursor:not-allowed}}.TreeViewRootUlStyles .TreeViewItemContentText{color:var(--control-fgColor-rest);flex:1 1 auto;width:0}.TreeViewRootUlStyles:where([data-truncate-text=true]) .TreeViewItemContentText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.TreeViewRootUlStyles:where([data-truncate-text=false]) .TreeViewItemContentText{word-break:break-word}.TreeViewRootUlStyles .TreeViewItemVisual{align-items:center;color:var(--fgColor-muted);display:flex;height:var(--custom-line-height,1.3rem)}.TreeViewRootUlStyles .TreeViewItemLeadingAction{color:var(--fgColor-muted);display:flex;grid-area:leadingAction}:is(.TreeViewRootUlStyles .TreeViewItemLeadingAction)>button{flex-shrink:1}.TreeViewRootUlStyles .TreeViewItemLevelLine{border-color:var(--borderColor-muted);border-right:var(--borderWidth-thin) solid;height:100%;width:100%}@media (hover:hover){.TreeViewRootUlStyles .TreeViewItemLevelLine{border-color:#0000}.TreeViewRootUlStyles:focus-within .TreeViewItemLevelLine,.TreeViewRootUlStyles:hover .TreeViewItemLevelLine{border-color:var(--borderColor-muted)}}.TreeViewRootUlStyles .TreeViewVisuallyHidden{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.TreeViewSkeletonItemContainerStyle{align-items:center;column-gap:.5rem;display:flex;height:2rem}@media (pointer:coarse){.TreeViewSkeletonItemContainerStyle{height:2.75rem}}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+1){--tree-item-loading-width:67%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+2){--tree-item-loading-width:47%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+3){--tree-item-loading-width:73%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+4){--tree-item-loading-width:64%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+5){--tree-item-loading-width:50%}.TreeItemSkeletonTextStyles{width:var(--tree-item-loading-width,67%)}.TreeViewFailureMessage{align-items:center;display:grid;gap:.5rem;grid-template-columns:auto 1fr;width:100%}

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

@@ -0,0 +1,52 @@
+{
+  "name": "alpha/tree_view",
+  "selectors": [
+    ".TreeViewRootUlStyles",
+    ".TreeViewRootUlStyles .TreeViewItem",
+    ":is(.TreeViewRootUlStyles .TreeViewItem):focus-visible>div",
+    "[data-has-leading-action]:is(.TreeViewRootUlStyles .TreeViewItem)",
+    ".TreeViewRootUlStyles .TreeViewItemContainer",
+    ":is(.TreeViewRootUlStyles .TreeViewItemContainer):hover",
+    ":is(.TreeViewRootUlStyles .TreeViewItemContainer):has(.TreeViewFailureMessage):hover",
+    ":is(.TreeViewRootUlStyles .TreeViewItemContainer):has([role=treeitem]:focus-visible)",
+    ".TreeViewRootUlStyles:where([data-omit-spacer=true]) .TreeViewItemContainer",
+    ".TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true])",
+    ":is(.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true])):after",
+    ".TreeViewRootUlStyles .TreeViewItemToggle",
+    ".TreeViewRootUlStyles .TreeViewItemToggleHover:hover",
+    ".TreeViewRootUlStyles .TreeViewItemToggleEnd",
+    ".TreeViewRootUlStyles a.TreeViewItemContent:hover",
+    ".TreeViewRootUlStyles button.TreeViewItemContent:hover",
+    ".TreeViewRootUlStyles :has(.TreeViewItemContent[aria-disabled=true])",
+    ".TreeViewRootUlStyles .TreeViewItemContent",
+    ":is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemCheckbox",
+    "[aria-checked=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox",
+    ":is([aria-checked=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):before",
+    "[aria-checked=mixed]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox",
+    ":is([aria-checked=mixed]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):before",
+    "[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent)",
+    "[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemContentText",
+    ":is([aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemVisual) svg",
+    "[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemVisual",
+    ":is([aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):hover",
+    "[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent):hover",
+    ".TreeViewRootUlStyles .TreeViewItemContentText",
+    ".TreeViewRootUlStyles:where([data-truncate-text=true]) .TreeViewItemContentText",
+    ".TreeViewRootUlStyles:where([data-truncate-text=false]) .TreeViewItemContentText",
+    ".TreeViewRootUlStyles .TreeViewItemVisual",
+    ".TreeViewRootUlStyles .TreeViewItemLeadingAction",
+    ":is(.TreeViewRootUlStyles .TreeViewItemLeadingAction)>button",
+    ".TreeViewRootUlStyles .TreeViewItemLevelLine",
+    ".TreeViewRootUlStyles:focus-within .TreeViewItemLevelLine",
+    ".TreeViewRootUlStyles:hover .TreeViewItemLevelLine",
+    ".TreeViewRootUlStyles .TreeViewVisuallyHidden",
+    ".TreeViewSkeletonItemContainerStyle",
+    ".TreeViewSkeletonItemContainerStyle:nth-of-type(5n+1)",
+    ".TreeViewSkeletonItemContainerStyle:nth-of-type(5n+2)",
+    ".TreeViewSkeletonItemContainerStyle:nth-of-type(5n+3)",
+    ".TreeViewSkeletonItemContainerStyle:nth-of-type(5n+4)",
+    ".TreeViewSkeletonItemContainerStyle:nth-of-type(5n+5)",
+    ".TreeItemSkeletonTextStyles",
+    ".TreeViewFailureMessage"
+  ]
+}

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

@@ -26,3 +26,7 @@ import '../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './alpha/select_panel_element';
 import './beta/details_toggle_element';
+import './alpha/tree_view/tree_view';
+import './alpha/tree_view/tree_view_icon_pair_element';
+import './alpha/tree_view/tree_view_sub_tree_node_element';
+import './alpha/tree_view/tree_view_include_fragment_element';

package/app/components/primer/primer.js

@@ -26,3 +26,7 @@ import '../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './alpha/select_panel_element';
 import './beta/details_toggle_element';
+import './alpha/tree_view/tree_view';
+import './alpha/tree_view/tree_view_icon_pair_element';
+import './alpha/tree_view/tree_view_sub_tree_node_element';
+import './alpha/tree_view/tree_view_include_fragment_element';

package/app/components/primer/shared_events.d.ts

@@ -3,9 +3,24 @@ export type ItemActivatedEvent = {
     checked: boolean;
     value: string | null;
 };
+export type TreeViewNodeType = 'leaf' | 'sub-tree';
+export type TreeViewCheckedValue = 'true' | 'false' | 'mixed';
+export type TreeViewNodeInfo = {
+    node: Element;
+    type: TreeViewNodeType;
+    path: string[];
+    checkedValue: TreeViewCheckedValue;
+    previousCheckedValue: TreeViewCheckedValue;
+};
 declare global {
     interface HTMLElementEventMap {
         itemActivated: CustomEvent<ItemActivatedEvent>;
         beforeItemActivated: CustomEvent<ItemActivatedEvent>;
+        treeViewNodeActivated: CustomEvent<TreeViewNodeInfo>;
+        treeViewBeforeNodeActivated: CustomEvent<TreeViewNodeInfo>;
+        treeViewNodeExpanded: CustomEvent<TreeViewNodeInfo>;
+        treeViewNodeCollapsed: CustomEvent<TreeViewNodeInfo>;
+        treeViewNodeChecked: CustomEvent<TreeViewNodeInfo[]>;
+        treeViewBeforeNodeChecked: CustomEvent<TreeViewNodeInfo[]>;
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.43.6",
+  "version": "0.44.0-rc.af8944c0",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",

package/static/classes.json

@@ -510,6 +510,9 @@
   "SelectPanel-loadingPanel": [
     "Primer::Alpha::SelectPanel"
   ],
+  "SkeletonBox": [
+    "Primer::Alpha::SkeletonBox"
+  ],
   "Stack": [
     "Primer::Alpha::Stack"
   ],
@@ -621,6 +624,18 @@
   "ToggleSwitch-track": [
     "Primer::Alpha::ToggleSwitch"
   ],
+  "TreeItemSkeletonTextStyles": [
+    "Primer::Alpha::TreeView"
+  ],
+  "TreeViewFailureMessage": [
+    "Primer::Alpha::TreeView"
+  ],
+  "TreeViewRootUlStyles": [
+    "Primer::Alpha::TreeView"
+  ],
+  "TreeViewSkeletonItemContainerStyle": [
+    "Primer::Alpha::TreeView"
+  ],
   "Truncate": [
     "Primer::Beta::Truncate"
   ],