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

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

@@ -1,16 +1,15 @@
 import * as i0 from '@angular/core';
 import { inject, model, signal, computed, ElementRef, input, booleanAttribute, output, untracked, effect, Directive, InjectionToken, Injector, DestroyRef, afterNextRender, linkedSignal, isDevMode, forwardRef } from '@angular/core';
 import * as i3 from '@radix-ng/primitives/core';
-import { isEqual, getActiveElement, createContext, createFloatingRootContext, useTransitionStatus, isNullish, provideFloatingTree, provideFloatingRootContext, injectId, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useListHighlight, useAnchoredScrollLock, RdxFloatingNodeRegistration, handleAndDispatchCustomEvent, rdxDevError, setupInternalBackdrop } from '@radix-ng/primitives/core';
+import { isEqual, getActiveElement, createContext, injectId, createFloatingRootContext, useTransitionStatus, isNullish, createCancelableChangeEventDetails, provideFloatingTree, provideFloatingRootContext, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useListHighlight, useAnchoredScrollLock, RdxFloatingNodeRegistration, handleAndDispatchCustomEvent, rdxDevError, setupInternalBackdrop } from '@radix-ng/primitives/core';
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
-import { getInteractionTypeFromEvent } from '@radix-ng/primitives/floating-focus-manager';
+import * as i2 from '@radix-ng/primitives/floating-focus-manager';
+import { getInteractionTypeFromEvent, provideFloatingFocusManagerConfig, RdxFloatingFocusManager, createRdxTriggerInteraction } from '@radix-ng/primitives/floating-focus-manager';
 import * as i1 from '@radix-ng/primitives/popper';
 import { RdxPopper, RdxPopperContent, RdxPopperContentWrapper, legacyPopperVars, provideRdxPopperContentWrapper, provideRdxPopperContentConfig, RdxPopperAnchor } from '@radix-ng/primitives/popper';
 import * as i4 from '@radix-ng/primitives/collection';
 import { RdxCollectionProvider, RdxCollectionItem } from '@radix-ng/primitives/collection';
 import { RdxDismiss } from '@radix-ng/primitives/dismissable-layer';
-import * as i2 from '@radix-ng/primitives/focus-scope';
-import { RdxFocusScope } from '@radix-ng/primitives/focus-scope';
 import * as i1$1 from '@radix-ng/primitives/portal';
 import { RdxPortalPresence } from '@radix-ng/primitives/portal';
 import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
@@ -53,24 +52,13 @@ function focusFirst(candidates) {
     }
 }
 
-function createChangeEventDetails(reason, event) {
-    let canceled = false;
-    return {
-        reason,
-        event,
-        cancel: () => {
-            canceled = true;
-        },
-        isCanceled: () => canceled
-    };
-}
 const context$2 = () => {
     const context = inject(RdxSelectRoot);
     return {
         triggerElement: context.triggerElement,
         valueElement: context.valueElement,
         triggerPointerDownPosRef: context.triggerPointerDownPosRef,
-        contentId: '',
+        contentId: context.contentId,
         dir: context.dir,
         value: context.value,
         multiple: context.multiple,
@@ -113,6 +101,7 @@ const context$2 = () => {
 const [injectSelectRootContext, provideSelectRootContext] = createContext('RdxSelectRootContext', 'components/select');
 class RdxSelectRoot {
     constructor() {
+        this.contentId = injectId('rdx-select-content-');
         this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* 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 */ []));
@@ -212,7 +201,7 @@ class RdxSelectRoot {
                 return [...array];
             })()
             : value;
-        const eventDetails = createChangeEventDetails(reason, event);
+        const { eventDetails } = createCancelableChangeEventDetails(reason, event, this.triggerElement() ?? undefined);
         this.onValueChange.emit({ value: nextValue, eventDetails });
         if (eventDetails.isCanceled()) {
             return false;
@@ -228,7 +217,7 @@ class RdxSelectRoot {
     setOpen(open, reason = 'none', event) {
         const resolvedEvent = event ?? new Event('select.open-change');
         const interactionType = getInteractionTypeFromEvent(event);
-        const eventDetails = createChangeEventDetails(reason, resolvedEvent);
+        const { eventDetails } = createCancelableChangeEventDetails(reason, resolvedEvent, this.triggerElement() ?? undefined);
         this.onOpenChange.emit({ open, eventDetails });
         if (eventDetails.isCanceled()) {
             return false;
@@ -498,20 +487,7 @@ class RdxSelectPopup {
             onPointerDownOutside: (event) => this.pointerDownOutside.emit(event),
             onDismiss: (reason, event) => this.rootContext.onOpenChange(false, reason === 'escape-key' ? 'escape-key' : reason === 'focus-outside' ? 'focus-out' : 'outside-press', event)
         });
-        const focusScope = inject(RdxFocusScope);
         afterNextRender(() => {
-            focusScope.unmountAutoFocus.subscribe((event) => {
-                if (event.defaultPrevented)
-                    return;
-                this.rootContext.triggerElement()?.focus({ preventScroll: true });
-                event.preventDefault();
-            });
-            // Focus the popup itself (not an item) — the listbox is the focus owner; items are
-            // navigated virtually via aria-activedescendant.
-            focusScope.mountAutoFocus.subscribe((event) => {
-                event.preventDefault();
-                this.content()?.focus({ preventScroll: true });
-            });
             // The popup is now the listbox host itself (no longer the positioner's first child).
             this.content.set(this.currentElement.nativeElement);
         });
@@ -632,14 +608,51 @@ class RdxSelectPopup {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectPopup, isStandalone: true, selector: "[rdxSelectPopup]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside" }, host: { attributes: { "role": "listbox", "tabindex": "-1" }, listeners: { "keydown": "handleKeyDown($event)" }, properties: { "id": "rootContext.contentId", "attr.aria-activedescendant": "highlight.activeId()", "attr.aria-multiselectable": "rootContext.multiple() ? \"true\" : undefined", "attr.data-state": "rootContext.open() ? \"open\" : \"closed\"", "attr.data-open": "rootContext.open() ? \"\" : undefined", "attr.data-closed": "rootContext.open() ? undefined : \"\"", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "dir": "rootContext.dir()", "style": "{\n            display: 'flex',\n            flexDirection: 'column',\n            outline: 'none'\n        }" } }, providers: [provideSelectPopupContext(context$1)], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFocusScope }, { directive: i3.RdxFloatingNodeRegistration }, { directive: i4.RdxCollectionProvider }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectPopup, isStandalone: true, selector: "[rdxSelectPopup]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside" }, host: { attributes: { "role": "listbox", "tabindex": "-1" }, listeners: { "keydown": "handleKeyDown($event)" }, properties: { "id": "rootContext.contentId", "attr.aria-activedescendant": "highlight.activeId()", "attr.aria-multiselectable": "rootContext.multiple() ? \"true\" : undefined", "attr.data-state": "rootContext.open() ? \"open\" : \"closed\"", "attr.data-open": "rootContext.open() ? \"\" : undefined", "attr.data-closed": "rootContext.open() ? undefined : \"\"", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "dir": "rootContext.dir()", "style": "{\n            display: 'flex',\n            flexDirection: 'column',\n            outline: 'none'\n        }" } }, providers: [
+            provideSelectPopupContext(context$1),
+            provideFloatingFocusManagerConfig(() => {
+                const rootContext = injectSelectRootContext();
+                const host = inject(ElementRef).nativeElement;
+                return {
+                    modal: () => false,
+                    enabled: () => rootContext.open() || rootContext.transitionStatus() === 'ending',
+                    closeOnFocusOut: () => false,
+                    // The listbox owns DOM focus; items are navigated virtually through aria-activedescendant.
+                    initialFocus: () => host,
+                    restoreFocus: () => true,
+                    openInteractionType: () => rootContext.openInteractionType(),
+                    closeInteractionType: () => rootContext.closeInteractionType()
+                };
+            })
+        ], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFloatingFocusManager, inputs: ["returnFocus", "finalFocus"] }, { directive: i3.RdxFloatingNodeRegistration }, { directive: i4.RdxCollectionProvider }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPopup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxSelectPopup]',
-                    hostDirectives: [RdxPopperContent, RdxFocusScope, RdxFloatingNodeRegistration, RdxCollectionProvider],
-                    providers: [provideSelectPopupContext(context$1)],
+                    hostDirectives: [
+                        RdxPopperContent,
+                        { directive: RdxFloatingFocusManager, inputs: ['returnFocus: finalFocus'] },
+                        RdxFloatingNodeRegistration,
+                        RdxCollectionProvider
+                    ],
+                    providers: [
+                        provideSelectPopupContext(context$1),
+                        provideFloatingFocusManagerConfig(() => {
+                            const rootContext = injectSelectRootContext();
+                            const host = inject(ElementRef).nativeElement;
+                            return {
+                                modal: () => false,
+                                enabled: () => rootContext.open() || rootContext.transitionStatus() === 'ending',
+                                closeOnFocusOut: () => false,
+                                // The listbox owns DOM focus; items are navigated virtually through aria-activedescendant.
+                                initialFocus: () => host,
+                                restoreFocus: () => true,
+                                openInteractionType: () => rootContext.openInteractionType(),
+                                closeInteractionType: () => rootContext.closeInteractionType()
+                            };
+                        })
+                    ],
                     host: {
                         role: 'listbox',
                         tabindex: '-1',
@@ -978,6 +991,13 @@ class RdxSelectTrigger {
         this.id = input(injectId('rdx-select-trigger-'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.isDisabled = computed(() => this.rootContext.disabled() || this.disabled() || Boolean(this.fieldRootContext?.disabledState()), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.triggerInteraction = createRdxTriggerInteraction({
+            trigger: () => this.elementRef.nativeElement,
+            activeTrigger: () => this.rootContext.triggerElement(),
+            open: () => this.rootContext.open(),
+            disabled: () => this.isDisabled(),
+            contentId: () => this.rootContext.contentId
+        });
         this.invalidState = computed(() => Boolean(this.fieldRootContext?.invalidState()), ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.requiredState = computed(() => Boolean(this.fieldRootContext?.requiredState()), ...(ngDevMode ? [{ debugName: "requiredState" }] : /* istanbul ignore next */ []));
         this.filledState = computed(() => !this.rootContext.isEmptyModelValue() || Boolean(this.fieldRootContext?.filledState()), ...(ngDevMode ? [{ debugName: "filledState" }] : /* istanbul ignore next */ []));
@@ -1020,10 +1040,14 @@ class RdxSelectTrigger {
         // We force `focus` in this case. Note: this doesn't create any other side-effect
         // because we are preventing default in `onPointerDown` so effectively
         // this only runs for a label 'click'
+        if (this.rootContext.open()) {
+            return;
+        }
         event?.currentTarget?.focus();
     }
     onPointerDown(event) {
         const pointerEvent = event;
+        this.triggerInteraction.recordPointerDown(pointerEvent);
         if (pointerEvent.pointerType === 'touch')
             return event.preventDefault();
         // prevent implicit pointer capture
@@ -1063,7 +1087,7 @@ class RdxSelectTrigger {
         this.fieldRootContext?.setTouched(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectTrigger, isStandalone: true, selector: "button[rdxSelectTrigger]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "type": "button" }, listeners: { "click": "onClickHandler($event)", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp($event)", "keydown": "onKeydown($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.id": "id()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "invalidState() ? \"true\" : undefined", "attr.aria-required": "requiredState() ? \"true\" : undefined", "attr.disabled": "isDisabled() ? \"\" : undefined", "dir": "rootContext.dir()", "attr.data-state": "rootContext.open() ? \"open\" : \"closed\"", "attr.data-popup-open": "dataAttr(rootContext.open())", "attr.data-placeholder": "dataAttr(rootContext.isEmptyModelValue())", "attr.data-disabled": "dataAttr(isDisabled())", "attr.data-invalid": "dataAttr(invalidState())", "attr.data-valid": "dataAttr(!invalidState())", "attr.data-required": "dataAttr(requiredState())", "attr.data-filled": "dataAttr(filledState())", "attr.data-focused": "dataAttr(focusedState())" } }, hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectTrigger, isStandalone: true, selector: "button[rdxSelectTrigger]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "type": "button" }, listeners: { "click": "onClickHandler($event)", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp($event)", "keydown": "onKeydown($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.id": "id()", "attr.aria-describedby": "describedBy()", "attr.aria-controls": "triggerInteraction.ariaControls()", "attr.aria-invalid": "invalidState() ? \"true\" : undefined", "attr.aria-required": "requiredState() ? \"true\" : undefined", "attr.disabled": "isDisabled() ? \"\" : undefined", "dir": "rootContext.dir()", "attr.data-state": "triggerInteraction.dataState()", "attr.data-popup-open": "triggerInteraction.dataPopupOpen()", "attr.data-placeholder": "dataAttr(rootContext.isEmptyModelValue())", "attr.data-disabled": "dataAttr(isDisabled())", "attr.data-invalid": "dataAttr(invalidState())", "attr.data-valid": "dataAttr(!invalidState())", "attr.data-required": "dataAttr(requiredState())", "attr.data-filled": "dataAttr(filledState())", "attr.data-focused": "dataAttr(focusedState())" } }, hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectTrigger, decorators: [{
             type: Directive,
@@ -1075,12 +1099,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         type: 'button',
                         '[attr.id]': 'id()',
                         '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.aria-controls]': 'triggerInteraction.ariaControls()',
                         '[attr.aria-invalid]': 'invalidState() ? "true" : undefined',
                         '[attr.aria-required]': 'requiredState() ? "true" : undefined',
                         '[attr.disabled]': 'isDisabled() ? "" : undefined',
                         '[dir]': 'rootContext.dir()',
-                        '[attr.data-state]': 'rootContext.open() ? "open" : "closed"',
-                        '[attr.data-popup-open]': 'dataAttr(rootContext.open())',
+                        '[attr.data-state]': 'triggerInteraction.dataState()',
+                        '[attr.data-popup-open]': 'triggerInteraction.dataPopupOpen()',
                         '[attr.data-placeholder]': 'dataAttr(rootContext.isEmptyModelValue())',
                         '[attr.data-disabled]': 'dataAttr(isDisabled())',
                         '[attr.data-invalid]': 'dataAttr(invalidState())',