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

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

@@ -4,10 +4,10 @@ import * as i1 from '@radix-ng/primitives/popper';
 import { RdxPopper, RdxPopperContentWrapper, RdxPopperArrow, RdxPopperContent, legacyPopperVars, provideRdxPopperContentWrapper, provideRdxPopperContentConfig, RdxPopperAnchor } from '@radix-ng/primitives/popper';
 import * as i2 from '@radix-ng/primitives/core';
 import { createContext, createFloatingRootContext, useTransitionStatus, injectId, createCancelableChangeEventDetails, provideFloatingTree, provideFloatingRootContext, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useAnchoredScrollLock, RdxFloatingNodeRegistration, rdxDevError, useGraceArea } from '@radix-ng/primitives/core';
+import * as i3 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 * as i3 from '@radix-ng/primitives/floating-focus-manager';
-import { RdxFloatingFocusManager, provideFloatingFocusManagerConfig } from '@radix-ng/primitives/floating-focus-manager';
 import { RdxFocusScope } from '@radix-ng/primitives/focus-scope';
 import * as i1$1 from '@radix-ng/primitives/portal';
 import { RdxPortalPresence } from '@radix-ng/primitives/portal';
@@ -65,6 +65,7 @@ class RdxPopoverRoot {
          */
         this.handle = input(...(ngDevMode ? [undefined, { debugName: "handle" }] : /* istanbul ignore next */ []));
         this.contentId = injectId('rdx-popover-content-');
+        this.beforeContentFocusGuard = signal(null, ...(ngDevMode ? [{ debugName: "beforeContentFocusGuard" }] : /* istanbul ignore next */ []));
         this.descriptionId = signal(undefined, ...(ngDevMode ? [{ debugName: "descriptionId" }] : /* istanbul ignore next */ []));
         this.titleId = signal(undefined, ...(ngDevMode ? [{ debugName: "titleId" }] : /* istanbul ignore next */ []));
         this.trigger = signal(undefined, ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
@@ -73,8 +74,11 @@ class RdxPopoverRoot {
         this.isPointerDownOnTrigger = signal(false, ...(ngDevMode ? [{ debugName: "isPointerDownOnTrigger" }] : /* istanbul ignore next */ []));
         /** Whether the current open was initiated by touch (ADR 0016 §3 — gates the anchored scroll lock). */
         this.openedByTouch = signal(false, ...(ngDevMode ? [{ debugName: "openedByTouch" }] : /* istanbul ignore next */ []));
+        this.openInteractionType = signal(null, ...(ngDevMode ? [{ debugName: "openInteractionType" }] : /* istanbul ignore next */ []));
+        this.closeInteractionType = signal(null, ...(ngDevMode ? [{ debugName: "closeInteractionType" }] : /* istanbul ignore next */ []));
         this.popupCloseCount = signal(0, ...(ngDevMode ? [{ debugName: "popupCloseCount" }] : /* istanbul ignore next */ []));
         this.preventUnmountOnClose = signal(false, ...(ngDevMode ? [{ debugName: "preventUnmountOnClose" }] : /* istanbul ignore next */ []));
+        this.pendingTriggerOpenInteractionType = signal(null, ...(ngDevMode ? [{ debugName: "pendingTriggerOpenInteractionType" }] : /* istanbul ignore next */ []));
         this.onOpenChange = output();
         this.onOpenChangeComplete = output();
         this.registeredTriggers = new Map();
@@ -132,7 +136,7 @@ class RdxPopoverRoot {
             }
         });
     }
-    show(trigger = this.trigger(), payload, triggerId, reason = 'none', event = new Event('popover.open-change'), fromHover = false) {
+    show(trigger = this.trigger(), payload, triggerId, reason = 'none', event, fromHover = false) {
         this.clearHoverTimers();
         const previousTrigger = this.trigger();
         const changedTriggerWhileOpen = this.open() && previousTrigger !== trigger;
@@ -146,11 +150,15 @@ class RdxPopoverRoot {
             this.payload.set(payload);
             return;
         }
-        const change = this.createOpenChangeEvent(true, reason, event, trigger, triggerId ?? this.triggerId());
+        const resolvedEvent = event ?? new Event('popover.open-change');
+        const change = this.createOpenChangeEvent(true, reason, resolvedEvent, trigger, triggerId ?? this.triggerId());
         this.onOpenChange.emit(change.payload);
         if (change.eventDetails.isCanceled()) {
             return;
         }
+        const interactionType = this.consumeOpenInteractionType(event);
+        this.openInteractionType.set(interactionType);
+        this.openedByTouch.set(interactionType === 'touch');
         this.isHoverActive.set(fromHover);
         this.openChangeReason.set(reason);
         this.instant.set(changedTriggerWhileOpen || reason === 'trigger-focus');
@@ -171,16 +179,19 @@ class RdxPopoverRoot {
         this.open.set(true);
         this.floatingContext.events.emit('openchange', { open: true, reason, event: change.eventDetails.event });
     }
-    close(reason = 'none', event = new Event('popover.open-change')) {
+    close(reason = 'none', event) {
         this.clearHoverTimers();
         if (!this.open()) {
             return;
         }
-        const change = this.createOpenChangeEvent(false, reason, event, this.trigger(), this.triggerId());
+        const resolvedEvent = event ?? new Event('popover.open-change');
+        const change = this.createOpenChangeEvent(false, reason, resolvedEvent, this.trigger(), this.triggerId());
         this.onOpenChange.emit(change.payload);
         if (change.eventDetails.isCanceled()) {
             return;
         }
+        this.pendingTriggerOpenInteractionType.set(null);
+        this.closeInteractionType.set(getInteractionTypeFromEvent(event));
         this.isHoverActive.set(false);
         this.openedByTouch.set(false);
         this.instant.set(reason !== 'none' && reason !== 'trigger-hover');
@@ -224,6 +235,9 @@ class RdxPopoverRoot {
         this.hoverDelay = delay;
         this.hoverCloseDelay = closeDelay;
     }
+    setTriggerOpenInteractionType(type) {
+        this.pendingTriggerOpenInteractionType.set(type);
+    }
     registerTrigger(id, trigger, payload) {
         this.registeredTriggers.set(id, { element: trigger, payload });
         this.triggers.update((triggers) => (triggers.includes(trigger) ? triggers : [...triggers, trigger]));
@@ -263,6 +277,9 @@ class RdxPopoverRoot {
         this.viewportTriggerChange.add(onTriggerChange);
         return () => this.viewportTriggerChange.delete(onTriggerChange);
     }
+    setBeforeContentFocusGuard(element) {
+        this.beforeContentFocusGuard.set(element);
+    }
     registerTransitionElement(element) {
         return this.transition.registerElement(element);
     }
@@ -330,6 +347,11 @@ class RdxPopoverRoot {
             }
         });
     }
+    consumeOpenInteractionType(event) {
+        const pending = this.pendingTriggerOpenInteractionType();
+        this.pendingTriggerOpenInteractionType.set(null);
+        return pending ?? getInteractionTypeFromEvent(event);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPopoverRoot, isStandalone: true, selector: "[rdxPopoverRoot]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, triggerId: { classPropertyName: "triggerId", publicName: "triggerId", isSignal: true, isRequired: false, transformFunction: null }, defaultTriggerId: { classPropertyName: "defaultTriggerId", publicName: "defaultTriggerId", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", triggerId: "triggerIdChange", onOpenChange: "onOpenChange", onOpenChangeComplete: "onOpenChangeComplete" }, providers: [
             provideRdxPopoverRootContext(context),
@@ -371,6 +393,8 @@ function contextFor(root) {
         openChangeReason: root.openChangeReason.asReadonly(),
         isPointerDownOnTrigger: root.isPointerDownOnTrigger.asReadonly(),
         openedByTouch: root.openedByTouch.asReadonly(),
+        openInteractionType: root.openInteractionType.asReadonly(),
+        closeInteractionType: root.closeInteractionType.asReadonly(),
         close: (reason, event) => root.close(reason, event),
         cancelHoverClose: () => root.cancelHoverClose(),
         cancelHoverOpen: () => root.cancelHoverOpen(),
@@ -382,6 +406,7 @@ function contextFor(root) {
         setTitleId: (id) => root.titleId.set(id),
         setPointerDownOnTrigger: (pointerDown) => root.isPointerDownOnTrigger.set(pointerDown),
         setOpenedByTouch: (value) => root.openedByTouch.set(value),
+        setTriggerOpenInteractionType: (type) => root.setTriggerOpenInteractionType(type),
         setHoverDelays: (delay, closeDelay) => root.setHoverDelays(delay, closeDelay),
         registerPopupClose: () => {
             root.popupCloseCount.update((count) => count + 1);
@@ -389,7 +414,9 @@ function contextFor(root) {
         },
         registerTransitionElement: (element) => root.registerTransitionElement(element),
         transitionStatus: root.transitionStatus,
+        beforeContentFocusGuard: root.beforeContentFocusGuard.asReadonly(),
         registerViewport: (onTriggerChange) => root.registerViewport(onTriggerChange),
+        setBeforeContentFocusGuard: (element) => root.setBeforeContentFocusGuard(element),
         toggle: (triggerId, trigger, payload, event) => root.toggle(triggerId, trigger, payload, event)
     };
 }
@@ -469,8 +496,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * - No `disablePointerDismissal` — outside-press + focus-out always close.
  *
  * Note: a positioned popover does **not** auto-focus into the popup on open (pre-existing — the legacy
- * behaved the same; verified). The trap holds focus once it is inside. Auto-focus-on-open + redirecting a
- * Tab from the trigger into the popup needs the deferred portal-focus bridge / guards (ADR 0017 §6a).
+ * behaved the same; verified). The trap holds focus once it is inside; portal tab-order handoff is owned
+ * by `RdxFloatingFocusManager` and anchored to the active trigger below.
  */
 class RdxPopoverPopup {
     constructor() {
@@ -547,11 +574,16 @@ class RdxPopoverPopup {
                         (rootContext.modal() === true && rootContext.hasPopupClose()),
                     // Full modal blocks outside pointer interaction; `trap-focus` only traps focus.
                     inert: () => rootContext.modal() === true && rootContext.hasPopupClose(),
+                    restoreFocus: () => 'popup',
+                    previousFocusableElement: () => rootContext.trigger() ?? null,
+                    beforeContentFocusGuardRef: () => (element) => rootContext.setBeforeContentFocusGuard(element),
                     // Active for the whole MOUNTED lifetime (Base UI `disabled={!mounted}`, not `open`) for
                     // trap/return-focus — including an explicit `preventUnmountOnClose()` cycle after the
                     // exit transition. Marker + isolation are additionally gated on `open` inside the
                     // manager. Still suppressed while hover-opened.
-                    enabled: () => rootContext.present() && !rootContext.isHoverActive()
+                    enabled: () => rootContext.present() && !rootContext.isHoverActive(),
+                    openInteractionType: () => rootContext.openInteractionType(),
+                    closeInteractionType: () => rootContext.closeInteractionType()
                 };
             })
         ], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFloatingNodeRegistration }, { directive: i3.RdxFloatingFocusManager }], ngImport: i0 }); }
@@ -569,11 +601,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                                     (rootContext.modal() === true && rootContext.hasPopupClose()),
                                 // Full modal blocks outside pointer interaction; `trap-focus` only traps focus.
                                 inert: () => rootContext.modal() === true && rootContext.hasPopupClose(),
+                                restoreFocus: () => 'popup',
+                                previousFocusableElement: () => rootContext.trigger() ?? null,
+                                beforeContentFocusGuardRef: () => (element) => rootContext.setBeforeContentFocusGuard(element),
                                 // Active for the whole MOUNTED lifetime (Base UI `disabled={!mounted}`, not `open`) for
                                 // trap/return-focus — including an explicit `preventUnmountOnClose()` cycle after the
                                 // exit transition. Marker + isolation are additionally gated on `open` inside the
                                 // manager. Still suppressed while hover-opened.
-                                enabled: () => rootContext.present() && !rootContext.isHoverActive()
+                                enabled: () => rootContext.present() && !rootContext.isHoverActive(),
+                                openInteractionType: () => rootContext.openInteractionType(),
+                                closeInteractionType: () => rootContext.closeInteractionType()
                             };
                         })
                     ],
@@ -765,8 +802,6 @@ class RdxPopoverTrigger {
     constructor() {
         this.parentRootContext = injectRdxPopoverRootContext(true);
         this.elementRef = inject(ElementRef);
-        /** Pointer type of the most recent `pointerdown`, used to detect a touch open (ADR 0016 §3). */
-        this.lastPointerType = '';
         /**
          * Associates this trigger with a detached popover root.
          */
@@ -798,7 +833,14 @@ class RdxPopoverTrigger {
         this.triggerId = computed(() => this.id() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
         this.rootContext = computed(() => this.handle()?.context() ?? this.parentRootContext, ...(ngDevMode ? [{ debugName: "rootContext" }] : /* istanbul ignore next */ []));
         this.isOpen = computed(() => this.rootContext()?.isOpen() === true && this.rootContext()?.trigger() === this.elementRef.nativeElement, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-        this.isPressed = computed(() => this.isOpen() && this.rootContext()?.openChangeReason() === 'trigger-press', ...(ngDevMode ? [{ debugName: "isPressed" }] : /* istanbul ignore next */ []));
+        this.triggerInteraction = createRdxTriggerInteraction({
+            trigger: () => this.elementRef.nativeElement,
+            activeTrigger: () => this.rootContext()?.trigger(),
+            open: () => this.rootContext()?.isOpen() ?? false,
+            disabled: () => this.disabled(),
+            contentId: () => this.rootContext()?.contentId
+        });
+        this.isPressed = computed(() => this.triggerInteraction.isActive() && this.rootContext()?.openChangeReason() === 'trigger-press', ...(ngDevMode ? [{ debugName: "isPressed" }] : /* istanbul ignore next */ []));
         this.generatedId = injectId('rdx-popover-trigger-');
         effect((onCleanup) => {
             const handle = this.handle();
@@ -809,6 +851,19 @@ class RdxPopoverTrigger {
                 onCleanup(untracked(() => this.parentRootContext.registerTrigger(this.triggerId(), this.elementRef.nativeElement, () => this.payload())));
             }
         });
+        useTriggerFocusGuards({
+            trigger: () => this.elementRef.nativeElement,
+            close: (event) => this.rootContext()?.close('focus-out', event),
+            beforeContentFocusGuard: () => this.rootContext()?.beforeContentFocusGuard(),
+            contentId: () => this.rootContext()?.contentId,
+            enabled: () => this.triggerInteraction.isActive(),
+            popupElement: () => {
+                const contentId = this.rootContext()?.contentId;
+                return contentId
+                    ? this.elementRef.nativeElement.ownerDocument.getElementById(contentId)
+                    : null;
+            }
+        });
     }
     handleClick(event) {
         if (this.disabled()) {
@@ -816,7 +871,9 @@ class RdxPopoverTrigger {
         }
         // Record whether this open is a touch tap (ADR 0016 §3). `detail === 0` is a keyboard-activated
         // click (no preceding pointerdown), which must read non-touch regardless of the last pointer type.
-        this.rootContext()?.setOpenedByTouch(event.detail !== 0 && this.lastPointerType === 'touch');
+        const interactionType = this.triggerInteraction.clickInteractionType(event);
+        this.rootContext()?.setOpenedByTouch(interactionType === 'touch');
+        this.rootContext()?.setTriggerOpenInteractionType(interactionType);
         this.rootContext()?.setPointerDownOnTrigger(false);
         if (this.handle()) {
             this.handle().toggle(this.triggerId(), event);
@@ -840,14 +897,14 @@ class RdxPopoverTrigger {
         this.rootContext()?.cancelHoverOpen();
     }
     handlePointerDown(event) {
-        this.lastPointerType = event.pointerType;
+        this.triggerInteraction.recordPointerDown(event);
         this.rootContext()?.setPointerDownOnTrigger(true);
     }
     handlePointerUp() {
         this.rootContext()?.setPointerDownOnTrigger(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPopoverTrigger, isStandalone: true, selector: "button[rdxPopoverTrigger]", inputs: { handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null }, payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", 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: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)", "pointerenter": "handlePointerEnter($event)", "pointerleave": "handlePointerLeave($event)", "pointerdown": "handlePointerDown($event)", "pointerup": "handlePointerUp()", "pointercancel": "handlePointerUp()" }, properties: { "attr.aria-controls": "rootContext()?.contentId", "attr.aria-expanded": "isOpen()", "attr.aria-haspopup": "\"dialog\"", "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.data-popup-open": "isOpen() ? \"\" : undefined", "attr.data-pressed": "isPressed() ? \"\" : undefined", "attr.disabled": "disabled() ? \"\" : undefined", "id": "triggerId()" } }, hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPopoverTrigger, isStandalone: true, selector: "button[rdxPopoverTrigger]", inputs: { handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null }, payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", 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: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)", "pointerenter": "handlePointerEnter($event)", "pointerleave": "handlePointerLeave($event)", "pointerdown": "handlePointerDown($event)", "pointerup": "handlePointerUp()", "pointercancel": "handlePointerUp()" }, properties: { "attr.aria-controls": "rootContext()?.contentId", "attr.aria-expanded": "triggerInteraction.ariaExpanded()", "attr.aria-haspopup": "\"dialog\"", "attr.data-state": "triggerInteraction.dataState()", "attr.data-popup-open": "triggerInteraction.dataPopupOpen()", "attr.data-pressed": "isPressed() ? \"\" : undefined", "attr.disabled": "triggerInteraction.disabled() ? \"\" : undefined", "id": "triggerId()" } }, hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverTrigger, decorators: [{
             type: Directive,
@@ -857,12 +914,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     host: {
                         type: 'button',
                         '[attr.aria-controls]': 'rootContext()?.contentId',
-                        '[attr.aria-expanded]': 'isOpen()',
+                        '[attr.aria-expanded]': 'triggerInteraction.ariaExpanded()',
                         '[attr.aria-haspopup]': '"dialog"',
-                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
-                        '[attr.data-popup-open]': 'isOpen() ? "" : undefined',
+                        '[attr.data-state]': 'triggerInteraction.dataState()',
+                        '[attr.data-popup-open]': 'triggerInteraction.dataPopupOpen()',
                         '[attr.data-pressed]': 'isPressed() ? "" : undefined',
-                        '[attr.disabled]': 'disabled() ? "" : undefined',
+                        '[attr.disabled]': 'triggerInteraction.disabled() ? "" : undefined',
                         '[id]': 'triggerId()',
                         '(click)': 'handleClick($event)',
                         '(pointerenter)': 'handlePointerEnter($event)',