ng-primitives 0.122.0 → 0.123.1

package/fesm2022/ng-primitives-menu.mjs

@@ -4,13 +4,13 @@ import * as i0 from '@angular/core';
 import { InjectionToken, inject, Injector, ViewContainerRef, signal, computed, effect, input, booleanAttribute, Directive, output, numberAttribute } from '@angular/core';
 import { ngpRovingFocusItem, provideRovingFocusItemState, ngpRovingFocusGroup, provideRovingFocusGroupState } from 'ng-primitives/roving-focus';
 import { ngpButton } from 'ng-primitives/button';
-import { injectElementRef } from 'ng-primitives/internal';
+import { injectElementRef, createHoverBridge } from 'ng-primitives/internal';
 import { createPrimitive, controlled, attrBinding, dataBinding, listener, deprecatedSetter, styleBinding, emitter } from 'ng-primitives/state';
 import { Directionality } from '@angular/cdk/bidi';
 import { ngpFocusTrap, provideFocusTrapState } from 'ng-primitives/focus-trap';
 import { Subject } from 'rxjs';
+import { injectDisposables, safeTakeUntilDestroyed } from 'ng-primitives/utils';
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { safeTakeUntilDestroyed } from 'ng-primitives/utils';
 
 const defaultMenuConfig = {
     offset: 4,
@@ -52,6 +52,7 @@ const [NgpMenuTriggerStateToken, ngpMenuTrigger, _injectMenuTriggerState, provid
     const injector = inject(Injector);
     const viewContainerRef = inject(ViewContainerRef);
     const directionality = inject(Directionality);
+    const disposables = injectDisposables();
     // Controlled properties
     const menu = controlled(_menu);
     const disabled = controlled(_disabled);
@@ -70,11 +71,21 @@ const [NgpMenuTriggerStateToken, ngpMenuTrigger, _injectMenuTriggerState, provid
     const pointerOverTrigger = signal(false, ...(ngDevMode ? [{ debugName: "pointerOverTrigger" }] : /* istanbul ignore next */ []));
     const pointerOverContent = signal(false, ...(ngDevMode ? [{ debugName: "pointerOverContent" }] : /* istanbul ignore next */ []));
     const isPointerOverMenuArea = computed(() => pointerOverTrigger() || pointerOverContent(), ...(ngDevMode ? [{ debugName: "isPointerOverMenuArea" }] : /* istanbul ignore next */ []));
+    // Safe-polygon hover intent: while the pointer travels inside a corridor from
+    // the trigger exit point toward the open menu, the menu stays open. Reversing
+    // away closes it (requireForwardMovement).
+    const hoverBridge = createHoverBridge({
+        isPointerInAnchor: isPointerOverMenuArea,
+        close: () => hide(),
+        requireForwardMovement: true,
+    });
     // Reset pointer tracking when menu closes
     effect(() => {
         const isOpen = open();
-        // When menu closes, reset pointer tracking state
+        // When menu closes, reset pointer tracking state and tear down any
+        // in-progress hover bridge (and its global listener).
         if (!isOpen) {
+            hoverBridge.clear();
             pointerOverTrigger.set(false);
             pointerOverContent.set(false);
         }
@@ -110,8 +121,10 @@ const [NgpMenuTriggerStateToken, ngpMenuTrigger, _injectMenuTriggerState, provid
             return;
         }
         pointerOverTrigger.set(true);
-        // If already open, cancel any pending hide
+        // If already open, cancel any pending hide - the pointer is back on the
+        // trigger, so any in-progress hover bridge is no longer needed.
         if (open()) {
+            hoverBridge.clear();
             overlay()?.cancelPendingClose();
             return;
         }
@@ -126,17 +139,31 @@ const [NgpMenuTriggerStateToken, ngpMenuTrigger, _injectMenuTriggerState, provid
             return;
         }
         pointerOverTrigger.set(false);
+        const currentOverlay = overlay();
         // If the overlay hasn't been created, there's nothing to cancel
-        if (!overlay()) {
+        if (!currentOverlay) {
+            return;
+        }
+        // Build a safe-polygon corridor from the pointer exit point toward the
+        // open menu. While the pointer stays inside it the menu stays open, so
+        // diagonal travel across the offset gap doesn't collapse the menu.
+        const menuElement = open() ? currentOverlay.getElements()[0] : undefined;
+        const started = !!menuElement &&
+            hoverBridge.track({
+                triggerRect: element.nativeElement.getBoundingClientRect(),
+                targetRect: menuElement.getBoundingClientRect(),
+                exitPoint: { x: event.clientX, y: event.clientY },
+            });
+        if (started) {
+            currentOverlay.cancelPendingClose();
             return;
         }
-        // Use a small delay to allow moving to content
-        setTimeout(() => {
-            // Only hide if pointer is not over trigger or content
+        // Fall back to a small grace period when we can't build the corridor.
+        disposables.setTimeout(() => {
             if (!isPointerOverMenuArea()) {
                 hide();
             }
-        }, 50); // Small grace period for moving between trigger and content
+        }, 50);
     }
     function onFocus() {
         if (disabled?.() || !triggers().includes('focus')) {
@@ -309,9 +336,14 @@ const [NgpMenuTriggerStateToken, ngpMenuTrigger, _injectMenuTriggerState, provid
      */
     function setPointerOverContent(isOver) {
         pointerOverContent.set(isOver);
-        if (!isOver && open() && triggers().includes('hover')) {
+        if (isOver) {
+            // The pointer reached the menu - the hover bridge has served its purpose.
+            hoverBridge.clear();
+            return;
+        }
+        if (open() && triggers().includes('hover')) {
             // Use a small delay to allow pointer to move back to trigger
-            setTimeout(() => {
+            disposables.setTimeout(() => {
                 // Only hide if pointer is not over trigger or content
                 if (!isPointerOverMenuArea()) {
                     hide();
@@ -432,21 +464,48 @@ const [NgpMenuStateToken, ngpMenu, injectMenuState, provideMenuState] = createPr
     };
 });
 
-const [NgpSubmenuTriggerStateToken, ngpSubmenuTrigger, injectSubmenuTriggerState, provideSubmenuTriggerState,] = createPrimitive('NgpSubmenuTrigger', ({ disabled: _disabled = signal(false), menu: _menu = signal(undefined), placement: _placement = signal('right-start'), offset: _offset = signal(0), flip: _flip = signal(true), }) => {
+const [NgpSubmenuTriggerStateToken, ngpSubmenuTrigger, injectSubmenuTriggerState, provideSubmenuTriggerState,] = createPrimitive('NgpSubmenuTrigger', ({ disabled: _disabled = signal(false), menu: _menu = signal(undefined), placement: _placement = signal('right-start'), offset: _offset = signal(0), flip: _flip = signal(true), container: _container, }) => {
     const element = injectElementRef();
     const injector = inject(Injector);
     const viewContainerRef = inject(ViewContainerRef);
     const parentMenu = injectMenuState({ optional: true });
     const focusMonitor = inject(FocusMonitor);
+    const disposables = injectDisposables();
     // Controlled properties
     const menu = controlled(_menu);
     const disabled = controlled(_disabled);
     const placement = controlled(_placement);
     const flip = controlled(_flip);
     const offset = controlled(_offset);
+    const container = controlled(_container, 'body');
     const overlay = signal(null, ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
     const open = computed(() => overlay()?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     const openOrigin = signal('program', ...(ngDevMode ? [{ debugName: "openOrigin" }] : /* istanbul ignore next */ []));
+    // Track pointer presence for the safe-polygon hover bridge.
+    const pointerOverTrigger = signal(false, ...(ngDevMode ? [{ debugName: "pointerOverTrigger" }] : /* istanbul ignore next */ []));
+    const pointerOverContent = signal(false, ...(ngDevMode ? [{ debugName: "pointerOverContent" }] : /* istanbul ignore next */ []));
+    const isPointerOverSubmenu = computed(() => pointerOverTrigger() || pointerOverContent(), ...(ngDevMode ? [{ debugName: "isPointerOverSubmenu" }] : /* istanbul ignore next */ []));
+    // Safe-polygon hover intent: while the pointer travels inside a corridor from
+    // the submenu trigger toward the open submenu, sibling hover events are
+    // ignored so the submenu doesn't collapse mid-traversal.
+    const hoverBridge = createHoverBridge({
+        isPointerInAnchor: isPointerOverSubmenu,
+        close: () => hide('mouse'),
+        requireForwardMovement: true,
+    });
+    // Tear down any hover bridge whenever the submenu closes - including close
+    // paths that bypass hide() (e.g. an outside click on the overlay), so a
+    // stale corridor can't linger or wrongly suppress the next sibling hover.
+    // Also reset the pointer flags: destroying the panel under the pointer never
+    // fires its pointerleave, and a stuck pointerOverContent would make every
+    // future corridor treat the pointer as anchored and never close.
+    effect(() => {
+        if (!open()) {
+            hoverBridge.clear();
+            pointerOverTrigger.set(false);
+            pointerOverContent.set(false);
+        }
+    });
     // Subscribe to parent menu's closeSubmenus
     parentMenu()
         ?.closeSubmenus.pipe(safeTakeUntilDestroyed())
@@ -455,6 +514,12 @@ const [NgpSubmenuTriggerStateToken, ngpSubmenuTrigger, injectSubmenuTriggerState
         if (submenuElement === element.nativeElement) {
             return;
         }
+        // While the pointer is still inside the safe-polygon corridor toward this
+        // submenu, ignore sibling hover-driven closes. The pointer-move listener
+        // closes the submenu itself once the pointer actually leaves the corridor.
+        if (hoverBridge.isActive()) {
+            return;
+        }
         hide('mouse');
     });
     // Host bindings
@@ -465,6 +530,7 @@ const [NgpSubmenuTriggerStateToken, ngpSubmenuTrigger, injectSubmenuTriggerState
     listener(element, 'click', onClick);
     listener(element, 'keydown', handleArrowKey);
     listener(element, 'pointerenter', showSubmenuOnHover);
+    listener(element, 'pointerleave', onPointerLeave);
     // Methods
     function onClick(event) {
         if (disabled?.()) {
@@ -502,6 +568,8 @@ const [NgpSubmenuTriggerStateToken, ngpSubmenuTrigger, injectSubmenuTriggerState
         if (disabled?.() || !open()) {
             return;
         }
+        // The submenu is closing - any active hover bridge is no longer relevant.
+        hoverBridge.clear();
         // Hide the overlay
         overlay()?.hide({ origin });
     }
@@ -520,6 +588,7 @@ const [NgpSubmenuTriggerStateToken, ngpSubmenuTrigger, injectSubmenuTriggerState
             content: menuContent,
             triggerElement: element.nativeElement,
             injector,
+            container: container(),
             placement,
             offset: offset(),
             flip: flip(),
@@ -552,8 +621,38 @@ const [NgpSubmenuTriggerStateToken, ngpSubmenuTrigger, injectSubmenuTriggerState
         if (event.pointerType === 'touch') {
             return;
         }
+        pointerOverTrigger.set(true);
+        // The pointer is back on the trigger - drop any in-progress hover bridge.
+        hoverBridge.clear();
         show('mouse');
     }
+    function onPointerLeave(event) {
+        if (event instanceof PointerEvent === false || event.pointerType === 'touch') {
+            return;
+        }
+        pointerOverTrigger.set(false);
+        const currentOverlay = overlay();
+        // Only build a corridor while the submenu is actually open.
+        if (!open() || !currentOverlay) {
+            return;
+        }
+        const submenuElement = currentOverlay.getElements()[0];
+        const started = !!submenuElement &&
+            hoverBridge.track({
+                triggerRect: element.nativeElement.getBoundingClientRect(),
+                targetRect: submenuElement.getBoundingClientRect(),
+                exitPoint: { x: event.clientX, y: event.clientY },
+            });
+        if (!started) {
+            // Defensive fallback: if the corridor can't be built, close after a short
+            // grace period rather than leaving the submenu stuck open.
+            disposables.setTimeout(() => {
+                if (!isPointerOverSubmenu()) {
+                    hide('mouse');
+                }
+            }, 50);
+        }
+    }
     function setDisabled(isDisabled) {
         disabled.set(isDisabled);
         if (isDisabled && open()) {
@@ -572,14 +671,19 @@ const [NgpSubmenuTriggerStateToken, ngpSubmenuTrigger, injectSubmenuTriggerState
     function setFlip(shouldFlip) {
         flip.set(shouldFlip);
     }
+    function setContainer(newContainer) {
+        container.set(newContainer);
+    }
     function focus(origin) {
         focusMonitor.focusVia(element.nativeElement, origin, { preventScroll: true });
     }
-    // No-op for submenus - hover behavior is handled via showSubmenuOnHover on the trigger element
-    function setPointerOverContent(_isOver) {
-        // Submenus don't need pointer tracking on content because:
-        // 1. The submenu trigger handles hover via showSubmenuOnHover
-        // 2. Closing on hover-out is handled by the parent menu's closeSubmenus mechanism
+    function setPointerOverContent(isOver) {
+        pointerOverContent.set(isOver);
+        // Reaching the submenu content means the pointer arrived safely, so the
+        // hover bridge corridor is no longer needed.
+        if (isOver) {
+            hoverBridge.clear();
+        }
     }
     return {
         placement: deprecatedSetter(placement, 'setPlacement'),
@@ -597,8 +701,10 @@ const [NgpSubmenuTriggerStateToken, ngpSubmenuTrigger, injectSubmenuTriggerState
         setFlip,
         setPlacement,
         setOffset,
+        setContainer,
         focus,
         setPointerOverContent,
+        container: deprecatedSetter(container, 'setContainer', setContainer),
     };
 });
 
@@ -633,6 +739,11 @@ class NgpSubmenuTrigger {
          */
         this.flip = input(true, { ...(ngDevMode ? { debugName: "flip" } : /* istanbul ignore next */ {}), alias: 'ngpSubmenuTriggerFlip',
             transform: coerceFlip });
+        /**
+         * Define the container in which the menu should be attached.
+         * @default document.body
+         */
+        this.container = input(null, { ...(ngDevMode ? { debugName: "container" } : /* istanbul ignore next */ {}), alias: 'ngpSubmenuTriggerContainer' });
         /**
          * Access the menu trigger state.
          */
@@ -642,6 +753,7 @@ class NgpSubmenuTrigger {
             placement: this.placement,
             offset: this.offset,
             flip: this.flip,
+            container: this.container,
         });
     }
     /**
@@ -671,8 +783,12 @@ class NgpSubmenuTrigger {
         this.state.focus(origin);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpSubmenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpSubmenuTrigger, isStandalone: true, selector: "[ngpSubmenuTrigger]", inputs: { menu: { classPropertyName: "menu", publicName: "ngpSubmenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpSubmenuTriggerDisabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpSubmenuTriggerPlacement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngpSubmenuTriggerOffset", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "ngpSubmenuTriggerFlip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            provideSubmenuTriggerState(),
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpSubmenuTrigger, isStandalone: true, selector: "[ngpSubmenuTrigger]", inputs: { menu: { classPropertyName: "menu", publicName: "ngpSubmenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpSubmenuTriggerDisabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpSubmenuTriggerPlacement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngpSubmenuTriggerOffset", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "ngpSubmenuTriggerFlip", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "ngpSubmenuTriggerContainer", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            // inherit: false - a nested submenu trigger lives inside the DI scope of its
+            // parent submenu trigger (via the overlay's injector). Inheriting would reuse
+            // the parent trigger's state signal and overwrite it with this trigger's
+            // state, so the parent's menu would start talking to the wrong trigger.
+            provideSubmenuTriggerState({ inherit: false }),
             // Also provide as NgpMenuTriggerStateToken so the submenu's menu-state
             // can find this trigger's openOrigin for :focus-visible styling
             { provide: NgpMenuTriggerStateToken, useExisting: NgpSubmenuTriggerStateToken },
@@ -684,13 +800,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     selector: '[ngpSubmenuTrigger]',
                     exportAs: 'ngpSubmenuTrigger',
                     providers: [
-                        provideSubmenuTriggerState(),
+                        // inherit: false - a nested submenu trigger lives inside the DI scope of its
+                        // parent submenu trigger (via the overlay's injector). Inheriting would reuse
+                        // the parent trigger's state signal and overwrite it with this trigger's
+                        // state, so the parent's menu would start talking to the wrong trigger.
+                        provideSubmenuTriggerState({ inherit: false }),
                         // Also provide as NgpMenuTriggerStateToken so the submenu's menu-state
                         // can find this trigger's openOrigin for :focus-visible styling
                         { provide: NgpMenuTriggerStateToken, useExisting: NgpSubmenuTriggerStateToken },
                     ],
                 }]
-        }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTrigger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTriggerDisabled", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTriggerPlacement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTriggerOffset", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTriggerFlip", required: false }] }] } });
+        }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTrigger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTriggerDisabled", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTriggerPlacement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTriggerOffset", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTriggerFlip", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTriggerContainer", required: false }] }] } });
 
 const [NgpMenuItemStateToken, ngpMenuItem, injectMenuItemState, provideMenuItemState] = createPrimitive('NgpMenuItem', ({ disabled = signal(false), closeOnSelect = signal(true), role = 'menuitem', }) => {
     const element = injectElementRef();