@mixtint/primer-view-components 0.72.0

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

@@ -0,0 +1,80 @@
+/* CSS for SubHeader  */
+
+.SubHeader {
+    display: grid;
+    grid-template-areas: "left middle right" "bottom bottom bottom";
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    margin-bottom: var(--base-size-16);
+}
+
+.SubHeader--expandedSearch {
+    grid-template-areas: "left left left" "bottom bottom bottom";
+}
+
+.SubHeader-rightPane {
+    grid-area: right;
+    display: flex;
+    align-items: center;
+    column-gap: 12px;
+}
+
+.SubHeader-middlePane {
+    grid-area: middle;
+    text-align: center;
+}
+
+.SubHeader-bottomPane {
+    grid-area: bottom;
+}
+
+.SubHeader-leftPane {
+    grid-area: left;
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    /* Since the container is not full width (due to the grid around it)
+     we want it to grow, and then be limited by the max-width of the "FormControl-input-width--xy" class */
+}
+
+:is(.SubHeader-leftPane [class*='FormControl-input-width--']):not(.FormControl-input-width--auto) {
+            width: 100vw;
+        }
+
+.SubHeader-filterContainer {
+    display: flex;
+    flex-basis: max-content;
+    width: 100%;
+    gap: 8px;
+}
+
+.SubHeader-filterInput_hiddenClearButton + .FormControl-input-trailingAction {
+  display: none;
+}
+
+@media (max-width: 543.98px) {
+    .SubHeader {
+        grid-template-areas: "left right" "middle middle" "bottom bottom";
+        grid-template-columns: 1fr auto;
+    }
+
+    .SubHeader--emptyLeftPane {
+        grid-template-areas: "middle middle right" "bottom bottom bottom";
+        grid-template-columns: auto 1fr auto;
+    }
+
+    .SubHeader--emptyLeftPane .SubHeader-middlePane {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .SubHeader-middlePane {
+        text-align: left;
+    }
+
+    .SubHeader-middlePane:has(> *) {
+        margin-top: var(--stack-gap-normal);
+    }
+}

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

@@ -0,0 +1,17 @@
+{
+  "name": "open_project/sub_header",
+  "selectors": [
+    ".SubHeader",
+    ".SubHeader--expandedSearch",
+    ".SubHeader-rightPane",
+    ".SubHeader-middlePane",
+    ".SubHeader-bottomPane",
+    ".SubHeader-leftPane",
+    ":is(.SubHeader-leftPane [class*='FormControl-input-width--']):not(.FormControl-input-width--auto)",
+    ".SubHeader-filterContainer",
+    ".SubHeader-filterInput_hiddenClearButton + .FormControl-input-trailingAction",
+    ".SubHeader--emptyLeftPane",
+    ".SubHeader--emptyLeftPane .SubHeader-middlePane",
+    ".SubHeader-middlePane:has(> *)"
+  ]
+}

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

@@ -0,0 +1,17 @@
+declare class SubHeaderElement extends HTMLElement {
+    filterInput: HTMLInputElement;
+    hiddenItemsOnExpandedFilter: HTMLElement[];
+    shownItemsOnExpandedFilter: HTMLElement[];
+    connectedCallback(): void;
+    setupFilterInputClearButton(): void;
+    toggleFilterInputClearButton(): void;
+    expandFilterInput(): void;
+    collapseFilterInput(): void;
+    private waitForCondition;
+}
+declare global {
+    interface Window {
+        SubHeaderElement: typeof SubHeaderElement;
+    }
+}
+export {};

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

@@ -0,0 +1,76 @@
+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, target, targets } from '@github/catalyst';
+let SubHeaderElement = class SubHeaderElement extends HTMLElement {
+    connectedCallback() {
+        this.setupFilterInputClearButton();
+    }
+    setupFilterInputClearButton() {
+        this.waitForCondition(() => Boolean(this.filterInput), () => {
+            this.toggleFilterInputClearButton();
+        });
+    }
+    toggleFilterInputClearButton() {
+        if (this.filterInput.value.length > 0) {
+            this.filterInput.classList.remove('SubHeader-filterInput_hiddenClearButton');
+        }
+        else {
+            this.filterInput.classList.add('SubHeader-filterInput_hiddenClearButton');
+        }
+    }
+    expandFilterInput() {
+        for (const item of this.hiddenItemsOnExpandedFilter) {
+            item.classList.add('d-none');
+        }
+        for (const item of this.shownItemsOnExpandedFilter) {
+            item.classList.remove('d-none');
+        }
+        this.classList.add('SubHeader--expandedSearch');
+        this.filterInput.focus();
+    }
+    collapseFilterInput() {
+        for (const item of this.hiddenItemsOnExpandedFilter) {
+            item.classList.remove('d-none');
+        }
+        for (const item of this.shownItemsOnExpandedFilter) {
+            item.classList.add('d-none');
+        }
+        this.classList.remove('SubHeader--expandedSearch');
+    }
+    // Waits for condition to return true. If it returns false initially, this function creates a
+    // MutationObserver that calls body() whenever the contents of the component change.
+    waitForCondition(condition, body) {
+        if (condition()) {
+            body();
+        }
+        else {
+            const mutationObserver = new MutationObserver(() => {
+                if (condition()) {
+                    body();
+                    mutationObserver.disconnect();
+                }
+            });
+            mutationObserver.observe(this, { childList: true, subtree: true });
+        }
+    }
+};
+__decorate([
+    target
+], SubHeaderElement.prototype, "filterInput", void 0);
+__decorate([
+    targets
+], SubHeaderElement.prototype, "hiddenItemsOnExpandedFilter", void 0);
+__decorate([
+    targets
+], SubHeaderElement.prototype, "shownItemsOnExpandedFilter", void 0);
+SubHeaderElement = __decorate([
+    controller
+], SubHeaderElement);
+if (!window.customElements.get('sub-header')) {
+    window.SubHeaderElement = SubHeaderElement;
+    window.customElements.define('sub-header', SubHeaderElement);
+}

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

@@ -0,0 +1,18 @@
+declare class ZenModeButtonElement extends HTMLElement {
+    button: HTMLElement;
+    inZenMode: boolean;
+    constructor();
+    disconnectedCallback(): void;
+    fullscreenChangeEventHandler(): void;
+    dispatchZenModeStatus(): void;
+    private deactivateZenMode;
+    private activateZenMode;
+    changeButtonState(inZenMode: boolean): void;
+    performAction(): void;
+}
+declare global {
+    interface Window {
+        ZenModeButtonElement: typeof ZenModeButtonElement;
+    }
+}
+export {};

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

@@ -0,0 +1,64 @@
+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, target } from '@github/catalyst';
+let ZenModeButtonElement = class ZenModeButtonElement extends HTMLElement {
+    // eslint-disable-next-line custom-elements/no-constructor
+    constructor() {
+        super();
+        this.inZenMode = false;
+        document.addEventListener('fullscreenchange', this.fullscreenChangeEventHandler.bind(this));
+    }
+    disconnectedCallback() {
+        document.removeEventListener('fullscreenchange', this.fullscreenChangeEventHandler.bind(this));
+    }
+    fullscreenChangeEventHandler() {
+        this.changeButtonState(!this.inZenMode);
+        this.dispatchZenModeStatus();
+    }
+    dispatchZenModeStatus() {
+        // Create a new custom event
+        const event = new CustomEvent('zenModeToggled', {
+            detail: {
+                active: this.inZenMode,
+            },
+        });
+        // Dispatch the custom event
+        window.dispatchEvent(event);
+    }
+    deactivateZenMode() {
+        if (document.exitFullscreen) {
+            void document.exitFullscreen();
+        }
+    }
+    activateZenMode() {
+        if (document.documentElement.requestFullscreen) {
+            void document.documentElement.requestFullscreen();
+        }
+    }
+    changeButtonState(inZenMode) {
+        this.inZenMode = inZenMode;
+        this.button.setAttribute('aria-pressed', inZenMode.toString());
+    }
+    performAction() {
+        if (this.inZenMode) {
+            this.deactivateZenMode();
+        }
+        else {
+            this.activateZenMode();
+        }
+    }
+};
+__decorate([
+    target
+], ZenModeButtonElement.prototype, "button", void 0);
+ZenModeButtonElement = __decorate([
+    controller
+], ZenModeButtonElement);
+if (!window.customElements.get('zen-mode-button')) {
+    window.ZenModeButtonElement = ZenModeButtonElement;
+    window.customElements.define('zen-mode-button', ZenModeButtonElement);
+}

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

@@ -0,0 +1,40 @@
+import '@github/include-fragment-element';
+import '@github/remote-input-element';
+import './alpha/action_list';
+import './alpha/action_bar_element';
+import './alpha/dropdown';
+import './anchored_position';
+import './dialog_helper';
+import './focus_group';
+import './scrollable_region';
+import './shared_events';
+import './utils';
+import './alpha/modal_dialog';
+import './beta/nav_list';
+import './beta/nav_list_group_element';
+import './alpha/segmented_control';
+import './alpha/toggle_switch';
+import './alpha/tool_tip';
+import './alpha/x_banner';
+import './beta/auto_complete/auto_complete';
+import './beta/clipboard_copy';
+import './beta/relative_time';
+import './alpha/tab_container';
+import '../../lib/primer/forms/primer_multi_input';
+import '../../lib/primer/forms/primer_text_field';
+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';
+import './open_project/page_header_element';
+import './open_project/zen_mode_button';
+import './open_project/sub_header_element';
+import './open_project/danger_dialog_form_helper';
+import './open_project/collapsible';
+import './open_project/border_box/collapsible_header';
+import './open_project/collapsible_section';
+import './open_project/filterable_tree_view';

package/app/components/primer/primer.js

@@ -0,0 +1,40 @@
+import '@github/include-fragment-element';
+import '@github/remote-input-element';
+import './alpha/action_list';
+import './alpha/action_bar_element';
+import './alpha/dropdown';
+import './anchored_position';
+import './dialog_helper';
+import './focus_group';
+import './scrollable_region';
+import './shared_events';
+import './utils';
+import './alpha/modal_dialog';
+import './beta/nav_list';
+import './beta/nav_list_group_element';
+import './alpha/segmented_control';
+import './alpha/toggle_switch';
+import './alpha/tool_tip';
+import './alpha/x_banner';
+import './beta/auto_complete/auto_complete';
+import './beta/clipboard_copy';
+import './beta/relative_time';
+import './alpha/tab_container';
+import '../../lib/primer/forms/primer_multi_input';
+import '../../lib/primer/forms/primer_text_field';
+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';
+import './open_project/page_header_element';
+import './open_project/zen_mode_button';
+import './open_project/sub_header_element';
+import './open_project/danger_dialog_form_helper';
+import './open_project/collapsible';
+import './open_project/border_box/collapsible_header';
+import './open_project/collapsible_section';
+import './open_project/filterable_tree_view';

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

@@ -0,0 +1,13 @@
+export declare class ScrollableRegionElement extends HTMLElement {
+    hasOverflow: boolean;
+    labelledBy: string;
+    observer: ResizeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+}
+declare global {
+    interface Window {
+        ScrollableRegionElement: typeof ScrollableRegionElement;
+    }
+}

package/app/components/primer/scrollable_region.js

@@ -0,0 +1,52 @@
+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, attr } from '@github/catalyst';
+let ScrollableRegionElement = class ScrollableRegionElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.hasOverflow = false;
+        this.labelledBy = '';
+    }
+    connectedCallback() {
+        this.style.overflow = 'auto';
+        this.observer = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                this.hasOverflow =
+                    entry.target.scrollHeight > entry.target.clientHeight || entry.target.scrollWidth > entry.target.clientWidth;
+            }
+        });
+        this.observer.observe(this);
+    }
+    disconnectedCallback() {
+        this.observer.disconnect();
+    }
+    attributeChangedCallback(name) {
+        if (name === 'data-has-overflow') {
+            if (this.hasOverflow) {
+                this.setAttribute('aria-labelledby', this.labelledBy);
+                this.setAttribute('role', 'region');
+                this.setAttribute('tabindex', '0');
+            }
+            else {
+                this.removeAttribute('aria-labelledby');
+                this.removeAttribute('role');
+                this.removeAttribute('tabindex');
+            }
+        }
+    }
+};
+__decorate([
+    attr
+], ScrollableRegionElement.prototype, "hasOverflow", void 0);
+__decorate([
+    attr
+], ScrollableRegionElement.prototype, "labelledBy", void 0);
+ScrollableRegionElement = __decorate([
+    controller
+], ScrollableRegionElement);
+export { ScrollableRegionElement };
+window.ScrollableRegionElement = ScrollableRegionElement;

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

@@ -0,0 +1,26 @@
+export type ItemActivatedEvent = {
+    item: Element;
+    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/app/components/primer/shared_events.js

@@ -0,0 +1 @@
+export {};

package/app/components/primer/truncate.css

@@ -0,0 +1,23 @@
+/* CSS truncate */
+
+/* css-truncate will shorten text with an ellipsis. */
+
+/* css-truncate-overflow will shorten text with an ellipsis when overflowing */
+
+.css-truncate.css-truncate-overflow,.css-truncate .css-truncate-overflow,.css-truncate.css-truncate-target,.css-truncate .css-truncate-target {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+/* css-truncate-target will shorten text with an ellipsis and a max width */
+
+.css-truncate.css-truncate-target,.css-truncate .css-truncate-target {
+    display: inline-block;
+    max-width: 125px;
+    vertical-align: top;
+  }
+
+.css-truncate.expandable.zeroclipboard-is-hover .css-truncate-target,.css-truncate.expandable.zeroclipboard-is-hover.css-truncate-target,.css-truncate.expandable:hover .css-truncate-target,.css-truncate.expandable.css-truncate-target:hover {
+    max-width: 10000px !important;
+  }

package/app/components/primer/truncate.css.json

@@ -0,0 +1,13 @@
+{
+  "name": "truncate",
+  "selectors": [
+    ".css-truncate.css-truncate-overflow",
+    ".css-truncate .css-truncate-overflow",
+    ".css-truncate.css-truncate-target",
+    ".css-truncate .css-truncate-target",
+    ".css-truncate.expandable.zeroclipboard-is-hover .css-truncate-target",
+    ".css-truncate.expandable.zeroclipboard-is-hover.css-truncate-target",
+    ".css-truncate.expandable:hover .css-truncate-target",
+    ".css-truncate.expandable.css-truncate-target:hover"
+  ]
+}

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

@@ -0,0 +1 @@
+export declare const observeMutationsUntilConditionMet: (element: Element, condition: () => boolean, body: () => void) => void;

package/app/components/primer/utils.js

@@ -0,0 +1,16 @@
+// Waits for condition to return true. If it returns false initially, this function creates a
+// MutationObserver that calls body() whenever the contents of the component change.
+export const observeMutationsUntilConditionMet = (element, condition, body) => {
+    if (condition()) {
+        body();
+    }
+    else {
+        const mutationObserver = new MutationObserver(() => {
+            if (condition()) {
+                body();
+                mutationObserver.disconnect();
+            }
+        });
+        mutationObserver.observe(element, { childList: true, subtree: true });
+    }
+};

package/app/lib/primer/forms/primer_multi_input.d.ts

@@ -0,0 +1,10 @@
+export declare class PrimerMultiInputElement extends HTMLElement {
+    fields: HTMLInputElement[];
+    activateField(name: string): void;
+    private findField;
+}
+declare global {
+    interface Window {
+        PrimerMultiInputElement: typeof PrimerMultiInputElement;
+    }
+}

package/app/lib/primer/forms/primer_multi_input.js

@@ -0,0 +1,44 @@
+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;
+};
+/* eslint-disable custom-elements/expose-class-on-global */
+import { controller, targets } from '@github/catalyst';
+let PrimerMultiInputElement = class PrimerMultiInputElement extends HTMLElement {
+    activateField(name) {
+        const fieldWithName = this.findField(name);
+        if (!fieldWithName)
+            return;
+        for (const field of this.fields) {
+            if (field === fieldWithName)
+                continue;
+            field.setAttribute('disabled', 'disabled');
+            field.setAttribute('hidden', 'hidden');
+            field.parentElement?.setAttribute('hidden', 'hidden');
+        }
+        fieldWithName.removeAttribute('disabled');
+        fieldWithName.removeAttribute('hidden');
+        fieldWithName.parentElement?.removeAttribute('hidden');
+    }
+    findField(name) {
+        for (const field of this.fields) {
+            if (field.getAttribute('data-name') === name) {
+                return field;
+            }
+        }
+        return null;
+    }
+};
+__decorate([
+    targets
+], PrimerMultiInputElement.prototype, "fields", void 0);
+PrimerMultiInputElement = __decorate([
+    controller
+], PrimerMultiInputElement);
+export { PrimerMultiInputElement };
+if (!window.customElements.get('primer-multi-input')) {
+    Object.assign(window, { PrimerMultiInputElement });
+    window.customElements.define('primer-multi-input', PrimerMultiInputElement);
+}

package/app/lib/primer/forms/primer_text_field.d.ts

@@ -0,0 +1,28 @@
+import '@github/auto-check-element';
+import type { AutoCheckErrorEvent, AutoCheckSuccessEvent } from '@github/auto-check-element';
+declare global {
+    interface HTMLElementEventMap {
+        'auto-check-success': AutoCheckSuccessEvent;
+        'auto-check-error': AutoCheckErrorEvent;
+    }
+}
+export declare class PrimerTextFieldElement extends HTMLElement {
+    #private;
+    inputElement: HTMLInputElement;
+    validationElement: HTMLElement;
+    validationMessageElement: HTMLElement;
+    validationSuccessIcon: HTMLElement;
+    validationErrorIcon: HTMLElement;
+    leadingVisual: HTMLElement;
+    leadingSpinner: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    clearContents(): void;
+    clearError(): void;
+    setValidationMessage(message: string): void;
+    toggleValidationStyling(isError: boolean): void;
+    setSuccess(message: string): void;
+    setError(message: string): void;
+    showLeadingSpinner(): void;
+    hideLeadingSpinner(): void;
+}