primer_view_components 0.10.0 → 0.11.0

data/app/components/primer/alpha/action_bar/item.rb

@@ -7,14 +7,17 @@ module Primer
     class ActionBar
       # ActionBar::Item is an internal component that wraps the items in a div with the `ActionBar-item` class.
       class Item < Primer::Component
-        def initialize(item_content)
+        # @param item_content [String] The content to render inside the item.
+        # @param item_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(item_content, **item_arguments)
           @system_arguments = {
-            tag: :div,
+            tag: item_arguments[:tag] || :div,
             data: {
               targets: "action-bar.items"
-            },
-            classes: "ActionBar-item"
+            }.merge(item_arguments[:data] || {}),
+            classes: class_names("ActionBar-item", item_arguments[:classes])
           }
+
           @item_content = item_content
         end
 

data/app/components/primer/alpha/action_bar.rb

@@ -16,14 +16,14 @@ module Primer
       SIZE_OPTIONS = SIZE_MAPPINGS.keys.freeze
 
       renders_many :items, types: {
-        icon_button: lambda { |icon:, label:, **system_arguments|
+        icon_button: lambda { |icon:, label:, item_arguments: {}, **system_arguments|
           item_id = self.class.generate_id
 
           with_menu_item(id: item_id, label: label) do |c|
             c.with_leading_visual_icon(icon: icon)
           end
 
-          Item.new(Primer::Beta::IconButton.new(id: item_id, icon: icon, "aria-label": label, size: @size, scheme: :invisible, **system_arguments))
+          Item.new(Primer::Beta::IconButton.new(id: item_id, icon: icon, "aria-label": label, size: @size, scheme: :invisible, **system_arguments), **item_arguments)
         },
         divider: lambda {
           @action_menu.with_divider(hidden: true) if @overflow_menu

data/app/components/primer/alpha/action_bar_element.js

@@ -90,11 +90,11 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
         if (__classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f")) {
             __classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f").abort();
         }
-        __classPrivateFieldSet(this, _ActionBarElement_focusZoneAbortController, focusZone(this.itemContainer, {
+        __classPrivateFieldSet(this, _ActionBarElement_focusZoneAbortController, focusZone(this, {
             bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
             focusOutBehavior: 'wrap',
             focusableElementFilter: element => {
-                return !element.closest('.ActionBar-item[hidden]');
+                return !element.closest('.ActionBar-item[hidden]') && !element.closest('li.ActionListItem');
             }
         }), "f");
     }

data/app/components/primer/alpha/action_bar_element.ts

@@ -82,11 +82,11 @@ class ActionBarElement extends HTMLElement {
     if (this.#focusZoneAbortController) {
       this.#focusZoneAbortController.abort()
     }
-    this.#focusZoneAbortController = focusZone(this.itemContainer, {
+    this.#focusZoneAbortController = focusZone(this, {
       bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
       focusOutBehavior: 'wrap',
       focusableElementFilter: element => {
-        return !element.closest('.ActionBar-item[hidden]')
+        return !element.closest('.ActionBar-item[hidden]') && !element.closest('li.ActionListItem')
       }
     })
   }

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_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_isActivationKeydown, _ActionMenuElement_firstItem_get;
+var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_invokerBeingClicked, _ActionMenuElement_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation, _ActionMenuElement_isKeyboardActivation, _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;
 import { controller, target } from '@github/catalyst';
 import '@oddbird/popover-polyfill';
 const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
@@ -27,6 +27,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         _ActionMenuElement_abortController.set(this, void 0);
         _ActionMenuElement_originalLabel.set(this, '');
         _ActionMenuElement_inputName.set(this, '');
+        _ActionMenuElement_invokerBeingClicked.set(this, false);
     }
     get selectVariant() {
         return this.getAttribute('data-select-variant');
@@ -94,8 +95,10 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         this.addEventListener('click', this, { signal });
         this.addEventListener('mouseover', this, { signal });
         this.addEventListener('focusout', this, { signal });
+        this.addEventListener('mousedown', this, { signal });
         __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);
         if (this.includeFragment) {
             this.includeFragment.addEventListener('include-fragment-replaced', this, {
                 signal
@@ -106,98 +109,182 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
     }
     handleEvent(event) {
-        var _a, _b, _c, _d, _e;
-        const activation = __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivationKeydown).call(this, event);
-        if (event.target === this.invokerElement && activation) {
-            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)) {
-                event.preventDefault();
-                (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.showPopover();
-                __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get).focus();
-                return;
-            }
+        var _a, _b, _c;
+        const targetIsInvoker = (_a = this.invokerElement) === null || _a === void 0 ? void 0 : _a.contains(event.target);
+        const eventIsActivation = __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivation).call(this, event);
+        if (targetIsInvoker && event.type === 'mousedown') {
+            __classPrivateFieldSet(this, _ActionMenuElement_invokerBeingClicked, true, "f");
+            return;
         }
-        // Ignore events within dialogs within menus
-        if (((_b = event.target) === null || _b === void 0 ? void 0 : _b.closest('dialog')) || ((_c = event.target) === null || _c === void 0 ? void 0 : _c.closest('modal-dialog'))) {
+        // Prevent safari bug that dismisses menu on mousedown instead of allowing
+        // the click event to propagate to the button
+        if (event.type === 'mousedown') {
+            event.preventDefault();
             return;
         }
-        // If a dialog has been rendered within the menu, we do not want to hide
-        // the entire menu, as that will also hide the Dialog. Instead we want to
-        // show the Dialog while hiding just the visible part of the menu.
-        if ((activation || event.type === 'click') && ((_d = event.target) === null || _d === void 0 ? void 0 : _d.closest('[data-show-dialog-id]'))) {
-            const dialogInvoker = event.target.closest('[data-show-dialog-id]');
-            const dialog = this.ownerDocument.getElementById((dialogInvoker === null || dialogInvoker === void 0 ? void 0 : dialogInvoker.getAttribute('data-show-dialog-id')) || '');
-            if (dialogInvoker && dialog && this.contains(dialogInvoker) && this.contains(dialog)) {
-                this.querySelector('.ActionListWrap').style.display = 'none';
-                const dialog_controller = new AbortController();
-                const { signal } = dialog_controller;
-                const handleDialogClose = () => {
-                    var _a, _b;
-                    dialog_controller.abort();
-                    this.querySelector('.ActionListWrap').style.display = '';
-                    if ((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.matches(':popover-open')) {
-                        (_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.hidePopover();
-                    }
-                };
-                dialog.addEventListener('close', handleDialogClose, { signal });
-                dialog.addEventListener('cancel', handleDialogClose, { signal });
-                return;
-            }
+        if (targetIsInvoker && eventIsActivation) {
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleInvokerActivated).call(this, event);
+            __classPrivateFieldSet(this, _ActionMenuElement_invokerBeingClicked, false, "f");
+            return;
         }
-        if (!((_e = this.popoverElement) === null || _e === void 0 ? void 0 : _e.matches(':popover-open')))
+        // Ignore events within dialogs within menus
+        if (((_b = event.target) === null || _b === void 0 ? void 0 : _b.closest('dialog')) || ((_c = event.target) === null || _c === void 0 ? void 0 : _c.closest('modal-dialog'))) {
             return;
-        if (event.type === 'include-fragment-replaced') {
-            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get))
-                __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get).focus();
         }
-        else if (activation || (event instanceof MouseEvent && event.type === 'click')) {
-            // 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
-            // instead of the anchor, which effectively prevents navigation, i.e. it
-            // appears as if hitting enter does nothing. Curiously, clicking instead
-            // works fine.
-            if (this.selectVariant !== 'multiple') {
-                setTimeout(() => {
-                    var _a, _b;
-                    if ((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.matches(':popover-open')) {
-                        (_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.hidePopover();
-                    }
-                });
-            }
-            // The rest of the code below deals with single/multiple selection behavior, and should not
-            // interfere with events fired by menu items whose behavior is specified outside the library.
-            if (this.selectVariant !== 'multiple' && this.selectVariant !== 'single')
-                return;
-            const item = event.target.closest(menuItemSelectors.join(','));
-            if (!item)
+        if (event.type === 'focusout') {
+            if (__classPrivateFieldGet(this, _ActionMenuElement_invokerBeingClicked, "f"))
                 return;
-            const ariaChecked = item.getAttribute('aria-checked');
-            const checked = ariaChecked !== 'true';
-            if (this.selectVariant === 'single') {
-                // Only check, never uncheck here. Single-select mode does not allow unchecking a checked item.
-                if (checked) {
-                    item.setAttribute('aria-checked', 'true');
+            // Give the browser time to focus the next element
+            requestAnimationFrame(() => {
+                if (!this.contains(document.activeElement) || document.activeElement === this.invokerElement) {
+                    __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleFocusOut).call(this);
                 }
-                for (const checkedItem of this.querySelectorAll('[aria-checked]')) {
-                    if (checkedItem !== item) {
-                        checkedItem.setAttribute('aria-checked', 'false');
-                    }
+            });
+            return;
+        }
+        const item = event.target.closest(menuItemSelectors.join(','));
+        const targetIsItem = item !== null;
+        if (targetIsItem && eventIsActivation) {
+            const dialogInvoker = item.closest('[data-show-dialog-id]');
+            if (dialogInvoker) {
+                const dialog = this.ownerDocument.getElementById(dialogInvoker.getAttribute('data-show-dialog-id') || '');
+                if (dialog && this.contains(dialogInvoker) && this.contains(dialog)) {
+                    __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleDialogItemActivated).call(this, event, dialog);
+                    return;
                 }
-                __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
             }
-            else {
-                // multi-select mode allows unchecking a checked item
-                item.setAttribute('aria-checked', `${checked}`);
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_activateItem).call(this, event, item);
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleItemActivated).call(this, event, item);
+            return;
+        }
+        if (event.type === 'include-fragment-replaced') {
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleIncludeFragmentReplaced).call(this);
+        }
+    }
+};
+_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)) {
+        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) {
+    if (!__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivation).call(this, event))
+        return;
+    const item = event.target.closest(menuItemSelectors.join(','));
+    if (!item)
+        return;
+    if (item.getAttribute('aria-disabled')) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+    }
+}, _ActionMenuElement_isKeyboardActivation = function _ActionMenuElement_isKeyboardActivation(event) {
+    return (event instanceof KeyboardEvent &&
+        event.type === 'keydown' &&
+        !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+        (event.key === 'Enter' || event.key === ' '));
+}, _ActionMenuElement_isMouseActivation = function _ActionMenuElement_isMouseActivation(event) {
+    return event instanceof MouseEvent && event.type === 'click';
+}, _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) {
+    var _a;
+    event.preventDefault();
+    event.stopPropagation();
+    if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isOpen).call(this)) {
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_hide).call(this);
+    }
+    else {
+        __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) {
+    this.querySelector('.ActionListWrap').style.display = 'none';
+    const dialog_controller = new AbortController();
+    const { signal } = dialog_controller;
+    const handleDialogClose = () => {
+        dialog_controller.abort();
+        this.querySelector('.ActionListWrap').style.display = '';
+        if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isOpen).call(this)) {
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_hide).call(this);
+        }
+    };
+    dialog.addEventListener('close', handleDialogClose, { signal });
+    dialog.addEventListener('cancel', handleDialogClose, { signal });
+}, _ActionMenuElement_handleItemActivated = function _ActionMenuElement_handleItemActivated(event, 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
+    // instead of the anchor, which effectively prevents navigation, i.e. it
+    // appears as if hitting enter does nothing. Curiously, clicking instead
+    // works fine.
+    if (this.selectVariant !== 'multiple') {
+        setTimeout(() => {
+            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isOpen).call(this)) {
+                __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_hide).call(this);
             }
-            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
-            if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
-                // prevent buttons from being clicked twice
-                event.preventDefault();
+        });
+    }
+    // The rest of the code below deals with single/multiple selection behavior, and should not
+    // interfere with events fired by menu items whose behavior is specified outside the library.
+    if (this.selectVariant !== 'multiple' && this.selectVariant !== 'single')
+        return;
+    const ariaChecked = item.getAttribute('aria-checked');
+    const checked = ariaChecked !== 'true';
+    if (this.selectVariant === 'single') {
+        // Only check, never uncheck here. Single-select mode does not allow unchecking a checked item.
+        if (checked) {
+            item.setAttribute('aria-checked', 'true');
+        }
+        for (const checkedItem of this.querySelectorAll('[aria-checked]')) {
+            if (checkedItem !== item) {
+                checkedItem.setAttribute('aria-checked', 'false');
             }
         }
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
     }
-};
-_ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalLabel = new WeakMap(), _ActionMenuElement_inputName = new WeakMap(), _ActionMenuElement_instances = new WeakSet(), _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
+    else {
+        // multi-select mode allows unchecking a checked item
+        item.setAttribute('aria-checked', `${checked}`);
+    }
+    __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
+    if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
+        // prevent buttons from being clicked twice
+        event.preventDefault();
+        return;
+    }
+}, _ActionMenuElement_activateItem = function _ActionMenuElement_activateItem(event, item) {
+    const eventWillActivateByDefault = (event instanceof MouseEvent && event.type === 'click') ||
+        (event instanceof KeyboardEvent &&
+            event.type === 'keydown' &&
+            !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+            event.key === 'Enter');
+    // if the event will result in activating the current item by default, i.e. is a
+    // mouse click or keyboard enter, bail out
+    if (eventWillActivateByDefault)
+        return;
+    // otherwise, event will not result in activation by default, so we stop it and
+    // simulate a click
+    event.stopPropagation();
+    const elem = item;
+    elem.click();
+}, _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() {
+    __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_hide).call(this);
+}, _ActionMenuElement_show = function _ActionMenuElement_show() {
+    var _a;
+    (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.showPopover();
+}, _ActionMenuElement_hide = function _ActionMenuElement_hide() {
+    var _a;
+    (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.hidePopover();
+}, _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() {
     if (!this.dynamicLabel)
         return;
     const invokerLabel = this.invokerLabel;
@@ -252,13 +339,10 @@ _ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalL
             input.remove();
         }
     }
-}, _ActionMenuElement_isActivationKeydown = function _ActionMenuElement_isActivationKeydown(event) {
-    return (event instanceof KeyboardEvent &&
-        event.type === 'keydown' &&
-        !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
-        (event.key === 'Enter' || event.key === ' '));
 }, _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