Merge branch 'main' into ruben/2nd-gen-chromatic

Author: rubencarvalho

.changeset/brave-foxes-smile.md

@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/menu': patch
+---
+
+**Fixed**: Improved touch interaction handling for submenus to prevent unintended submenu closures.

.github/workflows/pr-update.yml

@@ -29,8 +29,7 @@ jobs:
                   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
               run: |
                   yarn changeset version --snapshot preview-${GITHUB_SHA::8}
-                  yarn constraints --fix
-                  yarn version:update
+                  yarn genversion --source ./1st-gen/tools/base/package.json --semi --es6 --force ./2nd-gen/packages/core/shared/base/version.ts
                   yarn install --refresh-lockfile
 
             - name: Configure NPM for changeset publish
@@ -43,8 +42,8 @@ jobs:
               env:
                   NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
               run: |
+                  yarn build
                   git add .
                   git commit -am "chore: publish preview snapshot version"
-                  yarn prepublishOnly
                   yarn changeset publish --no-git-tag --tag preview
                   git reset --hard HEAD^

.github/workflows/preview-release.yml

@@ -1,7 +1,7 @@
-diff --git a/node_modules/@web/test-runner-coverage-v8/dist/index.js b/node_modules/@web/test-runner-coverage-v8/dist/index.js
+diff --git a/dist/index.js b/dist/index.js
 index 997bcfc..b19cf60 100644
---- a/node_modules/@web/test-runner-coverage-v8/dist/index.js
-+++ b/node_modules/@web/test-runner-coverage-v8/dist/index.js
+--- a/dist/index.js
++++ b/dist/index.js
 @@ -63,7 +63,16 @@ async function v8ToIstanbul(config, testFiles, coverage, userAgent) {
              !path.startsWith('/__web-test-runner') &&
              !path.startsWith('/__web-dev-server')) {

patches/@web+test-runner-coverage-v8+0.8.0.patch renamed to .yarn/patches/@web-test-runner-coverage-v8-npm-0.8.0-b19cf60e5f.patch

@@ -320,6 +320,13 @@ export class MenuItem extends LikeAnchor(
      */
     private _closedViaPointer = false;
 
+    /**
+     * Touch interaction state for submenu toggling
+     */
+    private _activePointerId?: number;
+    private _touchHandledViaPointerup = false;
+    private _touchAbortController?: AbortController;
+
     private handleClickCapture(event: Event): void | boolean {
         if (this.disabled) {
             event.preventDefault();
@@ -458,17 +465,75 @@ export class MenuItem extends LikeAnchor(
     }
 
     private handlePointerdown(event: PointerEvent): void {
-        if (event.target === this && this.hasSubmenu && this.open) {
+        const path = event.composedPath();
+        const targetIsInOverlay =
+            this.overlayElement && path.includes(this.overlayElement);
+
+        if (
+            event.pointerType === 'touch' &&
+            this.hasSubmenu &&
+            !targetIsInOverlay &&
+            this._activePointerId === undefined
+        ) {
+            this._activePointerId = event.pointerId;
+            this._touchAbortController = new AbortController();
+
+            window.addEventListener(
+                'pointerup',
+                this.handleTouchSubmenuToggle,
+                { once: true, signal: this._touchAbortController.signal }
+            );
+            window.addEventListener('pointercancel', this.handleTouchCleanup, {
+                once: true,
+                signal: this._touchAbortController.signal,
+            });
+        }
+
+        if (
+            !targetIsInOverlay &&
+            this.hasSubmenu &&
+            this.open &&
+            event.pointerType !== 'touch'
+        ) {
             this.addEventListener('focus', this.handleSubmenuFocus, {
                 once: true,
             });
-            this.overlayElement.addEventListener(
+            this.overlayElement?.addEventListener(
                 'beforetoggle',
                 this.handleBeforetoggle
             );
         }
     }
 
+    private handleTouchSubmenuToggle = (event: PointerEvent): void => {
+        if (event.pointerId !== this._activePointerId) {
+            return;
+        }
+
+        this._touchAbortController?.abort();
+        this._touchHandledViaPointerup = true;
+        this._activePointerId = undefined;
+
+        if (this.open) {
+            this.open = false;
+        } else {
+            this.openOverlay();
+        }
+
+        setTimeout(() => {
+            this._touchHandledViaPointerup = false;
+        }, 0);
+    };
+
+    private handleTouchCleanup = (event: PointerEvent): void => {
+        if (event.pointerId !== this._activePointerId) {
+            return;
+        }
+        this._touchAbortController?.abort();
+        this._activePointerId = undefined;
+        this._touchHandledViaPointerup = false;
+    };
+
     protected override firstUpdated(changes: PropertyValues): void {
         super.firstUpdated(changes);
         this.setAttribute('tabindex', '-1');
@@ -614,9 +679,16 @@ export class MenuItem extends LikeAnchor(
     }
 
     protected handleSubmenuClick(event: Event): void {
+        if (this._touchHandledViaPointerup) {
+            event.stopPropagation();
+            event.preventDefault();
+            return;
+        }
+
         if (event.composedPath().includes(this.overlayElement)) {
             return;
         }
+
         this.openOverlay(true);
     }
 
@@ -640,7 +712,12 @@ export class MenuItem extends LikeAnchor(
         }
     };
 
-    protected handlePointerenter(): void {
+    protected handlePointerenter(event: PointerEvent): void {
+        // For touch devices, don't open on pointerenter - let click handle it
+        if (event.pointerType === 'touch') {
+            return;
+        }
+
         if (this.leaveTimeout) {
             clearTimeout(this.leaveTimeout);
             delete this.leaveTimeout;
@@ -654,7 +731,12 @@ export class MenuItem extends LikeAnchor(
     protected leaveTimeout?: ReturnType<typeof setTimeout>;
     protected recentlyLeftChild = false;
 
-    protected handlePointerleave(): void {
+    protected handlePointerleave(event: PointerEvent): void {
+        // For touch devices, don't close on pointerleave - let click handle it
+        if (event.pointerType === 'touch') {
+            return;
+        }
+
         this._closedViaPointer = true;
         if (this.open && !this.recentlyLeftChild) {
             this.leaveTimeout = setTimeout(() => {
@@ -821,6 +903,12 @@ export class MenuItem extends LikeAnchor(
             selectionRoot: undefined,
             cleanupSteps: [],
         };
+
+        // Clean up any active touch listeners
+        this._touchAbortController?.abort();
+        this._activePointerId = undefined;
+        this._touchHandledViaPointerup = false;
+
         super.disconnectedCallback();
     }