primer_view_components 0.13.2 → 0.15.0

data/app/components/primer/alpha/action_menu/action_menu_element.js

@@ -15,7 +15,7 @@ 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_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation, _ActionMenuElement_isKeyboardActivation, _ActionMenuElement_isKeyboardActivationViaEnter, _ActionMenuElement_isKeyboardActivationViaSpace, _ActionMenuElement_isMouseActivation, _ActionMenuElement_isActivation, _ActionMenuElement_handleInvokerActivated, _ActionMenuElement_handleDialogItemActivated, _ActionMenuElement_handleItemActivated, _ActionMenuElement_activateItem, _ActionMenuElement_handleIncludeFragmentReplaced, _ActionMenuElement_handleFocusOut, _ActionMenuElement_show, _ActionMenuElement_hide, _ActionMenuElement_isOpen, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_firstItem_get, _ActionMenuElement_items_get;
+var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_invokerBeingClicked, _ActionMenuElement_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation, _ActionMenuElement_isKeyboardActivation, _ActionMenuElement_isKeyboardActivationViaEnter, _ActionMenuElement_isKeyboardActivationViaSpace, _ActionMenuElement_isMouseActivation, _ActionMenuElement_isActivation, _ActionMenuElement_handleInvokerActivated, _ActionMenuElement_handleDialogItemActivated, _ActionMenuElement_handleItemActivated, _ActionMenuElement_activateItem, _ActionMenuElement_handleIncludeFragmentReplaced, _ActionMenuElement_handleFocusOut, _ActionMenuElement_show, _ActionMenuElement_hide, _ActionMenuElement_isOpen, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_firstItem_get;
 import { controller, target } from '@github/catalyst';
 import '@oddbird/popover-polyfill';
 const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
@@ -84,7 +84,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
             results.push({
                 label: labelEl === null || labelEl === void 0 ? void 0 : labelEl.textContent,
                 value: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.getAttribute('data-value'),
-                element: selectedItem
+                element: selectedItem,
             });
         }
         return results;
@@ -101,7 +101,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_softDisableItems).call(this);
         if (this.includeFragment) {
             this.includeFragment.addEventListener('include-fragment-replaced', this, {
-                signal
+                signal,
             });
         }
     }
@@ -141,6 +141,8 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         const item = event.target.closest(menuItemSelectors.join(','));
         const targetIsItem = item !== null;
         if (targetIsItem && eventIsActivation) {
+            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_potentiallyDisallowActivation).call(this, event))
+                return;
             const dialogInvoker = item.closest('[data-show-dialog-id]');
             if (dialogInvoker) {
                 const dialog = this.ownerDocument.getElementById(dialogInvoker.getAttribute('data-show-dialog-id') || '');
@@ -150,7 +152,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
                 }
             }
             __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_activateItem).call(this, event, item);
-            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleItemActivated).call(this, event, item);
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleItemActivated).call(this, item);
             // Pressing the space key on a button or link will cause the page to scroll unless preventDefault()
             // is called. While calling preventDefault() appears to have no effect on link navigation, it skips
             // form submission. The code below therefore only calls preventDefault() if the button has been
@@ -167,41 +169,125 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
             __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleIncludeFragmentReplaced).call(this);
         }
     }
+    get items() {
+        return Array.from(this.querySelectorAll(menuItemSelectors.join(',')));
+    }
+    getItemById(itemId) {
+        return this.querySelector(`li[data-item-id="${itemId}"`);
+    }
+    isItemDisabled(item) {
+        if (item) {
+            return item.classList.contains('ActionListItem--disabled');
+        }
+        else {
+            return false;
+        }
+    }
+    disableItem(item) {
+        if (item) {
+            item.classList.add('ActionListItem--disabled');
+            item.querySelector('.ActionListContent').setAttribute('aria-disabled', 'true');
+        }
+    }
+    enableItem(item) {
+        if (item) {
+            item.classList.remove('ActionListItem--disabled');
+            item.querySelector('.ActionListContent').removeAttribute('aria-disabled');
+        }
+    }
+    isItemHidden(item) {
+        if (item) {
+            return item.hasAttribute('hidden');
+        }
+        else {
+            return false;
+        }
+    }
+    hideItem(item) {
+        if (item) {
+            item.setAttribute('hidden', 'hidden');
+        }
+    }
+    showItem(item) {
+        if (item) {
+            item.removeAttribute('hidden');
+        }
+    }
+    isItemChecked(item) {
+        if (item) {
+            return item.querySelector('.ActionListContent').getAttribute('aria-checked') === 'true';
+        }
+        else {
+            return false;
+        }
+    }
+    checkItem(item) {
+        if (item && (this.selectVariant === 'single' || this.selectVariant === 'multiple')) {
+            const itemContent = item.querySelector('.ActionListContent');
+            const ariaChecked = itemContent.getAttribute('aria-checked') === 'true';
+            if (!ariaChecked) {
+                __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleItemActivated).call(this, itemContent);
+            }
+        }
+    }
+    uncheckItem(item) {
+        if (item && (this.selectVariant === 'single' || this.selectVariant === 'multiple')) {
+            const itemContent = item.querySelector('.ActionListContent');
+            const ariaChecked = itemContent.getAttribute('aria-checked') === 'true';
+            if (ariaChecked) {
+                __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleItemActivated).call(this, itemContent);
+            }
+        }
+    }
 };
-_ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalLabel = new WeakMap(), _ActionMenuElement_inputName = new WeakMap(), _ActionMenuElement_invokerBeingClicked = new WeakMap(), _ActionMenuElement_instances = new WeakSet(), _ActionMenuElement_softDisableItems = function _ActionMenuElement_softDisableItems() {
+_ActionMenuElement_abortController = new WeakMap();
+_ActionMenuElement_originalLabel = new WeakMap();
+_ActionMenuElement_inputName = new WeakMap();
+_ActionMenuElement_invokerBeingClicked = new WeakMap();
+_ActionMenuElement_instances = new WeakSet();
+_ActionMenuElement_softDisableItems = function _ActionMenuElement_softDisableItems() {
     const { signal } = __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f");
-    for (const item of __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_items_get)) {
+    for (const item of this.querySelectorAll(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 });
     }
-}, _ActionMenuElement_potentiallyDisallowActivation = function _ActionMenuElement_potentiallyDisallowActivation(event) {
+};
+_ActionMenuElement_potentiallyDisallowActivation = function _ActionMenuElement_potentiallyDisallowActivation(event) {
     if (!__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivation).call(this, event))
-        return;
+        return false;
     const item = event.target.closest(menuItemSelectors.join(','));
     if (!item)
-        return;
+        return false;
     if (item.getAttribute('aria-disabled')) {
         event.preventDefault();
         event.stopPropagation();
         event.stopImmediatePropagation();
+        return true;
     }
-}, _ActionMenuElement_isKeyboardActivation = function _ActionMenuElement_isKeyboardActivation(event) {
+    return false;
+};
+_ActionMenuElement_isKeyboardActivation = function _ActionMenuElement_isKeyboardActivation(event) {
     return __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivationViaEnter).call(this, event) || __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivationViaSpace).call(this, event);
-}, _ActionMenuElement_isKeyboardActivationViaEnter = function _ActionMenuElement_isKeyboardActivationViaEnter(event) {
+};
+_ActionMenuElement_isKeyboardActivationViaEnter = function _ActionMenuElement_isKeyboardActivationViaEnter(event) {
     return (event instanceof KeyboardEvent &&
         event.type === 'keydown' &&
         !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
         event.key === 'Enter');
-}, _ActionMenuElement_isKeyboardActivationViaSpace = function _ActionMenuElement_isKeyboardActivationViaSpace(event) {
+};
+_ActionMenuElement_isKeyboardActivationViaSpace = function _ActionMenuElement_isKeyboardActivationViaSpace(event) {
     return (event instanceof KeyboardEvent &&
         event.type === 'keydown' &&
         !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
         event.key === ' ');
-}, _ActionMenuElement_isMouseActivation = function _ActionMenuElement_isMouseActivation(event) {
+};
+_ActionMenuElement_isMouseActivation = function _ActionMenuElement_isMouseActivation(event) {
     return event instanceof MouseEvent && event.type === 'click';
-}, _ActionMenuElement_isActivation = function _ActionMenuElement_isActivation(event) {
+};
+_ActionMenuElement_isActivation = function _ActionMenuElement_isActivation(event) {
     return __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isMouseActivation).call(this, event) || __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivation).call(this, event);
-}, _ActionMenuElement_handleInvokerActivated = function _ActionMenuElement_handleInvokerActivated(event) {
+};
+_ActionMenuElement_handleInvokerActivated = function _ActionMenuElement_handleInvokerActivated(event) {
     var _a;
     event.preventDefault();
     event.stopPropagation();
@@ -212,7 +298,8 @@ _ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalL
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_show).call(this);
         (_a = __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)) === null || _a === void 0 ? void 0 : _a.focus();
     }
-}, _ActionMenuElement_handleDialogItemActivated = function _ActionMenuElement_handleDialogItemActivated(event, dialog) {
+};
+_ActionMenuElement_handleDialogItemActivated = function _ActionMenuElement_handleDialogItemActivated(event, dialog) {
     this.querySelector('.ActionListWrap').style.display = 'none';
     const dialog_controller = new AbortController();
     const { signal } = dialog_controller;
@@ -225,7 +312,8 @@ _ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalL
     };
     dialog.addEventListener('close', handleDialogClose, { signal });
     dialog.addEventListener('cancel', handleDialogClose, { signal });
-}, _ActionMenuElement_handleItemActivated = function _ActionMenuElement_handleItemActivated(event, item) {
+};
+_ActionMenuElement_handleItemActivated = function _ActionMenuElement_handleItemActivated(item) {
     // Hide popover after current event loop to prevent changes in focus from
     // altering the target of the event. Not doing this specifically affects
     // <a> tags. It causes the event to be sent to the currently focused element
@@ -262,7 +350,11 @@ _ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalL
         item.setAttribute('aria-checked', `${checked}`);
     }
     __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
-}, _ActionMenuElement_activateItem = function _ActionMenuElement_activateItem(event, item) {
+    this.dispatchEvent(new CustomEvent('itemActivated', {
+        detail: { item: item.parentElement, checked: this.isItemChecked(item.parentElement) },
+    }));
+};
+_ActionMenuElement_activateItem = function _ActionMenuElement_activateItem(event, item) {
     const eventWillActivateByDefault = (event instanceof MouseEvent && event.type === 'click') ||
         (event instanceof KeyboardEvent &&
             event.type === 'keydown' &&
@@ -277,22 +369,28 @@ _ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalL
     event.stopPropagation();
     const elem = item;
     elem.click();
-}, _ActionMenuElement_handleIncludeFragmentReplaced = function _ActionMenuElement_handleIncludeFragmentReplaced() {
+};
+_ActionMenuElement_handleIncludeFragmentReplaced = function _ActionMenuElement_handleIncludeFragmentReplaced() {
     if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get))
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get).focus();
     __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_softDisableItems).call(this);
-}, _ActionMenuElement_handleFocusOut = function _ActionMenuElement_handleFocusOut() {
+};
+_ActionMenuElement_handleFocusOut = function _ActionMenuElement_handleFocusOut() {
     __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_hide).call(this);
-}, _ActionMenuElement_show = function _ActionMenuElement_show() {
+};
+_ActionMenuElement_show = function _ActionMenuElement_show() {
     var _a;
     (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.showPopover();
-}, _ActionMenuElement_hide = function _ActionMenuElement_hide() {
+};
+_ActionMenuElement_hide = function _ActionMenuElement_hide() {
     var _a;
     (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.hidePopover();
-}, _ActionMenuElement_isOpen = function _ActionMenuElement_isOpen() {
+};
+_ActionMenuElement_isOpen = function _ActionMenuElement_isOpen() {
     var _a;
     return (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.matches(':popover-open');
-}, _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
+};
+_ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
     if (!this.dynamicLabel)
         return;
     const invokerLabel = this.invokerLabel;
@@ -311,7 +409,8 @@ _ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalL
     else {
         invokerLabel.textContent = __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f");
     }
-}, _ActionMenuElement_updateInput = function _ActionMenuElement_updateInput() {
+};
+_ActionMenuElement_updateInput = function _ActionMenuElement_updateInput() {
     if (this.selectVariant === 'single') {
         const input = this.querySelector(`[data-list-inputs=true] input`);
         if (!input)
@@ -347,10 +446,9 @@ _ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalL
             input.remove();
         }
     }
-}, _ActionMenuElement_firstItem_get = function _ActionMenuElement_firstItem_get() {
+};
+_ActionMenuElement_firstItem_get = function _ActionMenuElement_firstItem_get() {
     return this.querySelector(menuItemSelectors.join(','));
-}, _ActionMenuElement_items_get = function _ActionMenuElement_items_get() {
-    return Array.from(this.querySelectorAll(menuItemSelectors.join(',')));
 };
 __decorate([
     target

data/app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -12,6 +12,17 @@ type SelectedItem = {
 const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]']
 const menuItemSelectors = validSelectors.map(selector => `:not([hidden]) > ${selector}`)
 
+export type ItemActivatedEvent = {
+  item: Element
+  checked: boolean
+}
+
+declare global {
+  interface HTMLElementEventMap {
+    itemActivated: CustomEvent<ItemActivatedEvent>
+  }
+}
+
 @controller
 export class ActionMenuElement extends HTMLElement {
   @target
@@ -82,7 +93,7 @@ export class ActionMenuElement extends HTMLElement {
       results.push({
         label: labelEl?.textContent,
         value: selectedItem?.getAttribute('data-value'),
-        element: selectedItem
+        element: selectedItem,
       })
     }
 
@@ -102,35 +113,39 @@ export class ActionMenuElement extends HTMLElement {
 
     if (this.includeFragment) {
       this.includeFragment.addEventListener('include-fragment-replaced', this, {
-        signal
+        signal,
       })
     }
   }
 
+  disconnectedCallback() {
+    this.#abortController.abort()
+  }
+
   #softDisableItems() {
     const {signal} = this.#abortController
 
-    for (const item of this.#items) {
+    for (const item of this.querySelectorAll(validSelectors.join(','))) {
       item.addEventListener('click', this.#potentiallyDisallowActivation.bind(this), {signal})
       item.addEventListener('keydown', this.#potentiallyDisallowActivation.bind(this), {signal})
     }
   }
 
-  #potentiallyDisallowActivation(event: Event) {
-    if (!this.#isActivation(event)) return
+  // returns true if activation was prevented
+  #potentiallyDisallowActivation(event: Event): boolean {
+    if (!this.#isActivation(event)) return false
 
     const item = (event.target as HTMLElement).closest(menuItemSelectors.join(','))
-    if (!item) return
+    if (!item) return false
 
     if (item.getAttribute('aria-disabled')) {
       event.preventDefault()
       event.stopPropagation()
       event.stopImmediatePropagation()
+      return true
     }
-  }
 
-  disconnectedCallback() {
-    this.#abortController.abort()
+    return false
   }
 
   #isKeyboardActivation(event: Event): boolean {
@@ -202,6 +217,8 @@ export class ActionMenuElement extends HTMLElement {
     const targetIsItem = item !== null
 
     if (targetIsItem && eventIsActivation) {
+      if (this.#potentiallyDisallowActivation(event)) return
+
       const dialogInvoker = item.closest('[data-show-dialog-id]')
 
       if (dialogInvoker) {
@@ -214,7 +231,7 @@ export class ActionMenuElement extends HTMLElement {
       }
 
       this.#activateItem(event, item)
-      this.#handleItemActivated(event, item)
+      this.#handleItemActivated(item)
 
       // Pressing the space key on a button or link will cause the page to scroll unless preventDefault()
       // is called. While calling preventDefault() appears to have no effect on link navigation, it skips
@@ -263,7 +280,7 @@ export class ActionMenuElement extends HTMLElement {
     dialog.addEventListener('cancel', handleDialogClose, {signal})
   }
 
-  #handleItemActivated(event: Event, item: Element) {
+  #handleItemActivated(item: Element) {
     // Hide popover after current event loop to prevent changes in focus from
     // altering the target of the event. Not doing this specifically affects
     // <a> tags. It causes the event to be sent to the currently focused element
@@ -304,6 +321,11 @@ export class ActionMenuElement extends HTMLElement {
     }
 
     this.#updateInput()
+    this.dispatchEvent(
+      new CustomEvent('itemActivated', {
+        detail: {item: item.parentElement, checked: this.isItemChecked(item.parentElement)},
+      }),
+    )
   }
 
   #activateItem(event: Event, item: Element) {
@@ -410,9 +432,85 @@ export class ActionMenuElement extends HTMLElement {
     return this.querySelector(menuItemSelectors.join(','))
   }
 
-  get #items(): HTMLElement[] {
+  get items(): HTMLElement[] {
     return Array.from(this.querySelectorAll(menuItemSelectors.join(',')))
   }
+
+  getItemById(itemId: string): HTMLElement | null {
+    return this.querySelector(`li[data-item-id="${itemId}"`)
+  }
+
+  isItemDisabled(item: Element | null): boolean {
+    if (item) {
+      return item.classList.contains('ActionListItem--disabled')
+    } else {
+      return false
+    }
+  }
+
+  disableItem(item: Element | null) {
+    if (item) {
+      item.classList.add('ActionListItem--disabled')
+      item.querySelector('.ActionListContent')!.setAttribute('aria-disabled', 'true')
+    }
+  }
+
+  enableItem(item: Element | null) {
+    if (item) {
+      item.classList.remove('ActionListItem--disabled')
+      item.querySelector('.ActionListContent')!.removeAttribute('aria-disabled')
+    }
+  }
+
+  isItemHidden(item: Element | null): boolean {
+    if (item) {
+      return item.hasAttribute('hidden')
+    } else {
+      return false
+    }
+  }
+
+  hideItem(item: Element | null) {
+    if (item) {
+      item.setAttribute('hidden', 'hidden')
+    }
+  }
+
+  showItem(item: Element | null) {
+    if (item) {
+      item.removeAttribute('hidden')
+    }
+  }
+
+  isItemChecked(item: Element | null) {
+    if (item) {
+      return item.querySelector('.ActionListContent')!.getAttribute('aria-checked') === 'true'
+    } else {
+      return false
+    }
+  }
+
+  checkItem(item: Element | null) {
+    if (item && (this.selectVariant === 'single' || this.selectVariant === 'multiple')) {
+      const itemContent = item.querySelector('.ActionListContent')!
+      const ariaChecked = itemContent.getAttribute('aria-checked') === 'true'
+
+      if (!ariaChecked) {
+        this.#handleItemActivated(itemContent)
+      }
+    }
+  }
+
+  uncheckItem(item: Element | null) {
+    if (item && (this.selectVariant === 'single' || this.selectVariant === 'multiple')) {
+      const itemContent = item.querySelector('.ActionListContent')!
+      const ariaChecked = itemContent.getAttribute('aria-checked') === 'true'
+
+      if (ariaChecked) {
+        this.#handleItemActivated(itemContent)
+      }
+    }
+  }
 }
 
 if (!window.customElements.get('action-menu')) {

data/app/components/primer/alpha/action_menu/group.rb

@@ -0,0 +1,23 @@
+# typed: true
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class ActionMenu
+      # This component is part of <%= link_to_component(Primer::Alpha::ActionMenu) %> and should not be
+      # used as a standalone component.
+      class Group < Primer::Alpha::ActionList
+        # Heading text rendered above the list of items.
+        #
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionMenu::Heading) %>.
+        def with_heading(**system_arguments, &block)
+          super(component_klass: Primer::Alpha::ActionMenu::Heading, **system_arguments, &block)
+        end
+
+        def with_divider
+          raise "ActionMenu groups cannot have dividers"
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/action_menu/heading.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class ActionMenu
+      # Heading used to describe groups within an action menu.
+      class Heading < Primer::Alpha::ActionList::Heading
+        def initialize(**)
+          super
+
+          # Headings don't make sense in a menu context, so use div instead
+          @tag = :div
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/action_menu/list.html.erb

@@ -0,0 +1 @@
+<%= render(@list) %>