@primer/view-components - npm Package Compare versions

Comparing version 0.0.0-20240621163946 to 0.0.0-20240621164028

app/assets/javascripts/lib/primer/forms/primer_text_field.d.ts

 import '@github/auto-check-element';
-import type { AutoCheckErrorEvent, AutoCheckSuccessEvent } from '@github/auto-check-element';
-declare global {
-    interface HTMLElementEventMap {
-        'auto-check-success': AutoCheckSuccessEvent;
-        'auto-check-error': AutoCheckErrorEvent;
-    }
-}
-export declare class PrimerTextFieldElement extends HTMLElement {
-    #private;
-    inputElement: HTMLInputElement;
-    validationElement: HTMLElement;
-    validationMessageElement: HTMLElement;
-    validationSuccessIcon: HTMLElement;
-    validationErrorIcon: HTMLElement;
-    leadingVisual: HTMLElement;
-    leadingSpinner: HTMLElement;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    clearContents(): void;
-    clearError(): void;
-    setValidationMessage(message: string): void;
-    toggleValidationStyling(isError: boolean): void;
-    setSuccess(message: string): void;
-    setError(message: string): void;
-    showLeadingSpinner(): void;
-    hideLeadingSpinner(): void;
-}

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

@@ -18,3 +18,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-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';
@@ -156,9 +156,14 @@ import '@oddbird/popover-polyfill';
             }
-            // 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;
@@ -269,14 +274,22 @@ }
 };
-_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);
 };
@@ -356,2 +369,19 @@ _ActionMenuElement_handleInvokerActivated = function _ActionMenuElement_handleInvokerActivated(event) {
 };
+_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() {
@@ -358,0 +388,0 @@ if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get))

app/components/primer/alpha/tab_nav.css.json

@@ -6,2 +6,3 @@ {
     ".tabnav-tabs",
+    ".tabnav::part(tablist-wrapper)",
     ".tabnav-tab",
@@ -20,2 +21,3 @@ ".tabnav-tab.selected",
     ".tabnav-tab .Counter",
+    "tab-container .tabnav-tab",
     ".tabnav-extra",
@@ -22,0 +24,0 @@ ".tabnav-extra>.octicon",

app/components/primer/alpha/underline_nav.css.json

@@ -7,3 +7,5 @@ {
     ".UnderlineNav .Counter--primary",
+    ".UnderlineNav::part(tablist-wrapper)",
     ".UnderlineNav-body",
+    ".UnderlineNav::part(tablist)",
     ".UnderlineNav-item",
@@ -10,0 +12,0 @@ ".UnderlineNav-item:focus",

lib/primer/forms/primer_text_field.d.ts

 import '@github/auto-check-element';
-import type { AutoCheckErrorEvent, AutoCheckSuccessEvent } from '@github/auto-check-element';
-declare global {
-    interface HTMLElementEventMap {
-        'auto-check-success': AutoCheckSuccessEvent;
-        'auto-check-error': AutoCheckErrorEvent;
-    }
-}
-export declare class PrimerTextFieldElement extends HTMLElement {
-    #private;
-    inputElement: HTMLInputElement;
-    validationElement: HTMLElement;
-    validationMessageElement: HTMLElement;
-    validationSuccessIcon: HTMLElement;
-    validationErrorIcon: HTMLElement;
-    leadingVisual: HTMLElement;
-    leadingSpinner: HTMLElement;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    clearContents(): void;
-    clearError(): void;
-    setValidationMessage(message: string): void;
-    toggleValidationStyling(isError: boolean): void;
-    setSuccess(message: string): void;
-    setError(message: string): void;
-    showLeadingSpinner(): void;
-    hideLeadingSpinner(): void;
-}

lib/primer/forms/primer_text_field.js

@@ -1,2 +0,1 @@
-/* eslint-disable custom-elements/expose-class-on-global */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -22,3 +21,6 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 import { controller, target } from '@github/catalyst';
-let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
+// eslint-disable-next-line custom-elements/expose-class-on-global
+let PrimerTextFieldElement = 
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+class PrimerTextFieldElement extends HTMLElement {
     constructor() {
@@ -85,10 +87,2 @@ super(...arguments);
     }
-    showLeadingSpinner() {
-        this.leadingSpinner?.removeAttribute('hidden');
-        this.leadingVisual?.setAttribute('hidden', '');
-    }
-    hideLeadingSpinner() {
-        this.leadingSpinner?.setAttribute('hidden', '');
-        this.leadingVisual?.removeAttribute('hidden');
-    }
 };
@@ -111,11 +105,5 @@ _PrimerTextFieldElement_abortController = new WeakMap();
 ], PrimerTextFieldElement.prototype, "validationErrorIcon", void 0);
-__decorate([
-    target
-], PrimerTextFieldElement.prototype, "leadingVisual", void 0);
-__decorate([
-    target
-], PrimerTextFieldElement.prototype, "leadingSpinner", void 0);
 PrimerTextFieldElement = __decorate([
     controller
+    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
 ], PrimerTextFieldElement);
-export { PrimerTextFieldElement };

package.json

 {
   "name": "@primer/view-components",
-  "version": "0.0.0-20240621163946",
+  "version": "0.0.0-20240621164028",
   "description": "ViewComponents for the Primer Design System",
@@ -53,3 +53,3 @@ "main": "app/assets/javascripts/primer_view_components.js",
     "@github/relative-time-element": "^4.0.0",
-    "@github/tab-container-element": "^3.1.2",
+    "@github/tab-container-element": "^4.5.0",
     "@oddbird/popover-polyfill": "^0.4.0",
@@ -71,4 +71,4 @@ "@primer/behaviors": "^1.3.4"
     "@rollup/plugin-typescript": "^8.3.3",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
     "axe-core": "^4.7.1",
@@ -79,3 +79,3 @@ "chokidar-cli": "^3.0.0",
     "eslint-plugin-custom-elements": "^0.0.8",
-    "eslint-plugin-github": "^5.0.1",
+    "eslint-plugin-github": "^4.9.2",
     "eslint-plugin-prettier": "^5.0.0",
@@ -90,3 +90,3 @@ "markdownlint-cli2": "^0.13.0",
     "postcss-preset-env": "^9.3.0",
-    "prettier": "^3.3.2",
+    "prettier": "3.3.0",
     "rollup": "^2.79.1",
@@ -93,0 +93,0 @@ "rollup-plugin-terser": "^7.0.2",

static/constants.json

@@ -1223,3 +1223,2 @@ {
     "DEFAULT_SIZE": "medium",
-    "DEFAULT_SR_TEXT": "Loading",
     "DEFAULT_STYLE": "box-sizing: content-box; color: var(--color-icon-primary);",
@@ -1226,0 +1225,0 @@ "SIZE_MAPPINGS": {

No alert changes

Improved metrics

Total package byte prevSize

2145345

increased by1.65%

Number of package files

157

increased by1.29%

Worsened metrics

Lines of code

35653

decreased by-0.04%

Dependency changes

• + Added@github/tab-container-element@4.8.2(transitive)

• - Removed@github/tab-container-element@3.4.0(transitive)

• Updated@github/tab-container-element@^4.5.0