@radix-ng/primitives 1.0.9 → 1.1.0

package/types/radix-ng-primitives-combobox.d.ts

@@ -92,6 +92,8 @@ interface ComboboxEngineConfig {
     items: Signal<readonly AcceptableValue[] | undefined>;
     /** Filter: `undefined` → default contains; a function → custom; `null` → built-in filtering off. */
     filter: Signal<ComboboxFilter | null | undefined>;
+    /** Locale for the default `contains` collator; `undefined` → the runtime's default locale. */
+    locale: Signal<Intl.LocalesArgument>;
     /** Maximum number of matching items to show (`-1` = no limit). */
     limit: Signal<number>;
     /** Whether the list is a 2D grid (row/column arrow navigation). Defaults off for plain lists. */
@@ -226,6 +228,8 @@ declare const context: () => {
     readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     requiredState: _angular_core.Signal<boolean>;
     invalidState: _angular_core.Signal<boolean>;
+    pendingState: _angular_core.Signal<boolean>;
+    validState: _angular_core.Signal<boolean | null>;
     touchedState: _angular_core.Signal<boolean>;
     dirtyState: _angular_core.Signal<boolean>;
     openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -301,6 +305,8 @@ declare const injectComboboxRootContext: _radix_ng_primitives_core.InjectContext
     readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     requiredState: _angular_core.Signal<boolean>;
     invalidState: _angular_core.Signal<boolean>;
+    pendingState: _angular_core.Signal<boolean>;
+    validState: _angular_core.Signal<boolean | null>;
     touchedState: _angular_core.Signal<boolean>;
     dirtyState: _angular_core.Signal<boolean>;
     openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -375,6 +381,8 @@ declare const provideComboboxRootContext: (useFactory: () => {
     readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     requiredState: _angular_core.Signal<boolean>;
     invalidState: _angular_core.Signal<boolean>;
+    pendingState: _angular_core.Signal<boolean>;
+    validState: _angular_core.Signal<boolean | null>;
     touchedState: _angular_core.Signal<boolean>;
     dirtyState: _angular_core.Signal<boolean>;
     openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -514,6 +522,8 @@ declare class RdxComboboxRoot extends RdxFormUiControlBase implements ControlVal
      * - `null`: built-in filtering disabled (the consumer controls which items exist).
      */
     readonly filter: _angular_core.InputSignal<ComboboxFilter | null | undefined>;
+    /** Locale for the default `contains` filter's string comparison. Defaults to the runtime locale. */
+    readonly locale: _angular_core.InputSignal<Intl.LocalesArgument>;
     /** Maximum number of matching items to show. `-1` (default) means no limit. */
     readonly limit: _angular_core.InputSignalWithTransform<number, unknown>;
     /**
@@ -557,6 +567,8 @@ declare class RdxComboboxRoot extends RdxFormUiControlBase implements ControlVal
     readonly requiredState: _angular_core.Signal<boolean>;
     /** @ignore */
     readonly invalidState: _angular_core.Signal<boolean>;
+    readonly pendingState: _angular_core.Signal<boolean>;
+    readonly validState: _angular_core.Signal<boolean | null>;
     /** @ignore */
     readonly touchedState: _angular_core.Signal<boolean>;
     /** @ignore */
@@ -648,7 +660,7 @@ declare class RdxComboboxRoot extends RdxFormUiControlBase implements ControlVal
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxRoot, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxRoot, "[rdxComboboxRoot]", ["rdxComboboxRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "inputValue": { "alias": "inputValue"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "multipleInput": { "alias": "multiple"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "fillInputOnItemPress": { "alias": "fillInputOnItemPress"; "required": false; "isSignal": true; }; "dirInput": { "alias": "dir"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "loopFocus": { "alias": "loopFocus"; "required": false; "isSignal": true; }; "autoHighlight": { "alias": "autoHighlight"; "required": false; "isSignal": true; }; "highlightItemOnHover": { "alias": "highlightItemOnHover"; "required": false; "isSignal": true; }; "keepHighlight": { "alias": "keepHighlight"; "required": false; "isSignal": true; }; "openOnInputClick": { "alias": "openOnInputClick"; "required": false; "isSignal": true; }; "modal": { "alias": "modal"; "required": false; "isSignal": true; }; "submitOnItemClick": { "alias": "submitOnItemClick"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "virtualized": { "alias": "virtualized"; "required": false; "isSignal": true; }; "grid": { "alias": "grid"; "required": false; "isSignal": true; }; "isItemEqualToValue": { "alias": "isItemEqualToValue"; "required": false; "isSignal": true; }; "itemToStringLabel": { "alias": "itemToStringLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "inputValue": "inputValueChange"; "open": "openChange"; "onValueChange": "onValueChange"; "onInputValueChange": "onInputValueChange"; "onOpenChange": "onOpenChange"; "onItemHighlighted": "onItemHighlighted"; "onOpenChangeComplete": "onOpenChangeComplete"; }, never, never, true, [{ directive: typeof i1.RdxPopper; inputs: {}; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxRoot, "[rdxComboboxRoot]", ["rdxComboboxRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "inputValue": { "alias": "inputValue"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "multipleInput": { "alias": "multiple"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "fillInputOnItemPress": { "alias": "fillInputOnItemPress"; "required": false; "isSignal": true; }; "dirInput": { "alias": "dir"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "loopFocus": { "alias": "loopFocus"; "required": false; "isSignal": true; }; "autoHighlight": { "alias": "autoHighlight"; "required": false; "isSignal": true; }; "highlightItemOnHover": { "alias": "highlightItemOnHover"; "required": false; "isSignal": true; }; "keepHighlight": { "alias": "keepHighlight"; "required": false; "isSignal": true; }; "openOnInputClick": { "alias": "openOnInputClick"; "required": false; "isSignal": true; }; "modal": { "alias": "modal"; "required": false; "isSignal": true; }; "submitOnItemClick": { "alias": "submitOnItemClick"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "virtualized": { "alias": "virtualized"; "required": false; "isSignal": true; }; "grid": { "alias": "grid"; "required": false; "isSignal": true; }; "isItemEqualToValue": { "alias": "isItemEqualToValue"; "required": false; "isSignal": true; }; "itemToStringLabel": { "alias": "itemToStringLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "inputValue": "inputValueChange"; "open": "openChange"; "onValueChange": "onValueChange"; "onInputValueChange": "onInputValueChange"; "onOpenChange": "onOpenChange"; "onItemHighlighted": "onItemHighlighted"; "onOpenChangeComplete": "onOpenChangeComplete"; }, never, never, true, [{ directive: typeof i1.RdxPopper; inputs: {}; outputs: {}; }]>;
 }
 
 /**
@@ -687,6 +699,8 @@ declare class RdxComboboxInput {
         readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
         requiredState: _angular_core.Signal<boolean>;
         invalidState: _angular_core.Signal<boolean>;
+        pendingState: _angular_core.Signal<boolean>;
+        validState: _angular_core.Signal<boolean | null>;
         touchedState: _angular_core.Signal<boolean>;
         dirtyState: _angular_core.Signal<boolean>;
         openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -752,7 +766,6 @@ declare class RdxComboboxInput {
     readonly id: _angular_core.InputSignal<string>;
     /** Marks the input as invalid independently of any Field state. */
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
-    protected readonly invalidState: _angular_core.Signal<boolean>;
     /**
      * Tri-state *displayed* validity: the enclosing Field's gated `validState` when inside a `rdxFieldRoot`
      * (so a field whose `validationMode` defers display (e.g. `onBlur`) keeps the input neutral until revealed), else the input's
@@ -809,6 +822,8 @@ declare class RdxComboboxInputGroup {
         readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
         requiredState: _angular_core.Signal<boolean>;
         invalidState: _angular_core.Signal<boolean>;
+        pendingState: _angular_core.Signal<boolean>;
+        validState: _angular_core.Signal<boolean | null>;
         touchedState: _angular_core.Signal<boolean>;
         dirtyState: _angular_core.Signal<boolean>;
         openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -929,6 +944,8 @@ declare class RdxComboboxTrigger {
         readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
         requiredState: _angular_core.Signal<boolean>;
         invalidState: _angular_core.Signal<boolean>;
+        pendingState: _angular_core.Signal<boolean>;
+        validState: _angular_core.Signal<boolean | null>;
         touchedState: _angular_core.Signal<boolean>;
         dirtyState: _angular_core.Signal<boolean>;
         openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -1030,6 +1047,8 @@ declare class RdxComboboxClear {
         readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
         requiredState: _angular_core.Signal<boolean>;
         invalidState: _angular_core.Signal<boolean>;
+        pendingState: _angular_core.Signal<boolean>;
+        validState: _angular_core.Signal<boolean | null>;
         touchedState: _angular_core.Signal<boolean>;
         dirtyState: _angular_core.Signal<boolean>;
         openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -1160,6 +1179,8 @@ declare class RdxComboboxBackdrop {
         readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
         requiredState: _angular_core.Signal<boolean>;
         invalidState: _angular_core.Signal<boolean>;
+        pendingState: _angular_core.Signal<boolean>;
+        validState: _angular_core.Signal<boolean | null>;
         touchedState: _angular_core.Signal<boolean>;
         dirtyState: _angular_core.Signal<boolean>;
         openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -1262,6 +1283,8 @@ declare class RdxComboboxPopup {
         readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
         requiredState: _angular_core.Signal<boolean>;
         invalidState: _angular_core.Signal<boolean>;
+        pendingState: _angular_core.Signal<boolean>;
+        validState: _angular_core.Signal<boolean | null>;
         touchedState: _angular_core.Signal<boolean>;
         dirtyState: _angular_core.Signal<boolean>;
         openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -1371,6 +1394,8 @@ declare class RdxComboboxList {
         readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
         requiredState: _angular_core.Signal<boolean>;
         invalidState: _angular_core.Signal<boolean>;
+        pendingState: _angular_core.Signal<boolean>;
+        validState: _angular_core.Signal<boolean | null>;
         touchedState: _angular_core.Signal<boolean>;
         dirtyState: _angular_core.Signal<boolean>;
         openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -1621,6 +1646,8 @@ declare class RdxComboboxEmpty {
         readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
         requiredState: _angular_core.Signal<boolean>;
         invalidState: _angular_core.Signal<boolean>;
+        pendingState: _angular_core.Signal<boolean>;
+        validState: _angular_core.Signal<boolean | null>;
         touchedState: _angular_core.Signal<boolean>;
         dirtyState: _angular_core.Signal<boolean>;
         openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;

package/types/radix-ng-primitives-composite.d.ts

@@ -77,14 +77,43 @@ declare const provideRdxCompositeListContext: (useFactory: () => RdxCompositeLis
  */
 declare class RdxCompositeList {
     readonly elementRef: ElementRef<HTMLElement>;
-    private readonly registeredItems;
+    /**
+     * Stable element → registration map. Kept as a plain (mutable) Map so a registration is an O(1)
+     * `set`/`delete` instead of re-creating the whole array on every mount — with N items each
+     * registering, an array copy per item is an O(n^2) mount. `registrationTick` is the reactive
+     * trigger: bumped on every register/unregister so `items` re-derives. Mirrors Base UI's composite
+     * list (stable map + `mapTick`).
+     */
+    private readonly registrations;
+    private readonly registrationTick;
+    /**
+     * Bumped when registered items are moved in the DOM without re-registering
+     * (e.g. an `@for` reorder that reuses views). Angular does not re-run the item
+     * registration effect on such moves, so `registeredItems` is unchanged and the
+     * document-order sort would go stale; a MutationObserver detects the move and
+     * bumps this tick to force `items` to re-sort. Mirrors Base UI's composite list.
+     */
+    private readonly reorderTick;
     /** Emits when the ordered item map changes. */
     readonly onMapChange: _angular_core.OutputEmitterRef<Map<HTMLElement, RdxCompositeMetadata>>;
     /** Items registered with this list, sorted in DOM order. */
     readonly items: _angular_core.Signal<RdxCompositeItemRegistration<RdxCompositeItemMetadata>[]>;
+    /**
+     * Element → document-order index. Depends only on `items()` (not on any item's metadata), so
+     * `indexOf` is an O(1) lookup and rebuilds only when the item set/order changes — the mount hot
+     * path where N items each read their index. Keeping metadata out of it avoids invalidating every
+     * item's index when a single item's metadata changes.
+     */
+    private readonly indexMap;
     /** Ordered metadata keyed by item element. */
     readonly itemMap: _angular_core.Signal<Map<HTMLElement, RdxCompositeMetadata>>;
     constructor();
+    /**
+     * Watches the smallest containers that bound the registered items and re-sorts
+     * when a move inverts their document order. Re-established whenever the item set
+     * changes; a no-op where `MutationObserver` is unavailable (SSR).
+     */
+    private observeItemReordering;
     registerItem<Metadata extends RdxCompositeItemMetadata>(item: RdxCompositeItemRegistration<Metadata>): () => void;
     indexOf(element: HTMLElement): number;
     elements(): HTMLElement[];
@@ -139,6 +168,8 @@ declare class RdxCompositeRoot {
     readonly items: _angular_core.Signal<_radix_ng_primitives_composite.RdxCompositeItemRegistration<_radix_ng_primitives_composite.RdxCompositeItemMetadata>[]>;
     readonly itemMap: _angular_core.Signal<Map<HTMLElement, RdxCompositeMetadata>>;
     constructor();
+    /** Move the roving tab stop to the first enabled item when the highlighted one is disabled. */
+    private moveHighlightOffDisabledItem;
     indexOf(element: HTMLElement): number;
     setOrientation(value: RdxCompositeOrientation): void;
     setLoopFocus(value: boolean): void;
@@ -163,9 +194,24 @@ declare const ACTIVE_COMPOSITE_ITEM = "data-composite-item-active";
 declare const ARROW_KEYS: Set<string>;
 declare const COMPOSITE_KEYS: Set<string>;
 declare const MODIFIER_KEYS: RdxCompositeModifierKey[];
+declare function compareNodeDocumentPosition(a: Node, b: Node): number;
 declare function sortByDocumentPosition<T extends {
     element: HTMLElement;
 }>(items: readonly T[]): T[];
+/**
+ * Smallest set of container elements whose child order can change the relative
+ * order of the given (already document-sorted) nodes. Observing each adjacent
+ * pair's common ancestor catches both direct item moves and wrapper moves at the
+ * boundary, mirroring Base UI's composite list observer.
+ */
+declare function getAdjacentNodeRoots(nodes: readonly Element[]): Set<Element>;
+/**
+ * Whether a batch of mutations moved a node (removed then re-added in the same
+ * batch, or reparented so a removed node is still connected) rather than a pure
+ * add/remove. Pure adds/removals re-sort through register/unregister and cannot
+ * change the relative order of the remaining items.
+ */
+declare function hasMovedNode(entries: readonly MutationRecord[]): boolean;
 declare function isModifierKeySet(event: KeyboardEvent, allowedModifierKeys: readonly RdxCompositeModifierKey[]): boolean;
 declare function isNativeTextInput(target: EventTarget | null): target is HTMLInputElement | HTMLTextAreaElement;
 declare function getCompositeNavigationKeys(orientation: RdxCompositeOrientation, dir: Direction): {
@@ -193,5 +239,5 @@ declare class RdxCompositeModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxCompositeModule>;
 }
 
-export { ACTIVE_COMPOSITE_ITEM, ARROW_KEYS, COMPOSITE_KEYS, MODIFIER_KEYS, RdxCompositeItem, RdxCompositeList, RdxCompositeListItem, RdxCompositeModule, RdxCompositeRoot, compositeImports, findNonDisabledListIndex, getCompositeNavigationKeys, getMaxListIndex, getMinListIndex, injectRdxCompositeListContext, injectRdxCompositeRootContext, isElementDisabled, isElementVisible, isIndexOutOfListBounds, isListIndexDisabled, isModifierKeySet, isNativeTextInput, provideRdxCompositeListContext, provideRdxCompositeRootContext, scrollIntoViewIfNeeded, shouldKeepNativeTextInputBehavior, sortByDocumentPosition };
+export { ACTIVE_COMPOSITE_ITEM, ARROW_KEYS, COMPOSITE_KEYS, MODIFIER_KEYS, RdxCompositeItem, RdxCompositeList, RdxCompositeListItem, RdxCompositeModule, RdxCompositeRoot, compareNodeDocumentPosition, compositeImports, findNonDisabledListIndex, getAdjacentNodeRoots, getCompositeNavigationKeys, getMaxListIndex, getMinListIndex, hasMovedNode, injectRdxCompositeListContext, injectRdxCompositeRootContext, isElementDisabled, isElementVisible, isIndexOutOfListBounds, isListIndexDisabled, isModifierKeySet, isNativeTextInput, provideRdxCompositeListContext, provideRdxCompositeRootContext, scrollIntoViewIfNeeded, shouldKeepNativeTextInputBehavior, sortByDocumentPosition };
 export type { RdxCompositeItemMetadata, RdxCompositeItemRegistration, RdxCompositeListContext, RdxCompositeMetadata, RdxCompositeModifierKey, RdxCompositeOrientation, RdxCompositeRootContext };