@primer/view-components 0.15.0-rc.2eb37d37 → 0.15.0-rc.4cde6a2d

package/app/components/primer/alpha/action_menu/action_menu_element.d.ts

@@ -6,6 +6,15 @@ type SelectedItem = {
     value: string | null | undefined;
     element: Element;
 };
+export type ItemActivatedEvent = {
+    item: Element;
+    checked: boolean;
+};
+declare global {
+    interface HTMLElementEventMap {
+        itemActivated: CustomEvent<ItemActivatedEvent>;
+    }
+}
 export declare class ActionMenuElement extends HTMLElement {
     #private;
     includeFragment: IncludeFragmentElement;
@@ -22,6 +31,17 @@ export declare class ActionMenuElement extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     handleEvent(event: Event): void;
+    get items(): HTMLElement[];
+    getItemById(itemId: string): HTMLElement | null;
+    isItemDisabled(item: Element | null): boolean;
+    disableItem(item: Element | null): void;
+    enableItem(item: Element | null): void;
+    isItemHidden(item: Element | null): boolean;
+    hideItem(item: Element | null): void;
+    showItem(item: Element | null): void;
+    isItemChecked(item: Element | null): boolean;
+    checkItem(item: Element | null): void;
+    uncheckItem(item: Element | null): void;
 }
 declare global {
     interface Window {

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_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,6 +169,76 @@ 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();
@@ -175,22 +247,24 @@ _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) {
     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;
     }
+    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);
@@ -239,7 +313,7 @@ _ActionMenuElement_handleDialogItemActivated = function _ActionMenuElement_handl
     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
@@ -276,6 +350,9 @@ _ActionMenuElement_handleItemActivated = function _ActionMenuElement_handleItemA
         item.setAttribute('aria-checked', `${checked}`);
     }
     __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
+    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') ||
@@ -373,9 +450,6 @@ _ActionMenuElement_updateInput = function _ActionMenuElement_updateInput() {
 _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
 ], ActionMenuElement.prototype, "includeFragment", void 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.15.0-rc.2eb37d37",
+  "version": "0.15.0-rc.4cde6a2d",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -75,7 +75,7 @@
     "eslint": "^8.23.1",
     "eslint-plugin-custom-elements": "^0.0.6",
     "eslint-plugin-github": "^4.9.2",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.0.0",
     "markdownlint-cli2": "^0.10.0",
     "mocha": "^10.0.0",
     "playwright": "^1.35.1",