primer_view_components 0.0.92 → 0.0.93

data/app/components/primer/experimental/action-bar-element.js

@@ -0,0 +1,139 @@
+/* eslint-disable custom-elements/expose-class-on-global */
+/* eslint-disable custom-elements/define-tag-after-class-definition */
+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 _ActionBarElement_instances, _ActionBarElement_observer, _ActionBarElement_initialBarWidth, _ActionBarElement_itemGap, _ActionBarElement_focusController, _ActionBarElement_focusSettings, _ActionBarElement_availableSpace, _ActionBarElement_calculateVisibleItems, _ActionBarElement_nextItemWidth, _ActionBarElement_hideItem, _ActionBarElement_showItem, _ActionBarElement_hiddenItems, _ActionBarElement_visibleItems, _ActionBarElement_hiddenMenuItems, _ActionBarElement_visibleMenuItems;
+import { controller, targets, target } from '@github/catalyst';
+import { positionedOffset, focusZone, FocusKeys } from '@primer/behaviors';
+let ActionBarElement = class ActionBarElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ActionBarElement_instances.add(this);
+        _ActionBarElement_observer.set(this, void 0);
+        _ActionBarElement_initialBarWidth.set(this, void 0);
+        _ActionBarElement_itemGap.set(this, void 0);
+        _ActionBarElement_focusController.set(this, void 0);
+        _ActionBarElement_focusSettings.set(this, {
+            bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd
+        });
+    }
+    connectedCallback() {
+        var _a, _b, _c;
+        __classPrivateFieldSet(this, _ActionBarElement_initialBarWidth, this.offsetWidth, "f");
+        __classPrivateFieldSet(this, _ActionBarElement_itemGap, parseInt((_a = window.getComputedStyle(this)) === null || _a === void 0 ? void 0 : _a.columnGap, 10) || 0, "f");
+        // Calculate the width of all the items before hiding anything
+        for (const item of this.items) {
+            const width = item.getBoundingClientRect().width;
+            const marginLeft = parseInt((_b = window.getComputedStyle(item)) === null || _b === void 0 ? void 0 : _b.marginLeft, 10);
+            const marginRight = parseInt((_c = window.getComputedStyle(item)) === null || _c === void 0 ? void 0 : _c.marginRight, 10);
+            item.setAttribute('data-offset-width', `${width + marginLeft + marginRight}`);
+        }
+        __classPrivateFieldSet(this, _ActionBarElement_focusController, focusZone(this, __classPrivateFieldGet(this, _ActionBarElement_focusSettings, "f")), "f");
+        // Calculate visible items on page load until there is enough space
+        // to show all items or the first item is hidden
+        while (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) < 0 && !this.items[0].hidden) {
+            __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_calculateVisibleItems).call(this);
+        }
+        __classPrivateFieldSet(this, _ActionBarElement_observer, new ResizeObserver(entries => {
+            for (const entry of entries) {
+                // Only recalculate if the bar width changed
+                if (__classPrivateFieldGet(this, _ActionBarElement_initialBarWidth, "f") !== entry.contentRect.width) {
+                    __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_calculateVisibleItems).call(this);
+                }
+            }
+        }), "f");
+        __classPrivateFieldGet(this, _ActionBarElement_observer, "f").observe(this);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _ActionBarElement_focusController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldGet(this, _ActionBarElement_observer, "f").unobserve(this);
+    }
+};
+_ActionBarElement_observer = new WeakMap(), _ActionBarElement_initialBarWidth = new WeakMap(), _ActionBarElement_itemGap = new WeakMap(), _ActionBarElement_focusController = new WeakMap(), _ActionBarElement_focusSettings = new WeakMap(), _ActionBarElement_instances = new WeakSet(), _ActionBarElement_availableSpace = function _ActionBarElement_availableSpace() {
+    // Get the offset of the first item from the container edge
+    const offset = positionedOffset(this.items[0], this);
+    if (!offset) {
+        return this.clientWidth - this.moreMenu.clientWidth;
+    }
+    return offset.left;
+}, _ActionBarElement_calculateVisibleItems = function _ActionBarElement_calculateVisibleItems() {
+    const space = __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this);
+    if (space < 0) {
+        __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this);
+    }
+    else if (space > __classPrivateFieldGet(this, _ActionBarElement_itemGap, "f") + __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_nextItemWidth).call(this)) {
+        __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this);
+    }
+}, _ActionBarElement_nextItemWidth = function _ActionBarElement_nextItemWidth() {
+    const nextItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hiddenItems).call(this)[0] || this.items[0];
+    return Number(nextItem.getAttribute('data-offset-width') || '0');
+}, _ActionBarElement_hideItem = function _ActionBarElement_hideItem() {
+    var _a;
+    const visibleItems = __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_visibleItems).call(this);
+    const hiddenMenuItems = __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hiddenMenuItems).call(this);
+    if (visibleItems.length === 0) {
+        return;
+    }
+    visibleItems[visibleItems.length - 1].hidden = true;
+    hiddenMenuItems[hiddenMenuItems.length - 1].hidden = false;
+    if (this.moreMenu.hidden) {
+        this.moreMenu.hidden = false;
+    }
+    // Reset focus controller
+    (_a = __classPrivateFieldGet(this, _ActionBarElement_focusController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+    __classPrivateFieldSet(this, _ActionBarElement_focusController, focusZone(this, __classPrivateFieldGet(this, _ActionBarElement_focusSettings, "f")), "f");
+}, _ActionBarElement_showItem = function _ActionBarElement_showItem() {
+    var _a;
+    const hiddenItems = __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hiddenItems).call(this);
+    const visibleMenuItems = __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_visibleMenuItems).call(this);
+    if (hiddenItems.length === 0) {
+        return;
+    }
+    hiddenItems[0].hidden = false;
+    visibleMenuItems[0].hidden = true;
+    // If there was only one item left, hide the more menu
+    if (hiddenItems.length === 1) {
+        this.moreMenu.hidden = true;
+        this.moreMenu.open = false;
+    }
+    // Reset focus controller
+    (_a = __classPrivateFieldGet(this, _ActionBarElement_focusController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+    __classPrivateFieldSet(this, _ActionBarElement_focusController, focusZone(this, __classPrivateFieldGet(this, _ActionBarElement_focusSettings, "f")), "f");
+}, _ActionBarElement_hiddenItems = function _ActionBarElement_hiddenItems() {
+    return this.items.filter(item => item.hidden);
+}, _ActionBarElement_visibleItems = function _ActionBarElement_visibleItems() {
+    return this.items.filter(item => !item.hidden);
+}, _ActionBarElement_hiddenMenuItems = function _ActionBarElement_hiddenMenuItems() {
+    return this.menuItems.filter(item => item.hidden);
+}, _ActionBarElement_visibleMenuItems = function _ActionBarElement_visibleMenuItems() {
+    return this.menuItems.filter(item => !item.hidden);
+};
+__decorate([
+    targets
+], ActionBarElement.prototype, "items", void 0);
+__decorate([
+    targets
+], ActionBarElement.prototype, "menuItems", void 0);
+__decorate([
+    target
+], ActionBarElement.prototype, "moreMenu", void 0);
+ActionBarElement = __decorate([
+    controller
+], ActionBarElement);
+export { ActionBarElement };

data/app/components/primer/experimental/action-menu-element.d.ts

@@ -0,0 +1,31 @@
+import type { AnchorAlignment, AnchorSide } from '@primer/behaviors';
+export declare class ActionMenuElement extends HTMLElement {
+    #private;
+    get anchorAlign(): AnchorAlignment;
+    get anchorSide(): AnchorSide;
+    get menu(): HTMLUListElement | null;
+    get trigger(): HTMLButtonElement | null;
+    get overlay(): HTMLDivElement | null;
+    get menuItems(): HTMLElement[] | null;
+    get open(): boolean;
+    set open(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    show(): void;
+    hide(): void;
+    setFocusToMenuItem(newMenuItem: HTMLElement): void;
+    setFocusToPreviousMenuItem(currentMenuItem: HTMLElement): HTMLElement | undefined;
+    setFocusToNextMenuItem(currentMenuItem: HTMLElement): HTMLElement | undefined;
+    setFocusByFirstCharacter(currentMenuItem: HTMLElement, character: string): void;
+    buttonKeydown(event: KeyboardEvent): void;
+    buttonClick(event: MouseEvent): void;
+    menuItemKeydown(event: KeyboardEvent): void;
+    menuItemClick(): void;
+    menuItemMouseover(event: MouseEvent): void;
+    backgroundMousedown(event: MouseEvent): void;
+}
+declare global {
+    interface Window {
+        ActionMenuElement: typeof ActionMenuElement;
+    }
+}

data/app/components/primer/experimental/action-menu-element.js

@@ -0,0 +1,334 @@
+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 _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_firstCharactersOfItems, _ActionMenuElement_firstMenuItem, _ActionMenuElement_lastMenuItem, _ActionMenuElement_addEvents, _ActionMenuElement_updatePosition;
+import { getAnchoredPosition } from '@primer/behaviors';
+export class ActionMenuElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ActionMenuElement_instances.add(this);
+        _ActionMenuElement_abortController.set(this, void 0);
+        _ActionMenuElement_firstCharactersOfItems.set(this, void 0);
+        _ActionMenuElement_firstMenuItem.set(this, void 0);
+        _ActionMenuElement_lastMenuItem.set(this, void 0);
+    }
+    get anchorAlign() {
+        return (this.getAttribute('data-anchor-align') || 'start');
+    }
+    get anchorSide() {
+        return (this.getAttribute('data-anchor-side') || 'outside-bottom');
+    }
+    get menu() {
+        return this.querySelector('[role="menu"]');
+    }
+    get trigger() {
+        return this.querySelector('button');
+    }
+    get overlay() {
+        return this.querySelector('.Overlay');
+    }
+    get menuItems() {
+        if (!this.menu)
+            return null;
+        return Array.from(this.menu.querySelectorAll('[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]'));
+    }
+    get open() {
+        return this.hasAttribute('open');
+    }
+    set open(value) {
+        var _a, _b;
+        const initialBodyWidth = document.body.clientWidth;
+        const observer = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                if (initialBodyWidth !== entry.contentRect.width && this.open) {
+                    __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updatePosition).call(this);
+                }
+            }
+        });
+        if (value) {
+            if (this.open)
+                return;
+            if (!this.trigger || !this.menu)
+                return;
+            this.setAttribute('open', '');
+            this.trigger.setAttribute('aria-expanded', 'true');
+            (_a = this.overlay) === null || _a === void 0 ? void 0 : _a.removeAttribute('hidden');
+            this.menu.style.visibility = 'hidden';
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updatePosition).call(this);
+            // If the window width is changed when the menu is open,
+            // this keeps the menu aligned to the button
+            observer.observe(document.body);
+            this.menu.style.visibility = 'visible';
+        }
+        else {
+            if (!this.open)
+                return;
+            this.removeAttribute('open');
+            (_b = this.trigger) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-expanded', 'false');
+            this.overlay && this.overlay.setAttribute('hidden', 'true');
+            observer.unobserve(document.body);
+            // TODO: Do this without a setTimeout
+            setTimeout(() => {
+                var _a;
+                // There are some actions that may move focus to another part of the page intentionally.
+                // For example: "Quote Reply" in the comment options moves focus to the comment box.
+                // This only moves focus to the trigger if it's not managed in another way.
+                if (document.activeElement === document.body)
+                    (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 1);
+        }
+    }
+    connectedCallback() {
+        if (!this.trigger)
+            return;
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_addEvents).call(this);
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
+    }
+    show() {
+        this.open = true;
+    }
+    hide() {
+        this.open = false;
+    }
+    setFocusToMenuItem(newMenuItem) {
+        if (!this.menuItems)
+            return;
+        for (const item of this.menuItems) {
+            if (item === newMenuItem) {
+                item.tabIndex = 0;
+                newMenuItem.focus();
+            }
+            else {
+                item.tabIndex = -1;
+            }
+        }
+    }
+    setFocusToPreviousMenuItem(currentMenuItem) {
+        if (!this.menuItems)
+            return;
+        let newMenuItem = null;
+        let index = null;
+        if (currentMenuItem === __classPrivateFieldGet(this, _ActionMenuElement_firstMenuItem, "f")) {
+            newMenuItem = __classPrivateFieldGet(this, _ActionMenuElement_lastMenuItem, "f");
+        }
+        else {
+            index = this.menuItems.indexOf(currentMenuItem);
+            newMenuItem = this.menuItems[index - 1];
+        }
+        this.setFocusToMenuItem(newMenuItem);
+        return newMenuItem;
+    }
+    setFocusToNextMenuItem(currentMenuItem) {
+        if (!this.menuItems)
+            return;
+        let newMenuItem = null;
+        let index = null;
+        if (currentMenuItem === __classPrivateFieldGet(this, _ActionMenuElement_lastMenuItem, "f")) {
+            newMenuItem = __classPrivateFieldGet(this, _ActionMenuElement_firstMenuItem, "f");
+        }
+        else {
+            index = this.menuItems.indexOf(currentMenuItem);
+            newMenuItem = this.menuItems[index + 1];
+        }
+        this.setFocusToMenuItem(newMenuItem);
+        return newMenuItem;
+    }
+    setFocusByFirstCharacter(currentMenuItem, character) {
+        if (!this.menuItems)
+            return;
+        let start = null;
+        let index = null;
+        if (character.length > 1) {
+            return;
+        }
+        character = character.toLowerCase();
+        // Get start index for search based on position of currentMenuItem
+        start = this.menuItems.indexOf(currentMenuItem) + 1;
+        if (start >= this.menuItems.length) {
+            start = 0;
+        }
+        // Check remaining slots in the menu
+        index = __classPrivateFieldGet(this, _ActionMenuElement_firstCharactersOfItems, "f").indexOf(character, start);
+        // If character is not found in remaining slots, check from beginning
+        if (index === -1) {
+            index = __classPrivateFieldGet(this, _ActionMenuElement_firstCharactersOfItems, "f").indexOf(character, 0);
+        }
+        // If match is found
+        if (index > -1) {
+            this.setFocusToMenuItem(this.menuItems[index]);
+        }
+    }
+    // Menu event handlers
+    buttonKeydown(event) {
+        // TODO: use data-hotkey
+        const key = event.key;
+        let flag = false;
+        switch (key) {
+            case ' ':
+            case 'Enter':
+            case 'ArrowDown':
+            case 'Down':
+                this.show();
+                this.setFocusToMenuItem(__classPrivateFieldGet(this, _ActionMenuElement_firstMenuItem, "f"));
+                flag = true;
+                break;
+            case 'Esc':
+            case 'Escape':
+                this.hide();
+                flag = true;
+                break;
+            case 'Up':
+            case 'ArrowUp':
+                this.show();
+                this.setFocusToMenuItem(__classPrivateFieldGet(this, _ActionMenuElement_lastMenuItem, "f"));
+                flag = true;
+                break;
+            default:
+                break;
+        }
+        if (flag) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    buttonClick(event) {
+        if (this.open) {
+            this.hide();
+        }
+        else {
+            this.show();
+            this.setFocusToMenuItem(__classPrivateFieldGet(this, _ActionMenuElement_firstMenuItem, "f"));
+        }
+        event.stopPropagation();
+        event.preventDefault();
+    }
+    menuItemKeydown(event) {
+        var _a;
+        const currentTarget = event.currentTarget;
+        const key = event.key;
+        let flag = false;
+        function isPrintableCharacter(str) {
+            return str.length === 1 && str.match(/\S/);
+        }
+        if (event.ctrlKey || event.altKey || event.metaKey) {
+            return;
+        }
+        if (event.shiftKey) {
+            if (isPrintableCharacter(key)) {
+                this.setFocusByFirstCharacter(currentTarget, key);
+                flag = true;
+            }
+            if (event.key === 'Tab') {
+                (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.focus();
+                this.hide();
+                flag = true;
+            }
+        }
+        else {
+            switch (key) {
+                case 'Enter':
+                    this.hide();
+                    break;
+                case 'Esc':
+                case 'Escape':
+                    this.hide();
+                    flag = true;
+                    break;
+                case 'Up':
+                case 'ArrowUp':
+                    this.setFocusToPreviousMenuItem(currentTarget);
+                    flag = true;
+                    break;
+                case 'ArrowDown':
+                case 'Down':
+                    this.setFocusToNextMenuItem(currentTarget);
+                    flag = true;
+                    break;
+                case 'Home':
+                case 'PageUp':
+                    this.setFocusToMenuItem(__classPrivateFieldGet(this, _ActionMenuElement_firstMenuItem, "f"));
+                    flag = true;
+                    break;
+                case 'End':
+                case 'PageDown':
+                    this.setFocusToMenuItem(__classPrivateFieldGet(this, _ActionMenuElement_lastMenuItem, "f"));
+                    flag = true;
+                    break;
+                case 'Tab':
+                    this.hide();
+                    break;
+                default:
+                    if (isPrintableCharacter(key)) {
+                        this.setFocusByFirstCharacter(currentTarget, key);
+                        flag = true;
+                    }
+                    break;
+            }
+        }
+        if (flag) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    menuItemClick() {
+        this.hide();
+    }
+    menuItemMouseover(event) {
+        event.currentTarget.focus();
+    }
+    backgroundMousedown(event) {
+        if (!this)
+            return;
+        if (!this.contains(event.target)) {
+            if (this.open) {
+                this.hide();
+            }
+        }
+    }
+}
+_ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_firstCharactersOfItems = new WeakMap(), _ActionMenuElement_firstMenuItem = new WeakMap(), _ActionMenuElement_lastMenuItem = new WeakMap(), _ActionMenuElement_instances = new WeakSet(), _ActionMenuElement_addEvents = function _ActionMenuElement_addEvents() {
+    __classPrivateFieldSet(this, _ActionMenuElement_abortController, new AbortController(), "f");
+    const { signal } = __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f");
+    if (!this.trigger || !this.menu)
+        return;
+    this.trigger.addEventListener('keydown', this.buttonKeydown.bind(this), { signal });
+    this.trigger.addEventListener('click', this.buttonClick.bind(this), { signal });
+    __classPrivateFieldSet(this, _ActionMenuElement_firstCharactersOfItems, [], "f");
+    if (this.menuItems) {
+        for (const menuItem of this.menuItems) {
+            if (menuItem.textContent) {
+                __classPrivateFieldGet(this, _ActionMenuElement_firstCharactersOfItems, "f").push(menuItem.textContent.trim()[0].toLowerCase());
+            }
+            menuItem.addEventListener('keydown', this.menuItemKeydown.bind(this), { signal });
+            menuItem.addEventListener('click', this.menuItemClick.bind(this), { signal });
+            menuItem.addEventListener('mouseover', this.menuItemMouseover.bind(this), { signal });
+            if (!__classPrivateFieldGet(this, _ActionMenuElement_firstMenuItem, "f")) {
+                __classPrivateFieldSet(this, _ActionMenuElement_firstMenuItem, menuItem, "f");
+            }
+            __classPrivateFieldSet(this, _ActionMenuElement_lastMenuItem, menuItem, "f");
+        }
+    }
+    window.addEventListener('mousedown', this.backgroundMousedown.bind(this), true);
+}, _ActionMenuElement_updatePosition = function _ActionMenuElement_updatePosition() {
+    if (!this.trigger || !this.menu)
+        return;
+    const float = this.querySelector('[data-menu-overlay]') || this.menu;
+    const anchor = this.trigger;
+    const { top, left } = getAnchoredPosition(float, anchor, { side: this.anchorSide, align: this.anchorAlign });
+    float.style.top = `${top}px`;
+    float.style.left = `${left}px`;
+};
+if (!window.customElements.get('action-menu')) {
+    window.ActionMenuElement = ActionMenuElement;
+    window.customElements.define('action-menu', ActionMenuElement);
+}

data/app/components/primer/experimental/overflow-menu-element.d.ts

@@ -0,0 +1,13 @@
+export declare class ActionBarElement extends HTMLElement {
+    #private;
+    items: HTMLElement[];
+    menuItems: HTMLElement[];
+    moreMenu: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface Window {
+        ActionBarElement: typeof ActionBarElement;
+    }
+}

data/app/components/primer/experimental/overflow-menu-element.js

@@ -0,0 +1,113 @@
+/* eslint-disable custom-elements/expose-class-on-global */
+/* eslint-disable custom-elements/define-tag-after-class-definition */
+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 _ActionBarElement_instances, _ActionBarElement_observer, _ActionBarElement_initialBarWidth, _ActionBarElement_calculateVisibility, _ActionBarElement_hideItems, _ActionBarElement_showItems, _ActionBarElement_hiddenItems, _ActionBarElement_toggleMoreMenu, _ActionBarElement_gap;
+import { controller, targets, target } from '@github/catalyst';
+import { positionedOffset } from '@primer/behaviors';
+let ActionBarElement = class ActionBarElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ActionBarElement_instances.add(this);
+        // eslint-disable-next-line prettier/prettier
+        _ActionBarElement_observer.set(this, void 0);
+        _ActionBarElement_initialBarWidth.set(this, void 0);
+    }
+    connectedCallback() {
+        let overflowItemsCount = 0;
+        for (const item of this.items) {
+            const offset = positionedOffset(item, this);
+            if (offset && offset.left < 0) {
+                overflowItemsCount++;
+            }
+        }
+        __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItems).call(this, overflowItemsCount);
+        __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_toggleMoreMenu).call(this);
+        __classPrivateFieldSet(this, _ActionBarElement_initialBarWidth, this.offsetWidth, "f");
+        __classPrivateFieldSet(this, _ActionBarElement_observer, new ResizeObserver(entries => {
+            for (const entry of entries) {
+                if (__classPrivateFieldGet(this, _ActionBarElement_initialBarWidth, "f") !== entry.contentRect.width) {
+                    __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_calculateVisibility).call(this);
+                }
+            }
+        }), "f");
+        __classPrivateFieldGet(this, _ActionBarElement_observer, "f").observe(this);
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _ActionBarElement_observer, "f").unobserve(this);
+    }
+};
+_ActionBarElement_observer = new WeakMap(), _ActionBarElement_initialBarWidth = new WeakMap(), _ActionBarElement_instances = new WeakSet(), _ActionBarElement_calculateVisibility = function _ActionBarElement_calculateVisibility() {
+    const firstItem = this.items[0];
+    if (firstItem.hidden && this.offsetWidth >= firstItem.offsetWidth + __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_gap).call(this)) {
+        __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItems).call(this, 1);
+    }
+    const offset = positionedOffset(firstItem, this);
+    if (!offset) {
+        return;
+    }
+    if (offset.left < 0) {
+        __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItems).call(this, 1);
+    }
+    else if (offset.left >= firstItem.offsetWidth + __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_gap).call(this)) {
+        __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItems).call(this, 1);
+    }
+    __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_toggleMoreMenu).call(this);
+}, _ActionBarElement_hideItems = function _ActionBarElement_hideItems(count) {
+    const reversedItems = this.items.slice().reverse().filter(item => !item.hidden);
+    const reversedMenuItems = this.menuItems.slice().reverse().filter(item => item.hidden);
+    for (const i of [...Array(count).keys()]) {
+        if (reversedItems[i]) {
+            reversedItems[i].hidden = true;
+        }
+        if (reversedMenuItems[i]) {
+            reversedMenuItems[i].hidden = false;
+        }
+    }
+}, _ActionBarElement_showItems = function _ActionBarElement_showItems(count) {
+    const items = __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hiddenItems).call(this);
+    const menuItems = this.menuItems.filter(item => !item.hidden);
+    for (const i of [...Array(count).keys()]) {
+        if (items[i]) {
+            items[i].hidden = false;
+        }
+        if (menuItems[i]) {
+            menuItems[i].hidden = true;
+        }
+    }
+}, _ActionBarElement_hiddenItems = function _ActionBarElement_hiddenItems() {
+    return this.items.filter(item => item.hidden);
+}, _ActionBarElement_toggleMoreMenu = function _ActionBarElement_toggleMoreMenu() {
+    this.moreMenu.hidden = __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hiddenItems).call(this).length === 0;
+}, _ActionBarElement_gap = function _ActionBarElement_gap() {
+    var _a;
+    return parseInt((_a = window.getComputedStyle(this)) === null || _a === void 0 ? void 0 : _a.columnGap) || 0;
+};
+__decorate([
+    targets
+], ActionBarElement.prototype, "items", void 0);
+__decorate([
+    targets
+], ActionBarElement.prototype, "menuItems", void 0);
+__decorate([
+    target
+], ActionBarElement.prototype, "moreMenu", void 0);
+ActionBarElement = __decorate([
+    controller
+], ActionBarElement);
+export { ActionBarElement };

data/app/components/primer/primer.d.ts

@@ -7,3 +7,4 @@ import './image_crop';
 import './dropdown';
 import './alpha/toggle-switch-element';
 import './alpha/tool-tip-element';
+import './alpha/modal-dialog-element';

data/app/components/primer/primer.js

@@ -7,3 +7,4 @@ import './image_crop';
 import './dropdown';
 import './alpha/toggle-switch-element';
 import './alpha/tool-tip-element';
+import './alpha/modal-dialog-element';

data/app/components/primer/primer.pcss

@@ -1 +1,2 @@
 /* CSS component styles here */
+@import "./beta/button.pcss";

data/app/components/primer/primer.ts

@@ -7,3 +7,4 @@ import './image_crop'
 import './dropdown'
 import './alpha/toggle-switch-element'
 import './alpha/tool-tip-element'
+import './alpha/modal-dialog-element'

data/lib/postcss_mixins/focusBoxShadowInset.pcss

@@ -0,0 +1,6 @@
+/* inset box-shadow for form controls */
+@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--color-accent-fg) {
+  border-color: var(--color-accent-fg);
+  outline: none;
+  box-shadow: inset 0 0 0 $outlineWidth $outlineColor;
+}