@primer/view-components 0.44.0-rc.dd789cab → 0.44.0-rc.f46ac63e

package/app/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/components/primer/alpha/action_menu/action_menu_element.js

@@ -15,13 +15,14 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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 _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_invokerBeingClicked, _ActionMenuElement_intersectionObserver, _ActionMenuElement_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation, _ActionMenuElement_isAnchorActivationViaSpace, _ActionMenuElement_isActivation, _ActionMenuElement_handleInvokerActivated, _ActionMenuElement_handleDialogItemActivated, _ActionMenuElement_handleItemActivated, _ActionMenuElement_handleIncludeFragmentReplaced, _ActionMenuElement_handleFocusOut, _ActionMenuElement_show, _ActionMenuElement_hide, _ActionMenuElement_isOpen, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_firstItem_get;
+var _ActionMenuElement_instances, _a, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_invokerBeingClicked, _ActionMenuElement_intersectionObserver, _ActionMenuElement_focusZoneStack, _ActionMenuElement_updateLevels, _ActionMenuElement_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation, _ActionMenuElement_isAnchorActivationViaSpace, _ActionMenuElement_isClipboardActivationViaKeyboard, _ActionMenuElement_isActivation, _ActionMenuElement_handleItemKeyboardEvent, _ActionMenuElement_handleToggleEvent, _ActionMenuElement_handleInvokerActivated, _ActionMenuElement_handleDialogItemActivated, _ActionMenuElement_handleItemActivated, _ActionMenuElement_handleIncludeFragmentReplaced, _ActionMenuElement_handleFocusOut, _ActionMenuElement_show, _ActionMenuElement_hide, _ActionMenuElement_isOpen, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_firstItem_get, _ActionMenuElement_subMenuForItem, _ActionMenuElement_itemForSubMenu;
+var ActionMenuElement_1;
 import { controller, target } from '@github/catalyst';
 import '@oddbird/popover-polyfill';
 import { observeMutationsUntilConditionMet } from '../../utils';
-const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
-const menuItemSelectors = validSelectors.map(selector => `:not([hidden]) > ${selector}`);
-let ActionMenuElement = class ActionMenuElement extends HTMLElement {
+import { ActionMenuFocusZoneStack } from './action_menu_focus_zone_stack';
+import { ClipboardCopyElement } from '@github/clipboard-copy-element';
+let ActionMenuElement = ActionMenuElement_1 = _a = class ActionMenuElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _ActionMenuElement_instances.add(this);
@@ -30,6 +31,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         _ActionMenuElement_inputName.set(this, '');
         _ActionMenuElement_invokerBeingClicked.set(this, false);
         _ActionMenuElement_intersectionObserver.set(this, void 0);
+        _ActionMenuElement_focusZoneStack.set(this, void 0);
     }
     get selectVariant() {
         return this.getAttribute('data-select-variant');
@@ -60,6 +62,10 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
     get popoverElement() {
         return this.invokerElement?.popoverTargetElement || null;
     }
+    // i.e. sub-menus
+    get childPopoverElements() {
+        return Array.from(this.overlay.querySelectorAll('anchored-position'));
+    }
     get invokerElement() {
         const id = this.querySelector('[role=menu]')?.id;
         if (!id)
@@ -96,7 +102,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         this.addEventListener('mouseover', this, { signal });
         this.addEventListener('focusout', this, { signal });
         this.addEventListener('mousedown', this, { signal });
-        this.popoverElement?.addEventListener('toggle', this, { signal });
+        this.addEventListener('toggle', this, { signal, capture: true });
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_softDisableItems).call(this);
@@ -134,6 +140,10 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         if (!this.includeFragment) {
             this.setAttribute('data-ready', 'true');
         }
+        const levelObserver = new MutationObserver(() => __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateLevels).call(this));
+        levelObserver.observe(this, { childList: true, subtree: true });
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateLevels).call(this);
+        __classPrivateFieldSet(this, _ActionMenuElement_focusZoneStack, new ActionMenuFocusZoneStack(), "f");
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
@@ -141,10 +151,9 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
     handleEvent(event) {
         const targetIsInvoker = this.invokerElement?.contains(event.target);
         const eventIsActivation = __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivation).call(this, event);
-        if (event.type === 'toggle' && event.newState === 'open') {
-            window.requestAnimationFrame(() => {
-                __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)?.focus();
-            });
+        if (event.type === 'toggle' && event instanceof ToggleEvent) {
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleToggleEvent).call(this, event);
+            return;
         }
         if (targetIsInvoker && event.type === 'mousedown') {
             __classPrivateFieldSet(this, _ActionMenuElement_invokerBeingClicked, true, "f");
@@ -172,7 +181,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
             });
             return;
         }
-        const item = event.target.closest(menuItemSelectors.join(','));
+        const item = event.target.closest(ActionMenuElement_1.menuItemSelectors.join(','));
         const targetIsItem = item !== null;
         if (targetIsItem && eventIsActivation) {
             if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_potentiallyDisallowActivation).call(this, event))
@@ -191,15 +200,26 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
                 event.preventDefault();
                 item.click();
             }
+            const subMenu = __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_subMenuForItem).call(this, item);
+            if (subMenu) {
+                // Prevent submitting a form when clicking on sub-menu items
+                event.preventDefault();
+                subMenu.showPopover();
+                return;
+            }
             __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleItemActivated).call(this, item);
             return;
         }
         if (event.type === 'include-fragment-replaced') {
             __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleIncludeFragmentReplaced).call(this);
+            return;
+        }
+        if (targetIsItem && event instanceof KeyboardEvent) {
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleItemKeyboardEvent).call(this, event, item);
         }
     }
     get items() {
-        return Array.from(this.querySelectorAll(menuItemSelectors.join(',')));
+        return Array.from(this.querySelectorAll(ActionMenuElement_1.menuItemSelectors.join(',')));
     }
     getItemById(itemId) {
         return this.querySelector(`li[data-item-id="${itemId}"`);
@@ -274,10 +294,18 @@ _ActionMenuElement_originalLabel = new WeakMap();
 _ActionMenuElement_inputName = new WeakMap();
 _ActionMenuElement_invokerBeingClicked = new WeakMap();
 _ActionMenuElement_intersectionObserver = new WeakMap();
+_ActionMenuElement_focusZoneStack = new WeakMap();
 _ActionMenuElement_instances = new WeakSet();
+_ActionMenuElement_updateLevels = function _ActionMenuElement_updateLevels() {
+    let idx = 1;
+    for (const menu of this.querySelectorAll('[role=menu]')) {
+        menu.setAttribute('data-level', idx.toString());
+        idx++;
+    }
+};
 _ActionMenuElement_softDisableItems = function _ActionMenuElement_softDisableItems() {
     const { signal } = __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f");
-    for (const item of this.querySelectorAll(validSelectors.join(','))) {
+    for (const item of this.querySelectorAll(ActionMenuElement_1.validSelectors.join(','))) {
         item.addEventListener('click', __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_potentiallyDisallowActivation).bind(this), { signal });
         item.addEventListener('keydown', __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_potentiallyDisallowActivation).bind(this), { signal });
     }
@@ -285,7 +313,7 @@ _ActionMenuElement_softDisableItems = function _ActionMenuElement_softDisableIte
 _ActionMenuElement_potentiallyDisallowActivation = function _ActionMenuElement_potentiallyDisallowActivation(event) {
     if (!__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivation).call(this, event))
         return false;
-    const item = event.target.closest(menuItemSelectors.join(','));
+    const item = event.target.closest(ActionMenuElement_1.menuItemSelectors.join(','));
     if (!item)
         return false;
     if (item.getAttribute('aria-disabled')) {
@@ -305,11 +333,57 @@ _ActionMenuElement_isAnchorActivationViaSpace = function _ActionMenuElement_isAn
         !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
         event.key === ' ');
 };
+_ActionMenuElement_isClipboardActivationViaKeyboard = function _ActionMenuElement_isClipboardActivationViaKeyboard(event) {
+    return (event.target instanceof ClipboardCopyElement &&
+        event instanceof KeyboardEvent &&
+        event.type === 'keydown' &&
+        !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+        (event.key === ' ' || event.key === 'Enter'));
+};
 _ActionMenuElement_isActivation = function _ActionMenuElement_isActivation(event) {
     // Some browsers fire MouseEvents (Firefox) and others fire PointerEvents (Chrome). Activating an item via
     // enter or space counterintuitively fires one of these rather than a KeyboardEvent. Since PointerEvent
     // inherits from MouseEvent, it is enough to check for MouseEvent here.
-    return (event instanceof MouseEvent && event.type === 'click') || __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isAnchorActivationViaSpace).call(this, event);
+    return ((event instanceof MouseEvent && event.type === 'click') ||
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isAnchorActivationViaSpace).call(this, event) ||
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isClipboardActivationViaKeyboard).call(this, event));
+};
+_ActionMenuElement_handleItemKeyboardEvent = function _ActionMenuElement_handleItemKeyboardEvent(event, item) {
+    switch (event.key) {
+        case 'ArrowRight': {
+            const subMenu = __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_subMenuForItem).call(this, item);
+            subMenu?.showPopover();
+            break;
+        }
+        case 'ArrowLeft':
+            if (item.closest('role[menu]') !== this.list) {
+                const overlay = item.closest('anchored-position');
+                overlay?.hidePopover();
+            }
+            break;
+    }
+};
+_ActionMenuElement_handleToggleEvent = function _ActionMenuElement_handleToggleEvent(event) {
+    const subMenu = event.target;
+    if (event.newState === 'open') {
+        // allow tabbing away from primary menu, but trap focus in sub-menus
+        const isPrimaryMenu = subMenu === this.overlay;
+        __classPrivateFieldGet(this, _ActionMenuElement_focusZoneStack, "f").push(subMenu, { trapFocus: !isPrimaryMenu });
+        window.requestAnimationFrame(() => {
+            const firstItem = subMenu.querySelector(ActionMenuElement_1.menuItemSelectors.join(','));
+            firstItem?.focus();
+        });
+    }
+    else {
+        // Note that this will also cause focus to return to the invoker button, which is
+        // desirable
+        __classPrivateFieldGet(this, _ActionMenuElement_focusZoneStack, "f").pop(subMenu);
+        const item = __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_itemForSubMenu).call(this, subMenu);
+        const openPopover = document.querySelector(':popover-open');
+        if (item && !openPopover) {
+            item.focus();
+        }
+    }
 };
 _ActionMenuElement_handleInvokerActivated = function _ActionMenuElement_handleInvokerActivated(event) {
     event.preventDefault();
@@ -412,6 +486,9 @@ _ActionMenuElement_show = function _ActionMenuElement_show() {
 };
 _ActionMenuElement_hide = function _ActionMenuElement_hide() {
     this.popoverElement?.hidePopover();
+    for (const child of this.childPopoverElements) {
+        child.hidePopover();
+    }
 };
 _ActionMenuElement_isOpen = function _ActionMenuElement_isOpen() {
     return this.popoverElement?.matches(':popover-open');
@@ -476,15 +553,35 @@ _ActionMenuElement_updateInput = function _ActionMenuElement_updateInput() {
     }
 };
 _ActionMenuElement_firstItem_get = function _ActionMenuElement_firstItem_get() {
-    return this.querySelector(menuItemSelectors.join(','));
+    return this.querySelector(ActionMenuElement_1.menuItemSelectors.join(','));
+};
+_ActionMenuElement_subMenuForItem = function _ActionMenuElement_subMenuForItem(item) {
+    const popoverId = item.getAttribute('popovertarget');
+    if (popoverId) {
+        return this.querySelector(`[id="${popoverId}"]`);
+    }
+    return null;
 };
+_ActionMenuElement_itemForSubMenu = function _ActionMenuElement_itemForSubMenu(subMenu) {
+    const anchorId = subMenu.getAttribute('anchor');
+    if (anchorId) {
+        return this.querySelector(`[id="${anchorId}"]`);
+    }
+    return null;
+};
+ActionMenuElement.validItemRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];
+ActionMenuElement.validSelectors = ActionMenuElement_1.validItemRoles.map(role => `[role="${role}"]`);
+ActionMenuElement.menuItemSelectors = ActionMenuElement_1.validSelectors.map(selector => `:not([hidden]) > ${selector}`);
 __decorate([
     target
 ], ActionMenuElement.prototype, "includeFragment", void 0);
 __decorate([
     target
 ], ActionMenuElement.prototype, "overlay", void 0);
-ActionMenuElement = __decorate([
+__decorate([
+    target
+], ActionMenuElement.prototype, "list", void 0);
+ActionMenuElement = ActionMenuElement_1 = __decorate([
     controller
 ], ActionMenuElement);
 export { ActionMenuElement };

package/app/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/components/primer/alpha/action_menu/action_menu_focus_zone_stack.js

@@ -0,0 +1,62 @@
+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 _ActionMenuFocusZoneStack_instances, _ActionMenuFocusZoneStack_stack, _ActionMenuFocusZoneStack_setupFocusZone, _ActionMenuFocusZoneStack_validItemRoles_get;
+import { FocusKeys, focusTrap, focusZone } from '@primer/behaviors';
+import { ActionMenuElement } from './action_menu_element';
+export class ActionMenuFocusZoneStack {
+    constructor() {
+        _ActionMenuFocusZoneStack_instances.add(this);
+        _ActionMenuFocusZoneStack_stack.set(this, void 0);
+        __classPrivateFieldSet(this, _ActionMenuFocusZoneStack_stack, [], "f");
+    }
+    get current() {
+        return __classPrivateFieldGet(this, _ActionMenuFocusZoneStack_stack, "f")[__classPrivateFieldGet(this, _ActionMenuFocusZoneStack_stack, "f").length - 1];
+    }
+    push(next, options = { trapFocus: true }) {
+        const { trapFocus } = options;
+        __classPrivateFieldGet(this, _ActionMenuFocusZoneStack_stack, "f").push({ element: next, abortController: __classPrivateFieldGet(this, _ActionMenuFocusZoneStack_instances, "m", _ActionMenuFocusZoneStack_setupFocusZone).call(this, next, trapFocus) });
+    }
+    pop(target) {
+        if (target) {
+            while (__classPrivateFieldGet(this, _ActionMenuFocusZoneStack_stack, "f").length > 0 && this.current?.element !== target) {
+                const entry = __classPrivateFieldGet(this, _ActionMenuFocusZoneStack_stack, "f").pop();
+                entry?.abortController?.abort();
+            }
+        }
+        const entry = __classPrivateFieldGet(this, _ActionMenuFocusZoneStack_stack, "f").pop();
+        entry?.abortController?.abort();
+    }
+    elementIsMenuItem(element) {
+        return __classPrivateFieldGet(this, _ActionMenuFocusZoneStack_instances, "a", _ActionMenuFocusZoneStack_validItemRoles_get).includes(element.getAttribute('role') || '');
+    }
+    get isEmpty() {
+        return __classPrivateFieldGet(this, _ActionMenuFocusZoneStack_stack, "f").length === 0;
+    }
+}
+_ActionMenuFocusZoneStack_stack = new WeakMap(), _ActionMenuFocusZoneStack_instances = new WeakSet(), _ActionMenuFocusZoneStack_setupFocusZone = function _ActionMenuFocusZoneStack_setupFocusZone(containerEl, trapFocus) {
+    const focusZoneAbortController = focusZone(containerEl, {
+        bindKeys: FocusKeys.ArrowVertical | FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd | FocusKeys.Backspace,
+        focusOutBehavior: 'wrap',
+        focusableElementFilter: (element) => {
+            return this.elementIsMenuItem(element) && element.closest('anchored-position') === containerEl;
+        },
+    });
+    if (trapFocus) {
+        const { signal: focusZoneSignal } = focusZoneAbortController;
+        return focusTrap(containerEl, undefined, focusZoneSignal);
+    }
+    else {
+        return focusZoneAbortController;
+    }
+}, _ActionMenuFocusZoneStack_validItemRoles_get = function _ActionMenuFocusZoneStack_validItemRoles_get() {
+    return ActionMenuElement.validItemRoles;
+};

package/app/components/primer/beta/progress_bar.css

@@ -1 +1 @@
-.Progress{background-color:var(--bgColor-neutral-muted);border-radius:var(--borderRadius-medium);display:flex;height:8px;outline:1px solid #0000;overflow:hidden}.Progress--large{height:10px}.Progress--small{height:5px}.Progress-item{outline:2px solid #0000}.Progress-item+.Progress-item{margin-left:var(--base-size-2)}
+.Progress{background-color:var(--progressBar-track-bgColor);border-radius:var(--borderRadius-medium);display:flex;height:8px;outline:solid 1px var(--progressBar-track-borderColor);outline-offset:-1px;overflow:hidden}.Progress--large{height:10px}.Progress--small{height:5px}.Progress-item{outline:2px solid #0000}.Progress-item+.Progress-item{margin-left:var(--base-size-2)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.44.0-rc.dd789cab",
+  "version": "0.44.0-rc.f46ac63e",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -68,7 +68,7 @@
     "@github/markdownlint-github": "^0.8.0",
     "@github/prettier-config": "0.0.6",
     "@playwright/test": "^1.49.1",
-    "@primer/css": "22.0.0",
+    "@primer/css": "22.0.2",
     "@primer/stylelint-config": "^13.1.1",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^8.3.3",