@mixtint/primer-view-components 0.72.0

package/app/components/primer/focus_group.js

@@ -0,0 +1,163 @@
+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 _FocusGroupElement_instances, _FocusGroupElement_retainSignal, _FocusGroupElement_abortController, _FocusGroupElement_items_get;
+import '@oddbird/popover-polyfill';
+const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]', '[role="option"]'];
+const menuItemSelector = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(', ');
+const getMnemonicFor = (item) => item.textContent?.trim()[0].toLowerCase();
+const printable = /^\S$/;
+class FocusGroupElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _FocusGroupElement_instances.add(this);
+        _FocusGroupElement_retainSignal.set(this, null);
+        _FocusGroupElement_abortController.set(this, null);
+    }
+    get nowrap() {
+        return this.hasAttribute('nowrap');
+    }
+    set nowrap(value) {
+        this.toggleAttribute('nowrap', value);
+    }
+    get direction() {
+        if (this.getAttribute('direction') === 'horizontal')
+            return 'horizontal';
+        return 'vertical';
+    }
+    set direction(value) {
+        this.setAttribute('direction', `${value}`);
+    }
+    get retain() {
+        return this.hasAttribute('retain');
+    }
+    set retain(value) {
+        this.toggleAttribute('retain', value);
+    }
+    get mnemonics() {
+        return this.hasAttribute('mnemonics');
+    }
+    connectedCallback() {
+        __classPrivateFieldSet(this, _FocusGroupElement_abortController, new AbortController(), "f");
+        const { signal } = __classPrivateFieldGet(this, _FocusGroupElement_abortController, "f");
+        this.addEventListener('keydown', this, { signal });
+        this.addEventListener('click', this, { signal });
+        this.addEventListener('mouseover', this, { signal });
+        this.addEventListener('focusin', this, { signal });
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _FocusGroupElement_abortController, "f")?.abort();
+    }
+    handleEvent(event) {
+        const { direction, nowrap } = this;
+        if (event.type === 'focusin') {
+            if (this.retain && event.target instanceof Element && event.target.matches(menuItemSelector)) {
+                __classPrivateFieldGet(this, _FocusGroupElement_retainSignal, "f")?.abort();
+                const { signal } = (__classPrivateFieldSet(this, _FocusGroupElement_retainSignal, new AbortController(), "f"));
+                for (const item of __classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get)) {
+                    item.setAttribute('tabindex', item === event.target ? '0' : '-1');
+                    const popover = event.target.closest('[popover]');
+                    if (item === event.target && popover?.popover === 'auto' && popover.closest('focus-group') === this) {
+                        popover.addEventListener('toggle', (toggleEvent) => {
+                            if (!(toggleEvent.target instanceof Element))
+                                return;
+                            if (toggleEvent.newState === 'closed') {
+                                __classPrivateFieldGet(this, _FocusGroupElement_retainSignal, "f")?.abort();
+                                item.setAttribute('tabindex', '-1');
+                                if (popover.id) {
+                                    const invoker = this.querySelector(`[popovertarget="${popover.id}"]`);
+                                    if (invoker) {
+                                        invoker.setAttribute('tabindex', '0');
+                                    }
+                                    else {
+                                        __classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get)[0]?.setAttribute('tabindex', '0');
+                                    }
+                                }
+                            }
+                        }, { signal });
+                    }
+                }
+            }
+        }
+        else if (event instanceof KeyboardEvent) {
+            const items = Array.from(__classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get));
+            let index = items.indexOf(event.target);
+            const key = event.key;
+            if (key === 'Up' || key === 'ArrowUp') {
+                if (direction === 'vertical' || direction === 'both') {
+                    index -= index < 0 ? 0 : 1;
+                    event.preventDefault();
+                }
+            }
+            else if (key === 'Down' || key === 'ArrowDown') {
+                if (direction === 'vertical' || direction === 'both') {
+                    index += 1;
+                    event.preventDefault();
+                }
+            }
+            else if (event.key === 'Left' || event.key === 'ArrowLeft') {
+                if (direction === 'horizontal' || direction === 'both') {
+                    index -= 1;
+                    event.preventDefault();
+                }
+            }
+            else if (event.key === 'Right' || event.key === 'ArrowRight') {
+                if (direction === 'horizontal' || direction === 'both') {
+                    index += 1;
+                    event.preventDefault();
+                }
+            }
+            else if (event.key === 'Home' || event.key === 'PageUp') {
+                index = 0;
+                event.preventDefault();
+            }
+            else if (event.key === 'End' || event.key === 'PageDown') {
+                index = items.length - 1;
+                event.preventDefault();
+            }
+            else if (this.mnemonics && printable.test(key)) {
+                const mnemonic = key.toLowerCase();
+                const offset = index > 0 && getMnemonicFor(event.target) === mnemonic ? index : 0;
+                index = items.findIndex((item, i) => i > offset && getMnemonicFor(item) === mnemonic);
+                if (index < 0 && !nowrap) {
+                    index = items.findIndex(item => getMnemonicFor(item) === mnemonic);
+                }
+            }
+            else {
+                return;
+            }
+            if (nowrap && index < 0)
+                index = 0;
+            if (!nowrap && index >= items.length)
+                index = 0;
+            const focusEl = items.at(Math.min(index, items.length - 1));
+            {
+                let el = focusEl;
+                do {
+                    el = el.closest(`[popover]:not(:popover-open)`);
+                    if (el?.popover === 'auto' && !['ArrowRight', 'ArrowLeft'].includes(event.key)) {
+                        el.showPopover();
+                    }
+                    el = el?.parentElement || null;
+                } while (el);
+            }
+            focusEl?.focus();
+        }
+    }
+}
+_FocusGroupElement_retainSignal = new WeakMap(), _FocusGroupElement_abortController = new WeakMap(), _FocusGroupElement_instances = new WeakSet(), _FocusGroupElement_items_get = function _FocusGroupElement_items_get() {
+    return this.querySelectorAll(menuItemSelector);
+};
+export default FocusGroupElement;
+if (!customElements.get('focus-group')) {
+    window.FocusGroupElement = FocusGroupElement;
+    customElements.define('focus-group', FocusGroupElement);
+}

package/app/components/primer/open_project/border_box/collapsible_header.css

@@ -0,0 +1,21 @@
+/* CSS for BorderBox::CollapsibleHeader  */
+
+.CollapsibleHeader {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+.Box:has(.CollapsibleHeader--collapsed) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom-width: var(--borderWidth-thicker);
+}
+
+.Box:has(.CollapsibleHeader--collapsed) .Box-row,.Box:has(.CollapsibleHeader--collapsed) .Box-body,.Box:has(.CollapsibleHeader--collapsed) .Box-footer {
+        display: none;
+    }
+
+.CollapsibleHeader--triggerArea {
+    width: 100%;
+}

package/app/components/primer/open_project/border_box/collapsible_header.css.json

@@ -0,0 +1,11 @@
+{
+  "name": "open_project/border_box/collapsible_header",
+  "selectors": [
+    ".CollapsibleHeader",
+    ".Box:has(.CollapsibleHeader--collapsed)",
+    ".Box:has(.CollapsibleHeader--collapsed) .Box-row",
+    ".Box:has(.CollapsibleHeader--collapsed) .Box-body",
+    ".Box:has(.CollapsibleHeader--collapsed) .Box-footer",
+    ".CollapsibleHeader--triggerArea"
+  ]
+}

package/app/components/primer/open_project/border_box/collapsible_header.d.ts

@@ -0,0 +1,11 @@
+import { CollapsibleElement } from '../collapsible';
+declare class CollapsibleHeaderElement extends CollapsibleElement {
+    connectedCallback(): void;
+    get baseClass(): string;
+}
+declare global {
+    interface Window {
+        CollapsibleHeaderElement: typeof CollapsibleHeaderElement;
+    }
+}
+export {};

package/app/components/primer/open_project/border_box/collapsible_header.js

@@ -0,0 +1,21 @@
+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 { CollapsibleElement } from '../collapsible';
+let CollapsibleHeaderElement = class CollapsibleHeaderElement extends CollapsibleElement {
+    connectedCallback() {
+        if (!this.closest('.Box')) {
+            throw new Error('No surrounding BorderBox found');
+        }
+    }
+    get baseClass() {
+        return 'CollapsibleHeader';
+    }
+};
+CollapsibleHeaderElement = __decorate([
+    controller
+], CollapsibleHeaderElement);

package/app/components/primer/open_project/border_grid.css

@@ -0,0 +1,35 @@
+/* CSS for BorderGrid  */
+
+.BorderGrid {
+    display: table;
+    width: 100%;
+    margin-top: -16px;
+    margin-bottom: -16px;
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-style: hidden
+}
+
+.BorderGrid .BorderGrid-cell {
+    padding-top: 16px;
+    padding-bottom: 16px
+}
+
+.BorderGrid--spacious {
+    margin-top: -24px;
+    margin-bottom: -24px
+}
+
+.BorderGrid--spacious .BorderGrid-cell {
+    padding-top: 24px;
+    padding-bottom: 24px
+}
+
+.BorderGrid-row {
+    display: table-row
+}
+
+.BorderGrid-cell {
+    display: table-cell;
+    border: 1px solid var(--borderColor-muted)
+}

package/app/components/primer/open_project/border_grid.css.json

@@ -0,0 +1,11 @@
+{
+  "name": "open_project/border_grid",
+  "selectors": [
+    ".BorderGrid",
+    ".BorderGrid .BorderGrid-cell",
+    ".BorderGrid--spacious",
+    ".BorderGrid--spacious .BorderGrid-cell",
+    ".BorderGrid-row",
+    ".BorderGrid-cell"
+  ]
+}

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

@@ -0,0 +1,13 @@
+export declare abstract class CollapsibleElement extends HTMLElement {
+    arrowDown: Element;
+    arrowUp: Element;
+    triggerElement: HTMLElement;
+    collapsibleElements: HTMLElement[];
+    collapsed: boolean;
+    toggleViaKeyboard(event: KeyboardEvent): void;
+    toggle(): void;
+    attributeChangedCallback(name: string): void;
+    hideAll(): void;
+    expandAll(): void;
+    abstract get baseClass(): string;
+}

package/app/components/primer/open_project/collapsible.js

@@ -0,0 +1,67 @@
+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 { attr, target, targets } from '@github/catalyst';
+// eslint-disable-next-line custom-elements/expose-class-on-global
+export class CollapsibleElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.collapsed = false;
+    }
+    toggleViaKeyboard(event) {
+        if (event.code === 'Enter' || event.code === 'Space') {
+            event.preventDefault();
+            this.toggle();
+        }
+    }
+    toggle() {
+        this.collapsed = !this.collapsed;
+    }
+    attributeChangedCallback(name) {
+        if (name === 'data-collapsed') {
+            if (this.collapsed) {
+                this.hideAll();
+            }
+            else {
+                this.expandAll();
+            }
+        }
+    }
+    hideAll() {
+        // For whatever reason, setting `hidden` directly does not work on the SVGs
+        this.arrowDown?.removeAttribute('hidden');
+        this.arrowUp?.setAttribute('hidden', '');
+        this.triggerElement.setAttribute('aria-expanded', 'false');
+        for (const el of this.collapsibleElements) {
+            el.hidden = true;
+        }
+        this.classList.add(`${this.baseClass}--collapsed`);
+    }
+    expandAll() {
+        this.arrowUp?.removeAttribute('hidden');
+        this.arrowDown?.setAttribute('hidden', '');
+        this.triggerElement.setAttribute('aria-expanded', 'true');
+        for (const el of this.collapsibleElements) {
+            el.hidden = false;
+        }
+        this.classList.remove(`${this.baseClass}--collapsed`);
+    }
+}
+__decorate([
+    target
+], CollapsibleElement.prototype, "arrowDown", void 0);
+__decorate([
+    target
+], CollapsibleElement.prototype, "arrowUp", void 0);
+__decorate([
+    target
+], CollapsibleElement.prototype, "triggerElement", void 0);
+__decorate([
+    targets
+], CollapsibleElement.prototype, "collapsibleElements", void 0);
+__decorate([
+    attr
+], CollapsibleElement.prototype, "collapsed", void 0);

package/app/components/primer/open_project/collapsible_section.css

@@ -0,0 +1,5 @@
+/* CSS for CollapsibleSection  */
+
+.CollapsibleSection--triggerArea {
+    cursor: pointer;
+}

package/app/components/primer/open_project/collapsible_section.css.json

@@ -0,0 +1,6 @@
+{
+  "name": "open_project/collapsible_section",
+  "selectors": [
+    ".CollapsibleSection--triggerArea"
+  ]
+}

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

@@ -0,0 +1,10 @@
+import { CollapsibleElement } from './collapsible';
+declare class CollapsibleSectionElement extends CollapsibleElement {
+    get baseClass(): string;
+}
+declare global {
+    interface Window {
+        CollapsibleSectionElement: typeof CollapsibleSectionElement;
+    }
+}
+export {};

package/app/components/primer/open_project/collapsible_section.js

@@ -0,0 +1,16 @@
+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 { CollapsibleElement } from './collapsible';
+let CollapsibleSectionElement = class CollapsibleSectionElement extends CollapsibleElement {
+    get baseClass() {
+        return 'CollapsibleSection';
+    }
+};
+CollapsibleSectionElement = __decorate([
+    controller
+], CollapsibleSectionElement);

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

@@ -0,0 +1,14 @@
+declare class DangerDialogFormHelperElement extends HTMLElement {
+    #private;
+    checkbox: HTMLInputElement | undefined;
+    get form(): HTMLFormElement | null;
+    get submitButton(): HTMLInputElement | HTMLButtonElement;
+    connectedCallback(): void;
+    toggle(): void;
+}
+declare global {
+    interface Window {
+        DangerDialogFormHelperElement: typeof DangerDialogFormHelperElement;
+    }
+}
+export {};

package/app/components/primer/open_project/danger_dialog_form_helper.js

@@ -0,0 +1,54 @@
+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 _DangerDialogFormHelperElement_instances, _DangerDialogFormHelperElement_reset;
+import { controller, target } from '@github/catalyst';
+const SUBMIT_BUTTON_SELECTOR = 'input[type=submit],button[type=submit],button[data-submit-dialog-id]';
+let DangerDialogFormHelperElement = class DangerDialogFormHelperElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _DangerDialogFormHelperElement_instances.add(this);
+    }
+    get form() {
+        return this.querySelector('form');
+    }
+    get submitButton() {
+        return this.querySelector(SUBMIT_BUTTON_SELECTOR);
+    }
+    connectedCallback() {
+        // makes the custom element behave as if it doesn't exist in the DOM structure, passing all
+        // styles directly to its children.
+        this.style.display = 'contents';
+        if (this.form) {
+            this.form.style.display = 'contents';
+        }
+        __classPrivateFieldGet(this, _DangerDialogFormHelperElement_instances, "m", _DangerDialogFormHelperElement_reset).call(this);
+    }
+    toggle() {
+        if (this.checkbox) {
+            this.submitButton.disabled = !this.checkbox.checked;
+        }
+    }
+};
+_DangerDialogFormHelperElement_instances = new WeakSet();
+_DangerDialogFormHelperElement_reset = function _DangerDialogFormHelperElement_reset() {
+    this.toggle();
+};
+__decorate([
+    target
+], DangerDialogFormHelperElement.prototype, "checkbox", void 0);
+DangerDialogFormHelperElement = __decorate([
+    controller
+], DangerDialogFormHelperElement);
+if (!window.customElements.get('danger-dialog-form-helper')) {
+    window.DangerDialogFormHelperElement = DangerDialogFormHelperElement;
+    window.customElements.define('danger-dialog-form-helper', DangerDialogFormHelperElement);
+}

package/app/components/primer/open_project/drag_handle.css

@@ -0,0 +1,6 @@
+/* CSS for DragHandle  */
+
+.DragHandle {
+    cursor: move;
+    color: var(--fgColor-muted);
+}

package/app/components/primer/open_project/drag_handle.css.json

@@ -0,0 +1,6 @@
+{
+  "name": "open_project/drag_handle",
+  "selectors": [
+    ".DragHandle"
+  ]
+}

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

@@ -0,0 +1,29 @@
+import { SegmentedControlElement } from '../alpha/segmented_control';
+import { TreeViewElement } from '../alpha/tree_view/tree_view';
+import { TreeViewSubTreeNodeElement } from '../alpha/tree_view/tree_view_sub_tree_node_element';
+export type FilterFn = (node: HTMLElement, query: string, filterMode?: string) => Range[] | null;
+export declare class FilterableTreeViewElement extends HTMLElement {
+    #private;
+    filterInput: HTMLInputElement;
+    filterModeControlList: HTMLElement;
+    treeViewList: HTMLElement;
+    noResultsMessage: HTMLElement;
+    includeSubItemsCheckBox: HTMLInputElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+    get filterModeControl(): SegmentedControlElement | null;
+    get treeView(): TreeViewElement | null;
+    set filterFn(newFn: FilterFn);
+    get filterFn(): FilterFn;
+    defaultFilterFn(node: HTMLElement, query: string, filterMode?: string): Range[] | null;
+    get filterMode(): string | null;
+    get queryString(): string;
+    eachDescendantDepthFirst(node: HTMLElement, level: number, ancestry: TreeViewSubTreeNodeElement[]): Generator<[NodeListOf<HTMLElement>, TreeViewSubTreeNodeElement[]]>;
+    eachShallowestCheckedSubTree(root: TreeViewSubTreeNodeElement): Generator<TreeViewSubTreeNodeElement>;
+}
+declare global {
+    interface Window {
+        FilterableTreeViewElement: typeof FilterableTreeViewElement;
+    }
+}