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

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

@@ -7,8 +7,8 @@ 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 * as i4 from '@radix-ng/primitives/composite';
+import { RdxCompositeList, RdxCompositeListItem } from '@radix-ng/primitives/composite';
 import { RdxDismiss } from '@radix-ng/primitives/dismissable-layer';
 import * as i1$1 from '@radix-ng/primitives/portal';
 import { RdxPortalPresence } from '@radix-ng/primitives/portal';
@@ -341,9 +341,15 @@ const context$1 = () => {
         isPositioned: context.isPositioned,
         selectedItem: context.selectedItem,
         selectedItemText: context.selectedItemText,
+        items: context.items,
         highlightedItem: context.highlight.highlightedItem,
-        isHighlighted: (item) => context.highlight.highlightedItem() === item,
-        highlightItem: (item) => context.highlight.set(item),
+        isHighlighted: (element) => context.highlight.highlightedItem()?.element === element,
+        highlightItem: (element) => {
+            const item = context.items().find((item) => item.element === element);
+            if (item) {
+                context.highlight.set(item);
+            }
+        },
         isKeyboardActive: () => context.isKeyboardActive(),
         setKeyboardActive: (value) => context.setKeyboardActive(value),
         onViewportChange: (node) => {
@@ -391,23 +397,23 @@ class RdxSelectPopup {
         this.floatingContext = inject(RDX_FLOATING_ROOT_CONTEXT);
         this.registration = inject(RDX_FLOATING_REGISTRATION, { optional: true });
         this.currentElement = inject(ElementRef);
-        this.collection = inject(RdxCollectionProvider);
+        this.compositeList = inject(RdxCompositeList, { self: true });
         this.injector = inject(Injector);
         this.rootContext = injectSelectRootContext();
         /**
          * The collected items (DOM order). Exposed so the `item-aligned` positioner — now the popup's
-         * **ancestor** — can read them without injecting {@link RdxCollectionProvider} (which the popup
-         * provides as a descendant, so an upward `inject` would not find it).
+         * **ancestor** — can read them without injecting the composite list (which the popup provides as
+         * a descendant, so an upward `inject` would not find it).
          */
-        this.items = this.collection.items;
+        this.items = computed(() => this.compositeList.items(), ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         /**
          * Highlight-model navigation over the collected items (DOM order). `loop` is disabled so arrow
          * navigation stops at the first / last item instead of wrapping around — matching native
          * `<select>` behavior.
          */
         this.highlight = useListHighlight({
-            items: this.collection.items,
-            isNavigable: (item) => !item.disabled(),
+            items: this.items,
+            isNavigable: (item) => !item.metadata()?.disabled,
             getId: (item) => item.element.id,
             loop: signal(false),
             injector: this.injector
@@ -420,6 +426,7 @@ class RdxSelectPopup {
         // Tracks whether the last interaction was the keyboard, so the highlight doesn't jump to an item
         // the cursor happens to rest on when arrow-key navigation scrolls the list.
         this.keyboardActive = false;
+        this.hasHighlightedOpen = false;
         /**
          * Event handler called when the escape key is down.
          * Can be prevented.
@@ -438,9 +445,8 @@ class RdxSelectPopup {
          */
         this.positioner = inject(RDX_SELECT_POSITIONER_TOKEN, { optional: true });
         this.positioner?.placed.subscribe(() => {
-            this.highlightSelectedItem();
-            this.scrollSelectedIntoView();
             this.isPositioned.set(true);
+            this.highlightSelectedItemAfterPositioned();
             // In Popper mode the popup lives inside the positioner, which stays `visibility: hidden`
             // until it is placed — so the mount-time `mountAutoFocus` call no-ops on the hidden
             // listbox and keyboard navigation never starts. Focus it now that it is visible (skip if
@@ -450,6 +456,16 @@ class RdxSelectPopup {
                 popup.focus({ preventScroll: true });
             }
         });
+        effect(() => {
+            if (!this.rootContext.open()) {
+                this.hasHighlightedOpen = false;
+                return;
+            }
+            if (!this.isPositioned() || this.hasHighlightedOpen) {
+                return;
+            }
+            this.highlightSelectedItemAfterPositioned();
+        });
         // Keep the highlighted item in view during keyboard navigation. The highlight model is pure
         // state (it never moves DOM focus or scrolls), so without this the highlight can move past the
         // visible viewport — behind the scroll buttons. Only keyboard moves scroll; hover highlights
@@ -550,8 +566,8 @@ class RdxSelectPopup {
     }
     /** Highlights the selected item (or the first enabled one) when the popup opens. */
     highlightSelectedItem() {
-        const items = this.collection.items();
-        const selected = items.find((item) => valueComparator(this.rootContext.value(), item.value(), this.rootContext.isItemEqualToValue()));
+        const items = this.items();
+        const selected = items.find((item) => valueComparator(this.rootContext.value(), item.metadata()?.value, this.rootContext.isItemEqualToValue()));
         if (selected) {
             this.highlight.set(selected);
         }
@@ -559,6 +575,14 @@ class RdxSelectPopup {
             this.highlight.first();
         }
     }
+    highlightSelectedItemAfterPositioned() {
+        if (this.items().length === 0) {
+            return;
+        }
+        this.highlightSelectedItem();
+        this.scrollSelectedIntoView();
+        this.hasHighlightedOpen = true;
+    }
     scrollSelectedIntoView() {
         this.selectedItem()?.scrollIntoView?.({ block: 'nearest' });
     }
@@ -580,8 +604,9 @@ class RdxSelectPopup {
         if (SELECTION_KEYS.includes(keyEvent.key)) {
             event.preventDefault();
             const item = this.highlight.highlightedItem();
-            if (item && !item.disabled()) {
-                this.rootContext.onValueChange(item.value(), 'item-press', event);
+            const metadata = item?.metadata();
+            if (item && metadata && !metadata.disabled) {
+                this.rootContext.onValueChange(metadata.value, 'item-press', event);
                 if (!this.rootContext.multiple()) {
                     this.rootContext.onOpenChange(false, 'item-press', event);
                 }
@@ -624,7 +649,7 @@ class RdxSelectPopup {
                     closeInteractionType: () => rootContext.closeInteractionType()
                 };
             })
-        ], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFloatingFocusManager, inputs: ["returnFocus", "finalFocus"] }, { directive: i3.RdxFloatingNodeRegistration }, { directive: i4.RdxCollectionProvider }], ngImport: i0 }); }
+        ], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFloatingFocusManager, inputs: ["returnFocus", "finalFocus"] }, { directive: i3.RdxFloatingNodeRegistration }, { directive: i4.RdxCompositeList }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPopup, decorators: [{
             type: Directive,
@@ -634,7 +659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         RdxPopperContent,
                         { directive: RdxFloatingFocusManager, inputs: ['returnFocus: finalFocus'] },
                         RdxFloatingNodeRegistration,
-                        RdxCollectionProvider
+                        RdxCompositeList
                     ],
                     providers: [
                         provideSelectPopupContext(context$1),
@@ -692,7 +717,7 @@ class RdxSelectItem {
     constructor() {
         this.rootContext = injectSelectRootContext();
         this.contentContext = injectSelectPopupContext();
-        this.collectionItem = inject(RdxCollectionItem);
+        this.listItem = inject(RdxCompositeListItem, { self: true });
         this.currentElement = inject(ElementRef);
         this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
         this.textValue = input('', ...(ngDevMode ? [{ debugName: "textValue" }] : /* istanbul ignore next */ []));
@@ -700,7 +725,7 @@ class RdxSelectItem {
         this.textValue$ = linkedSignal(this.textValue, ...(ngDevMode ? [{ debugName: "textValue$" }] : /* istanbul ignore next */ []));
         this.isSelected = computed(() => valueComparator(this.rootContext.value(), this.value(), this.rootContext.isItemEqualToValue()), ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
         /** Highlighted via the highlight model (keyboard / hover), not DOM focus. */
-        this.isHighlighted = computed(() => this.contentContext.isHighlighted(this.collectionItem), ...(ngDevMode ? [{ debugName: "isHighlighted" }] : /* istanbul ignore next */ []));
+        this.isHighlighted = computed(() => this.contentContext.isHighlighted(this.currentElement.nativeElement), ...(ngDevMode ? [{ debugName: "isHighlighted" }] : /* istanbul ignore next */ []));
         /** Item id, referenced by the popup's `aria-activedescendant`. */
         this.id = injectId('rdx-select-item-');
         this.textId = injectId('rdx-select-item-text-');
@@ -708,6 +733,13 @@ class RdxSelectItem {
             this.contentContext.itemRefCallback(this.currentElement.nativeElement, this.value(), this.disabled());
         });
         this.SELECT_SELECT = 'select.select';
+        effect(() => {
+            this.listItem.setMetadata({
+                value: this.value(),
+                disabled: this.disabled(),
+                textValue: this.textValue$()
+            });
+        });
     }
     onPointerUp(event) {
         if (event.defaultPrevented)
@@ -738,7 +770,7 @@ class RdxSelectItem {
             return;
         }
         if (!this.disabled()) {
-            this.contentContext.highlightItem(this.collectionItem);
+            this.contentContext.highlightItem(this.currentElement.nativeElement);
         }
     }
     handleKeyDown(event) {
@@ -749,7 +781,7 @@ class RdxSelectItem {
             this.onPointerUp(keyEvent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectItem, isStandalone: true, selector: "[rdxSelectItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, textValue: { classPropertyName: "textValue", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "pointerup": "onPointerUp($event)", "pointerleave": "onPointerLeave($event)", "pointermove": "onPointerMove($event)" }, properties: { "attr.id": "id", "attr.aria-selected": "isSelected()", "attr.aria-disabled": "disabled() ? \"true\" : undefined", "attr.data-state": "isSelected() ? \"checked\" : \"unchecked\"", "attr.data-selected": "isSelected() ? \"\" : undefined", "attr.data-highlighted": "isHighlighted() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined" } }, providers: [provideSelectItemContext(context)], exportAs: ["rdxSelectItem"], hostDirectives: [{ directive: i4.RdxCollectionItem, inputs: ["value", "value", "disabled", "disabled"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectItem, isStandalone: true, selector: "[rdxSelectItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, textValue: { classPropertyName: "textValue", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "pointerup": "onPointerUp($event)", "pointerleave": "onPointerLeave($event)", "pointermove": "onPointerMove($event)" }, properties: { "attr.id": "id", "attr.aria-selected": "isSelected()", "attr.aria-disabled": "disabled() ? \"true\" : undefined", "attr.data-state": "isSelected() ? \"checked\" : \"unchecked\"", "attr.data-selected": "isSelected() ? \"\" : undefined", "attr.data-highlighted": "isHighlighted() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined" } }, providers: [provideSelectItemContext(context)], exportAs: ["rdxSelectItem"], hostDirectives: [{ directive: i4.RdxCompositeListItem }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectItem, decorators: [{
             type: Directive,
@@ -757,12 +789,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: '[rdxSelectItem]',
                     exportAs: 'rdxSelectItem',
                     providers: [provideSelectItemContext(context)],
-                    hostDirectives: [
-                        {
-                            directive: RdxCollectionItem,
-                            inputs: ['value', 'disabled']
-                        }
-                    ],
+                    hostDirectives: [RdxCompositeListItem],
                     host: {
                         role: 'option',
                         '[attr.id]': 'id',
@@ -777,7 +804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '(pointermove)': 'onPointerMove($event)'
                     }
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], textValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "textValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], textValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "textValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class RdxSelectItemIndicator {
     constructor() {
@@ -1040,6 +1067,9 @@ 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) {