@primer/view-components 0.26.0-rc.4b9be17c → 0.26.0-rc.5a8994c8

package/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_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, _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"]'];
@@ -152,13 +152,18 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
                     return;
                 }
             }
-            // Pressing the space key on a link will cause the page to scroll unless preventDefault() is called.
-            // We then click it manually to navigate.
-            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isAnchorActivationViaSpace).call(this, event)) {
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_activateItem).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
+            // activated by the space key, and manually submits the form if the button is a submit button.
+            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivationViaSpace).call(this, event)) {
                 event.preventDefault();
-                item.click();
+                if (item.getAttribute('type') === 'submit') {
+                    item.closest('form')?.submit();
+                }
             }
-            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleItemActivated).call(this, item);
             return;
         }
         if (event.type === 'include-fragment-replaced') {
@@ -264,18 +269,26 @@ _ActionMenuElement_potentiallyDisallowActivation = function _ActionMenuElement_p
     }
     return false;
 };
-_ActionMenuElement_isAnchorActivationViaSpace = function _ActionMenuElement_isAnchorActivationViaSpace(event) {
-    return (event.target instanceof HTMLAnchorElement &&
-        event instanceof KeyboardEvent &&
+_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) {
+    return (event instanceof KeyboardEvent &&
+        event.type === 'keydown' &&
+        !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+        event.key === 'Enter');
+};
+_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) {
+    return event instanceof MouseEvent && event.type === 'click';
+};
 _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 __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) {
     event.preventDefault();
@@ -350,6 +363,23 @@ _ActionMenuElement_handleItemActivated = function _ActionMenuElement_handleItemA
         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' &&
+            !(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
+    /* eslint-disable-next-line no-restricted-syntax */
+    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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.26.0-rc.4b9be17c",
+  "version": "0.26.0-rc.5a8994c8",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -84,7 +84,7 @@
     "postcss-import": "^16.0.0",
     "postcss-mixins": "^10.0.0",
     "postcss-preset-env": "^9.3.0",
-    "prettier": "3.3.1",
+    "prettier": "3.3.0",
     "rollup": "^2.79.1",
     "rollup-plugin-terser": "^7.0.2",
     "stylelint": "^16.1.0",