@primer/view-components 0.43.6 → 0.44.0-rc.2b4579f7

package/app/assets/javascripts/components/primer/alpha/action_menu/action_menu_element.d.ts

@@ -11,6 +11,10 @@ export declare class ActionMenuElement extends HTMLElement {
     #private;
     includeFragment: IncludeFragmentElement;
     overlay: AnchoredPositionElement;
+    list: HTMLElement;
+    static validItemRoles: string[];
+    static validSelectors: string[];
+    static menuItemSelectors: string[];
     get selectVariant(): SelectVariant;
     set selectVariant(variant: SelectVariant);
     get dynamicLabelPrefix(): string;
@@ -18,6 +22,7 @@ export declare class ActionMenuElement extends HTMLElement {
     get dynamicLabel(): boolean;
     set dynamicLabel(value: boolean);
     get popoverElement(): HTMLElement | null;
+    get childPopoverElements(): HTMLElement[];
     get invokerElement(): HTMLButtonElement | null;
     get invokerLabel(): HTMLElement | null;
     get selectedItems(): SelectedItem[];

package/app/assets/javascripts/components/primer/alpha/action_menu/action_menu_focus_zone_stack.d.ts

@@ -0,0 +1,17 @@
+import AnchoredPositionElement from '../../anchored_position';
+type StackEntry = {
+    element: AnchoredPositionElement;
+    abortController?: AbortController;
+};
+export declare class ActionMenuFocusZoneStack {
+    #private;
+    constructor();
+    get current(): StackEntry | undefined;
+    push(next: AnchoredPositionElement, options?: {
+        trapFocus: boolean;
+    }): void;
+    pop(target?: AnchoredPositionElement): void;
+    elementIsMenuItem(element: HTMLElement): boolean;
+    get isEmpty(): boolean;
+}
+export {};

package/app/assets/javascripts/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/assets/javascripts/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/assets/javascripts/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/assets/javascripts/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/assets/javascripts/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/assets/javascripts/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/assets/javascripts/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[]>;
     }
 }