@radix-ng/primitives 1.0.0-beta.4 → 1.0.0-beta.5

package/fesm2022/radix-ng-primitives-menu.mjs

@@ -6,7 +6,7 @@ import * as i2 from '@radix-ng/primitives/core';
 import { createContext, createFloatingRootContext, useTransitionStatus, createCancelableChangeEventDetails, provideFloatingTree, provideFloatingRootContext, injectId, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useAnchoredScrollLock, RdxFloatingNodeRegistration, rdxDevError, setupInternalBackdrop, getMaxTransitionDuration } from '@radix-ng/primitives/core';
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
 import * as i3 from '@radix-ng/primitives/floating-focus-manager';
-import { getInteractionTypeFromEvent, RdxFloatingFocusManager, provideFloatingFocusManagerConfig } from '@radix-ng/primitives/floating-focus-manager';
+import { getInteractionTypeFromEvent, RdxFloatingFocusManager, provideFloatingFocusManagerConfig, createRdxTriggerInteraction, useTriggerFocusGuards } from '@radix-ng/primitives/floating-focus-manager';
 import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
 import { RdxDismiss } from '@radix-ng/primitives/dismissable-layer';
 import { RdxFocusScope } from '@radix-ng/primitives/focus-scope';
@@ -38,6 +38,7 @@ function buildContext(instance) {
         hasTriggerInteractionHandler: instance.hasTriggerInteractionHandler.asReadonly(),
         trigger: instance.trigger.asReadonly(),
         popupElement: instance.popupElement.asReadonly(),
+        beforeContentFocusGuard: instance.beforeContentFocusGuard.asReadonly(),
         transitionStatus: instance.transitionStatus,
         close: (reason, event) => instance.close(reason, event),
         closeEntireMenu: (reason, event) => instance.closeEntireMenu(reason, event),
@@ -46,6 +47,7 @@ function buildContext(instance) {
         showWithoutAutoFocus: (reason, event) => instance.show(false, reason, event),
         registerTrigger: (el) => instance.registerTrigger(el),
         registerPopup: (el) => instance.registerPopup(el),
+        setBeforeContentFocusGuard: (element) => instance.setBeforeContentFocusGuard(element),
         registerTransitionElement: (el) => instance.registerTransitionElement(el),
         registerPopupArrowNavigationHandler: (handler) => instance.registerPopupArrowNavigationHandler(handler),
         registerTriggerInteractionHandler: (handler) => instance.registerTriggerInteractionHandler(handler),
@@ -105,6 +107,7 @@ class RdxMenuRoot {
         this.onOpenChangeComplete = output();
         this.trigger = signal(undefined, ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
         this.popupElement = signal(undefined, ...(ngDevMode ? [{ debugName: "popupElement" }] : /* istanbul ignore next */ []));
+        this.beforeContentFocusGuard = signal(null, ...(ngDevMode ? [{ debugName: "beforeContentFocusGuard" }] : /* istanbul ignore next */ []));
         this.transitionStatus = this.transition.status;
         /** Whether the popup grabs focus when it opens. Set false for menubar hover-switching. */
         this.autoFocus = signal('first', ...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
@@ -257,6 +260,9 @@ class RdxMenuRoot {
             }
         };
     }
+    setBeforeContentFocusGuard(element) {
+        this.beforeContentFocusGuard.set(element);
+    }
     registerTransitionElement(element) {
         return this.transition.registerElement(element);
     }
@@ -1072,6 +1078,9 @@ class RdxMenuPopup {
                     // disabled separately below; focus/marker policy should not disappear if a menu becomes
                     // disabled while open, or if `preventUnmountOnClose()` keeps it mounted after close.
                     enabled: () => rootContext.present(),
+                    restoreFocus: () => true,
+                    previousFocusableElement: () => rootContext.trigger() ?? null,
+                    beforeContentFocusGuardRef: () => (element) => rootContext.setBeforeContentFocusGuard(element),
                     // Base UI's submenu policy: a submenu mount does not steal focus from its trigger.
                     // Root menus still choose first / last item vs popup container from the menu's own
                     // open policy (`autoFocus`), but the decision now lives in the focus manager instead
@@ -1126,6 +1135,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                                 // disabled separately below; focus/marker policy should not disappear if a menu becomes
                                 // disabled while open, or if `preventUnmountOnClose()` keeps it mounted after close.
                                 enabled: () => rootContext.present(),
+                                restoreFocus: () => true,
+                                previousFocusableElement: () => rootContext.trigger() ?? null,
+                                beforeContentFocusGuardRef: () => (element) => rootContext.setBeforeContentFocusGuard(element),
                                 // Base UI's submenu policy: a submenu mount does not steal focus from its trigger.
                                 // Root menus still choose first / last item vs popup container from the menu's own
                                 // open policy (`autoFocus`), but the decision now lives in the focus manager instead
@@ -2215,6 +2227,12 @@ class RdxMenuTrigger {
         this.closeDelay = input(undefined, { ...(ngDevMode ? { debugName: "closeDelay" } : /* istanbul ignore next */ {}), transform: numberOrUndefined });
         this.nativeButtonState = computed(() => this.nativeButton() || this.elementRef.nativeElement.tagName === 'BUTTON', ...(ngDevMode ? [{ debugName: "nativeButtonState" }] : /* istanbul ignore next */ []));
         this.isDisabled = computed(() => this.rootContext.disabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.triggerInteraction = createRdxTriggerInteraction({
+            trigger: () => this.elementRef.nativeElement,
+            activeTrigger: () => this.rootContext.trigger(),
+            open: () => this.rootContext.isOpen(),
+            disabled: () => this.isDisabled()
+        });
         effect((onCleanup) => {
             const el = this.elementRef.nativeElement;
             const unregister = this.rootContext.registerTrigger(el);
@@ -2259,6 +2277,13 @@ class RdxMenuTrigger {
         // (A press/focus on the trigger no longer needs a dismissable-layer branch to avoid
         // self-dismissal: the trigger is registered in the menu's floating context, so the dismissal
         // capability already treats it as "inside" — ADR 0015 trigger registry replaces the branch.)
+        useTriggerFocusGuards({
+            trigger: () => this.elementRef.nativeElement,
+            close: (event) => this.rootContext.close('focus-out', event),
+            beforeContentFocusGuard: () => this.rootContext.beforeContentFocusGuard(),
+            enabled: () => this.triggerInteraction.isActive(),
+            popupElement: () => this.rootContext.popupElement()
+        });
         this.destroyRef.onDestroy(() => {
             this.clearOpenTimer();
             this.clearCloseTimer();
@@ -2286,6 +2311,9 @@ class RdxMenuTrigger {
             this.armMouseUpGuard(event.currentTarget);
         }
     }
+    handlePointerDown(event) {
+        this.triggerInteraction.recordPointerDown(event);
+    }
     handleClick(event) {
         if (this.isDisabled()) {
             return;
@@ -2464,7 +2492,7 @@ class RdxMenuTrigger {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuTrigger, isStandalone: true, selector: "[rdxMenuTrigger]", inputs: { nativeButton: { classPropertyName: "nativeButton", publicName: "nativeButton", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "handleMouseDown($event)", "click": "handleClick($event)", "pointerenter": "handlePointerEnter($event)", "pointermove": "handlePointerMove($event)", "pointerleave": "handlePointerLeave($event)", "keydown.arrowdown": "handleArrowDown($event)", "keydown.arrowup": "handleArrowUp($event)", "keydown.arrowleft": "handleArrowLeft($event)", "keydown.arrowright": "handleArrowRight($event)", "keydown.home": "handleHome($event)", "keydown.end": "handleEnd($event)", "keydown.escape": "handleEscape($event)", "keydown.enter": "handleKeyboardToggle($event)", "keydown.space": "handleKeyboardToggle($event)" }, properties: { "attr.type": "nativeButtonState() ? \"button\" : undefined", "attr.role": "rootContext.hasTriggerInteractionHandler() ? \"menuitem\" : nativeButtonState() ? undefined : \"button\"", "attr.tabindex": "rootContext.hasTriggerInteractionHandler() ? \"-1\" : undefined", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "rootContext.isOpen()", "attr.aria-disabled": "isDisabled() ? true : undefined", "attr.disabled": "nativeButtonState() && isDisabled() ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-popup-open": "rootContext.isOpen() ? \"\" : undefined", "style.pointer-events": "rootContext.isOpen() && rootContext.modal() ? \"auto\" : undefined" } }, exportAs: ["rdxMenuTrigger"], hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuTrigger, isStandalone: true, selector: "[rdxMenuTrigger]", inputs: { nativeButton: { classPropertyName: "nativeButton", publicName: "nativeButton", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "handlePointerDown($event)", "mousedown": "handleMouseDown($event)", "click": "handleClick($event)", "pointerenter": "handlePointerEnter($event)", "pointermove": "handlePointerMove($event)", "pointerleave": "handlePointerLeave($event)", "keydown.arrowdown": "handleArrowDown($event)", "keydown.arrowup": "handleArrowUp($event)", "keydown.arrowleft": "handleArrowLeft($event)", "keydown.arrowright": "handleArrowRight($event)", "keydown.home": "handleHome($event)", "keydown.end": "handleEnd($event)", "keydown.escape": "handleEscape($event)", "keydown.enter": "handleKeyboardToggle($event)", "keydown.space": "handleKeyboardToggle($event)" }, properties: { "attr.type": "nativeButtonState() ? \"button\" : undefined", "attr.role": "rootContext.hasTriggerInteractionHandler() ? \"menuitem\" : nativeButtonState() ? undefined : \"button\"", "attr.tabindex": "rootContext.hasTriggerInteractionHandler() ? \"-1\" : undefined", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "triggerInteraction.ariaExpanded()", "attr.aria-disabled": "isDisabled() ? true : undefined", "attr.disabled": "nativeButtonState() && isDisabled() ? \"\" : undefined", "attr.data-state": "triggerInteraction.dataState()", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-popup-open": "triggerInteraction.dataPopupOpen()", "style.pointer-events": "rootContext.isOpen() && rootContext.modal() ? \"auto\" : undefined" } }, exportAs: ["rdxMenuTrigger"], hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuTrigger, decorators: [{
             type: Directive,
@@ -2477,13 +2505,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.role]': 'rootContext.hasTriggerInteractionHandler() ? "menuitem" : nativeButtonState() ? undefined : "button"',
                         '[attr.tabindex]': 'rootContext.hasTriggerInteractionHandler() ? "-1" : undefined',
                         '[attr.aria-haspopup]': '"menu"',
-                        '[attr.aria-expanded]': 'rootContext.isOpen()',
+                        '[attr.aria-expanded]': 'triggerInteraction.ariaExpanded()',
                         '[attr.aria-disabled]': 'isDisabled() ? true : undefined',
                         '[attr.disabled]': 'nativeButtonState() && isDisabled() ? "" : undefined',
-                        '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"',
+                        '[attr.data-state]': 'triggerInteraction.dataState()',
                         '[attr.data-disabled]': 'isDisabled() ? "" : undefined',
-                        '[attr.data-popup-open]': 'rootContext.isOpen() ? "" : undefined',
+                        '[attr.data-popup-open]': 'triggerInteraction.dataPopupOpen()',
                         '[style.pointer-events]': 'rootContext.isOpen() && rootContext.modal() ? "auto" : undefined',
+                        '(pointerdown)': 'handlePointerDown($event)',
                         '(mousedown)': 'handleMouseDown($event)',
                         '(click)': 'handleClick($event)',
                         '(pointerenter)': 'handlePointerEnter($event)',