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

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';
@@ -14,6 +14,20 @@ import * as i1$1 from '@radix-ng/primitives/portal';
 import { RdxPortalPresence } from '@radix-ng/primitives/portal';
 import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
 import { isPlatformBrowser } from '@angular/common';
+import * as i2$1 from '@radix-ng/primitives/composite';
+import { RdxCompositeItem } from '@radix-ng/primitives/composite';
+
+/** Selector for focusable menu items within a popup. */
+const RDX_MENU_ITEM_SELECTOR = [
+    '[rdxMenuItem]:not([data-disabled])',
+    '[rdxMenuCheckboxItem]:not([data-disabled])',
+    '[rdxMenuRadioItem]:not([data-disabled])',
+    '[rdxMenuLinkItem]:not([data-disabled])',
+    '[rdxMenuSubTrigger]:not([data-disabled])'
+].join(',');
+function getFocusableMenuItems(popup) {
+    return Array.from(popup.querySelectorAll(RDX_MENU_ITEM_SELECTOR)).filter((item) => item.closest('[rdxMenuPopup]') === popup);
+}
 
 const [injectRdxMenuRootContext, provideRdxMenuRootContext] = createContext('RdxMenuRootContext', 'components/menu');
 function buildContext(instance) {
@@ -38,6 +52,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 +61,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 +121,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 */ []));
@@ -174,7 +191,12 @@ class RdxMenuRoot {
         if (this.effectiveDisabled()) {
             return;
         }
-        this.autoFocus.set(autoFocus === true ? 'first' : autoFocus);
+        const nextAutoFocus = autoFocus === true ? 'first' : autoFocus;
+        this.autoFocus.set(nextAutoFocus);
+        if (this.open()) {
+            this.focusOpenPopup(nextAutoFocus);
+            return;
+        }
         if (!this.open()) {
             const change = this.createOpenChangeEvent(true, reason, event);
             this.onOpenChange.emit(change.payload);
@@ -257,6 +279,9 @@ class RdxMenuRoot {
             }
         };
     }
+    setBeforeContentFocusGuard(element) {
+        this.beforeContentFocusGuard.set(element);
+    }
     registerTransitionElement(element) {
         return this.transition.registerElement(element);
     }
@@ -304,6 +329,22 @@ class RdxMenuRoot {
             }
         };
     }
+    focusOpenPopup(autoFocus) {
+        if (autoFocus === false) {
+            return;
+        }
+        const popup = this.popupElement();
+        if (!popup) {
+            return;
+        }
+        if (autoFocus === 'popup') {
+            popup.focus({ preventScroll: true });
+            return;
+        }
+        const items = getFocusableMenuItems(popup);
+        const item = autoFocus === 'last' ? items.at(-1) : items[0];
+        (item ?? popup).focus({ preventScroll: true });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuRoot, isStandalone: true, selector: "[rdxMenuRoot],[rdxMenuSubmenuRoot]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, loopFocus: { classPropertyName: "loopFocus", publicName: "loopFocus", isSignal: true, isRequired: false, transformFunction: null }, highlightItemOnHover: { classPropertyName: "highlightItemOnHover", publicName: "highlightItemOnHover", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, dirInput: { classPropertyName: "dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, closeParentOnEsc: { classPropertyName: "closeParentOnEsc", publicName: "closeParentOnEsc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", onOpenChange: "onOpenChange", onOpenChangeComplete: "onOpenChangeComplete" }, providers: [
             provideRdxMenuRootContext(contextFactory),
@@ -789,18 +830,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }] } });
 
-/** Selector for focusable menu items within a popup. */
-const RDX_MENU_ITEM_SELECTOR = [
-    '[rdxMenuItem]:not([data-disabled])',
-    '[rdxMenuCheckboxItem]:not([data-disabled])',
-    '[rdxMenuRadioItem]:not([data-disabled])',
-    '[rdxMenuLinkItem]:not([data-disabled])',
-    '[rdxMenuSubTrigger]:not([data-disabled])'
-].join(',');
-function getFocusableMenuItems(popup) {
-    return Array.from(popup.querySelectorAll(RDX_MENU_ITEM_SELECTOR)).filter((item) => item.closest('[rdxMenuPopup]') === popup);
-}
-
 /**
  * A container for the menu contents.
  */
@@ -1072,6 +1101,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 +1158,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 +2250,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 +2300,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 +2334,9 @@ class RdxMenuTrigger {
             this.armMouseUpGuard(event.currentTarget);
         }
     }
+    handlePointerDown(event) {
+        this.triggerInteraction.recordPointerDown(event);
+    }
     handleClick(event) {
         if (this.isDisabled()) {
             return;
@@ -2464,26 +2515,26 @@ 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.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 }, { directive: i2$1.RdxCompositeItem }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuTrigger]',
                     exportAs: 'rdxMenuTrigger',
-                    hostDirectives: [RdxPopperAnchor],
+                    hostDirectives: [RdxPopperAnchor, RdxCompositeItem],
                     host: {
                         '[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-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)',