SWC 1.9.0 patches

packages/action-group/test/action-group.test.ts

@@ -260,7 +260,7 @@ describe('ActionGroup', () => {
         expect(el.children[3]).to.equal(document.activeElement);
     });
 
-    it.skip('action-group with action-menu manages tabIndex correctly while using mouse', async () => {
+    it('action-group with action-menu manages tabIndex correctly while using mouse', async () => {
         const el = await fixture<ActionGroup>(
             HasActionMenuAsChild({ label: 'Action Group' })
         );

packages/contextual-help/package.json

@@ -16,23 +16,23 @@
     "type": "module",
     "exports": {
         ".": {
-            "default": "./src/index.js",
-            "development": "./src/index.dev.js"
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
         },
         "./package.json": "./package.json",
         "./sp-contextual-help.js": {
-            "default": "./sp-contextual-help.js",
-            "development": "./sp-contextual-help.dev.js"
+            "development": "./sp-contextual-help.dev.js",
+            "default": "./sp-contextual-help.js"
         },
         "./src/ContextualHelp.js": {
-            "default": "./src/ContextualHelp.js",
-            "development": "./src/ContextualHelp.dev.js"
+            "development": "./src/ContextualHelp.dev.js",
+            "default": "./src/ContextualHelp.js"
         },
         "./src/contextual-help-overrides.css.js": "./src/contextual-help-overrides.css.js",
         "./src/contextual-help.css.js": "./src/contextual-help.css.js",
         "./src/index.js": {
-            "default": "./src/index.js",
-            "development": "./src/index.dev.js"
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
         }
     },
     "main": "./src/index.js",

packages/dialog/src/DialogBase.ts

@@ -24,6 +24,7 @@ import '@spectrum-web-components/underlay/sp-underlay.js';
 import '@spectrum-web-components/button/sp-button.js';
 
 // Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225
+// eslint-disable-next-line import/no-extraneous-dependencies
 import '@spectrum-web-components/dialog/sp-dialog.js';
 import modalWrapperStyles from '@spectrum-web-components/modal/src/modal-wrapper.css.js';
 import modalStyles from '@spectrum-web-components/modal/src/modal.css.js';
@@ -155,41 +156,18 @@ export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {
         this.handleTransitionEvent(event);
     }
 
-    private get hasTransitionDuration(): boolean {
-        const modal = this.shadowRoot.querySelector('.modal') as HTMLElement;
-
-        const modalTransitionDurations =
-            window.getComputedStyle(modal).transitionDuration;
-        for (const duration of modalTransitionDurations.split(','))
-            if (parseFloat(duration) > 0) return true;
-
-        const underlay = this.shadowRoot.querySelector(
-            'sp-underlay'
-        ) as HTMLElement;
-
-        if (underlay) {
-            const underlayTransitionDurations =
-                window.getComputedStyle(underlay).transitionDuration;
-            for (const duration of underlayTransitionDurations.split(','))
-                if (parseFloat(duration) > 0) return true;
-        }
-
-        return false;
-    }
-
     protected override update(changes: PropertyValues<this>): void {
         if (changes.has('open') && changes.get('open') !== undefined) {
-            const hasTransitionDuration = this.hasTransitionDuration;
             this.animating = true;
             this.transitionPromise = new Promise((res) => {
                 this.resolveTransitionPromise = () => {
                     this.animating = false;
-                    if (!this.open && hasTransitionDuration)
-                        this.dispatchClosed();
                     res();
                 };
             });
-            if (!this.open && !hasTransitionDuration) this.dispatchClosed();
+            if (!this.open) {
+                this.dispatchClosed();
+            }
         }
         super.update(changes);
     }

packages/menu/src/MenuItem.ts

@@ -195,6 +195,8 @@ export class MenuItem extends LikeAnchor(
 
     private _value = '';
 
+    private _lastPointerType?: string;
+
     /**
      * @private
      * text content of the menu item minus whitespace
@@ -457,25 +459,15 @@ export class MenuItem extends LikeAnchor(
         }
     }
 
-    private handlePointerdown(event: PointerEvent): void {
-        if (event.target === this && this.hasSubmenu && this.open) {
-            this.addEventListener('focus', this.handleSubmenuFocus, {
-                once: true,
-            });
-            this.overlayElement.addEventListener(
-                'beforetoggle',
-                this.handleBeforetoggle
-            );
-        }
-    }
-
     protected override firstUpdated(changes: PropertyValues): void {
         super.firstUpdated(changes);
         this.setAttribute('tabindex', '-1');
         this.addEventListener('keydown', this.handleKeydown);
         this.addEventListener('mouseover', this.handleMouseover);
-        this.addEventListener('pointerdown', this.handlePointerdown);
-        this.addEventListener('pointerenter', this.closeOverlaysForRoot);
+        // Register pointerenter/leave for ALL menu items (not just those with submenus)
+        // so items without submenus can close sibling submenus when hovered
+        this.addEventListener('pointerenter', this.handlePointerenter);
+        this.addEventListener('pointerleave', this.handlePointerleave);
         if (!this.hasAttribute('id')) {
             this.id = `sp-menu-item-${randomID()}`;
         }
@@ -594,11 +586,6 @@ export class MenuItem extends LikeAnchor(
         }
     };
 
-    protected closeOverlaysForRoot(): void {
-        if (this.open) return;
-        this.menuData.parentMenu?.closeDescendentOverlays();
-    }
-
     protected handleFocus(event: FocusEvent): void {
         const { target } = event;
         if (target === this) {
@@ -613,48 +600,64 @@ export class MenuItem extends LikeAnchor(
         }
     }
 
-    protected handleSubmenuClick(event: Event): void {
+    protected handleSubmenuTriggerClick(event: Event): void {
         if (event.composedPath().includes(this.overlayElement)) {
             return;
         }
-        this.openOverlay(true);
-    }
 
-    protected handleSubmenuFocus(): void {
-        requestAnimationFrame(() => {
-            // Wait till after `closeDescendentOverlays` has happened in Menu
-            // to reopen (keep open) the direct descendent of this Menu Item
-            this.overlayElement.open = this.open;
-            this.focused = false;
-        });
+        // If submenu is already open, toggle it closed
+        if (this.open && this._lastPointerType === 'touch') {
+            event.preventDefault();
+            event.stopPropagation(); // Don't let parent menu handle this
+            this.open = false;
+            return;
+        }
+
+        // All: open if closed
+        if (!this.open) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            this.openOverlay(true);
+        }
     }
 
-    protected handleBeforetoggle = (event: Event): void => {
-        if ((event as Event & { newState: string }).newState === 'closed') {
-            this.open = true;
-            this.overlayElement.manuallyKeepOpen();
-            this.overlayElement.removeEventListener(
-                'beforetoggle',
-                this.handleBeforetoggle
-            );
+    protected handlePointerenter(event: PointerEvent): void {
+        this._lastPointerType = event.pointerType; // Track pointer type
+
+        // For touch: don't handle pointerenter, let click handle it
+        if (event.pointerType === 'touch') {
+            return;
         }
-    };
 
-    protected handlePointerenter(): void {
+        // Close sibling submenus before opening this one
+        this.menuData.parentMenu?.closeDescendentOverlays();
+
         if (this.leaveTimeout) {
             clearTimeout(this.leaveTimeout);
             delete this.leaveTimeout;
             this.recentlyLeftChild = false;
             return;
         }
-        this.focus();
+
+        // Only focus items with submenus on hover (to show they're interactive)
+        // Regular items should not show focus styling on hover, only on keyboard navigation
+        if (this.hasSubmenu) {
+            this.focus();
+        }
         this.openOverlay();
     }
 
     protected leaveTimeout?: ReturnType<typeof setTimeout>;
     protected recentlyLeftChild = false;
 
-    protected handlePointerleave(): void {
+    protected handlePointerleave(event: PointerEvent): void {
+        this._lastPointerType = event.pointerType; // Update on leave too
+
+        // For touch: don't handle pointerleave, let click handle it
+        if (event.pointerType === 'touch') {
+            return;
+        }
+
         this._closedViaPointer = true;
         if (this.open && !this.recentlyLeftChild) {
             this.leaveTimeout = setTimeout(() => {
@@ -782,17 +785,7 @@ export class MenuItem extends LikeAnchor(
                 const options = { signal: this.abortControllerSubmenu.signal };
                 this.addEventListener(
                     'click',
-                    this.handleSubmenuClick,
-                    options
-                );
-                this.addEventListener(
-                    'pointerenter',
-                    this.handlePointerenter,
-                    options
-                );
-                this.addEventListener(
-                    'pointerleave',
-                    this.handlePointerleave,
+                    this.handleSubmenuTriggerClick,
                     options
                 );
                 this.addEventListener(

packages/number-field/src/NumberField.ts

@@ -817,6 +817,7 @@ export class NumberField extends TextfieldBase {
     }
 
     protected override updated(changes: PropertyValues<this>): void {
+        super.updated(changes);
         if (!this.inputElement || !this.isConnected) {
             // Prevent race conditions if inputElement is removed from DOM while a queued update is still running.
             return;