@radix-ng/primitives 0.51.0 → 1.0.0-beta.1

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

@@ -1,40 +1,44 @@
-import * as i0 from '@angular/core';
-import { Signal, WritableSignal, InjectionToken } from '@angular/core';
-import * as _radix_ng_primitives_collection from '@radix-ng/primitives/collection';
+import * as _angular_core from '@angular/core';
 
-interface CollectionItemRecord {
-    ref: HTMLElement;
-    value?: any;
-}
-interface CollectionContext {
-    collectionElementRef: Signal<HTMLElement | null>;
-    itemMap: WritableSignal<Map<HTMLElement, CollectionItemRecord>>;
-}
-declare const COLLECTION_CONTEXT_TOKEN: InjectionToken<CollectionContext>;
-
-declare class RdxCollectionItem {
-    private readonly hostElementRef;
-    private readonly context;
-    private readonly destroyRef;
-    readonly value: i0.InputSignal<any>;
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxCollectionItem, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxCollectionItem, "[rdxCollectionItem]", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+/**
+ * Marks an element as a member of a collection. Items are discovered by the
+ * {@link RdxCollectionProvider} via `contentChildren`, so registration is automatic — no manual
+ * book-keeping or marker attributes are needed.
+ *
+ * @group Components
+ */
+declare class RdxCollectionItem<T = unknown> {
+    /** The host element of the item, read straight off the instance. */
+    readonly element: HTMLElement;
+    /** Arbitrary data associated with the item. */
+    readonly value: _angular_core.InputSignal<T | undefined>;
+    /** Whether the item is disabled. Disabled items are excluded from {@link RdxCollectionProvider.enabledItems}. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCollectionItem<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCollectionItem<any>, "[rdxCollectionItem]", ["rdxCollectionItem"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class RdxCollectionProvider implements CollectionContext {
-    private readonly elementRef;
-    readonly collectionElementRef: WritableSignal<HTMLElement | null>;
-    readonly itemMap: WritableSignal<Map<HTMLElement, any>>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxCollectionProvider, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxCollectionProvider, "[rdxCollectionProvider]", never, {}, {}, never, never, true, never>;
+/**
+ * Collects {@link RdxCollectionItem} descendants in DOM order, reactively, using Angular's
+ * `contentChildren`. Matches host directives too, so items composed via `hostDirectives` are found.
+ *
+ * @group Components
+ */
+declare class RdxCollectionProvider {
+    /** All items, in DOM order. */
+    readonly items: _angular_core.Signal<readonly RdxCollectionItem<any>[]>;
+    /** Items that are not disabled. Recomputes when an item's `disabled` flag changes. */
+    readonly enabledItems: _angular_core.Signal<RdxCollectionItem<any>[]>;
+    /** Returns the collection items, excluding disabled ones unless `includeDisabled` is `true`. */
+    getItems(includeDisabled?: boolean): readonly RdxCollectionItem[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCollectionProvider, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCollectionProvider, "[rdxCollectionProvider]", ["rdxCollectionProvider"], {}, {}, ["items"], never, true, never>;
 }
 
-declare function useCollection(): {
-    getItems: (includeDisabledItem?: boolean) => _radix_ng_primitives_collection.CollectionItemRecord[];
-    reactiveItems: i0.Signal<_radix_ng_primitives_collection.CollectionItemRecord[]>;
-    itemMapSize: i0.Signal<number>;
-};
+/**
+ * Convenience accessor for the nearest {@link RdxCollectionProvider}. Equivalent to
+ * `inject(RdxCollectionProvider)`; returns the provider with its reactive `items`/`enabledItems`.
+ */
+declare function useCollection(): RdxCollectionProvider;
 
-export { COLLECTION_CONTEXT_TOKEN, RdxCollectionItem, RdxCollectionProvider, useCollection };
-export type { CollectionContext, CollectionItemRecord };
+export { RdxCollectionItem, RdxCollectionProvider, useCollection };

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

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { InjectionToken, EnvironmentProviders } from '@angular/core';
-import { Direction } from '@angular/cdk/bidi';
+import { Direction } from '@radix-ng/primitives/core';
 
 type RadixNGConfig = {
     /**

package/types/radix-ng-primitives-context-menu.d.ts

@@ -1,129 +1,74 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, TemplateRef, AfterContentInit, OnDestroy } from '@angular/core';
-import { CdkMenuItem, CdkContextMenuTrigger, CdkMenu } from '@angular/cdk/menu';
-import { Subject } from 'rxjs';
-import { ConnectedPosition } from '@angular/cdk/overlay';
-import * as i1 from '@radix-ng/primitives/separator';
+import { Signal } from '@angular/core';
+import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
+import { BooleanInput, NumberInput } from '@radix-ng/primitives/core';
+import * as i1 from '@radix-ng/primitives/menu';
+import { RdxMenuRoot, RdxMenuAutoFocusInput } from '@radix-ng/primitives/menu';
+import * as _radix_ng_primitives_context_menu from '@radix-ng/primitives/context-menu';
 
-declare class RdxContextMenuItemDirective extends CdkMenuItem {
-    protected readonly menu: RdxContextMenuContentDirective;
-    protected readonly nativeElement: any;
-    highlighted: boolean;
-    disabled: boolean;
-    readonly onSelect: EventEmitter<void>;
-    constructor();
-    protected onPointerMove(): void;
-    protected onKeydown(event: KeyboardEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxContextMenuItemDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxContextMenuItemDirective, "[rdxContextMenuItem]", never, { "disabled": { "alias": "disabled"; "required": false; }; }, { "onSelect": "onSelect"; }, never, never, true, never>;
-    static ngAcceptInputType_disabled: unknown;
-}
-
-declare enum ContextMenuSide {
-    Top = "top",
-    Right = "right",
-    Bottom = "bottom",
-    Left = "left"
-}
-declare class RdxContextMenuTriggerDirective extends CdkContextMenuTrigger {
-    menuPosition: {
-        originX: "start" | "center" | "end";
-        originY: "top" | "center" | "bottom";
-        overlayX: "start" | "center" | "end";
-        overlayY: "top" | "center" | "bottom";
-        weight?: number;
-        offsetX?: number;
-        offsetY?: number;
-        panelClass?: string | string[];
-    }[];
-    set rdxContextMenuTrigger(value: TemplateRef<unknown> | null);
-    set alignOffset(value: number);
-    disabled: boolean;
-    onOpenChange: i0.OutputRef<void>;
-    get defaultPosition(): ConnectedPosition;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxContextMenuTriggerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxContextMenuTriggerDirective, "[rdxContextMenuTrigger]", never, { "rdxContextMenuTrigger": { "alias": "rdxContextMenuTrigger"; "required": false; }; "alignOffset": { "alias": "alignOffset"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "onOpenChange": "onOpenChange"; }, never, never, true, never>;
-    static ngAcceptInputType_alignOffset: unknown;
-    static ngAcceptInputType_disabled: unknown;
-}
-
-declare class RdxContextMenuContentDirective extends CdkMenu {
-    readonly highlighted: Subject<RdxContextMenuItemDirective>;
-    readonly menuTrigger: RdxContextMenuTriggerDirective | null;
-    onEscapeKeyDown: (event?: Event) => void;
-    closeOnEscape: boolean;
-    constructor();
-    updateActiveItem(item: CdkMenuItem): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxContextMenuContentDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxContextMenuContentDirective, "[rdxContextMenuContent]", never, { "onEscapeKeyDown": { "alias": "onEscapeKeyDown"; "required": false; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; }; }, {}, never, never, true, never>;
-}
-
-/** Base class providing checked state for selectable ContextMenuItems. */
-declare class RdxContextMenuSelectable extends RdxContextMenuItemDirective {
-    /** Whether the element is checked */
-    checked: boolean;
-    readonly checkedChange: EventEmitter<boolean>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxContextMenuSelectable, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxContextMenuSelectable, never, never, { "checked": { "alias": "checked"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
-    static ngAcceptInputType_checked: unknown;
+interface RdxContextMenuRootContext {
+    /** Whether the context menu is currently open. */
+    isOpen: Signal<boolean>;
+    /** Whether the whole menu is disabled. */
+    disabled: Signal<boolean>;
+    /** Open the menu anchored at the given viewport coordinates. */
+    openAt: (clientX: number, clientY: number, autoFocus?: RdxMenuAutoFocusInput) => void;
+    /** Close the menu. */
+    close: () => void;
 }
-
-declare class RdxContextMenuItemCheckboxDirective extends RdxContextMenuSelectable {
-    trigger(options?: {
-        keepOpen: boolean;
-    }): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxContextMenuItemCheckboxDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxContextMenuItemCheckboxDirective, "[rdxContextMenuItemCheckbox]", never, {}, {}, never, never, true, never>;
-}
-
-declare class RdxContextMenuItemRadioGroupDirective<T> implements AfterContentInit {
-    private readonly selectionDispatcher;
-    set value(value: T | null);
-    get value(): T | null;
-    private _value;
-    readonly valueChange: EventEmitter<any>;
-    ngAfterContentInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxContextMenuItemRadioGroupDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxContextMenuItemRadioGroupDirective<any>, "[rdxContextMenuItemRadioGroup]", never, { "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
-}
-
-declare class RdxContextMenuItemIndicatorDirective {
-    item: RdxContextMenuSelectable;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxContextMenuItemIndicatorDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxContextMenuItemIndicatorDirective, "[rdxContextMenuItemIndicator]", never, {}, {}, never, never, true, never>;
+declare const injectRdxContextMenuRootContext: _radix_ng_primitives_core.InjectContext<RdxContextMenuRootContext>;
+declare const provideRdxContextMenuRootContext: (useFactory: () => RdxContextMenuRootContext) => i0.Provider;
+/**
+ * Groups all parts of a context menu. Composes the Menu primitive but, instead of anchoring the
+ * popup to a trigger element, anchors it to the pointer position captured by `rdxContextMenuTrigger`.
+ *
+ * Reuse the Menu popup parts inside it — `rdxMenuPositioner`, `rdxMenuPopup`, `rdxMenuItem`,
+ * `rdxMenuCheckboxItem`, `rdxMenuRadioGroup`, `rdxMenuSubTrigger`, `rdxMenuSeparator`, … all behave
+ * identically here.
+ */
+declare class RdxContextMenuRoot {
+    readonly menuRoot: RdxMenuRoot;
+    private readonly popper;
+    /**
+     * Open the menu with the popup anchored at the given viewport coordinates.
+     *
+     * `autoFocus` defaults to `'popup'` so a right-click opens with the popup focused but no item
+     * highlighted (matching Base UI's pointer behavior). Pass `'first'` for keyboard opening.
+     */
+    openAt(clientX: number, clientY: number, autoFocus?: RdxMenuAutoFocusInput): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxContextMenuRoot, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxContextMenuRoot, "[rdxContextMenuRoot]", ["rdxContextMenuRoot"], {}, {}, never, never, true, [{ directive: typeof i1.RdxMenuRoot; inputs: { "open": "open"; "modal": "modal"; "loopFocus": "loopFocus"; "highlightItemOnHover": "highlightItemOnHover"; }; outputs: { "openChange": "openChange"; "onOpenChange": "onOpenChange"; "onOpenChangeComplete": "onOpenChangeComplete"; }; }]>;
 }
 
-declare class RdxContextMenuItemRadioDirective extends RdxContextMenuSelectable implements AfterContentInit, OnDestroy {
-    /** The unique selection dispatcher for this radio's `RdxContextMenuItemRadioGroupDirective`. */
-    private readonly selectionDispatcher;
-    private readonly group;
-    get value(): string;
-    set value(value: string);
-    private _value;
-    /** An ID to identify this radio item to the `UniqueSelectionDispatcher`. */
-    private id;
-    private removeDispatcherListener;
+/**
+ * An area that opens the context menu on right click (or a touch long-press).
+ *
+ * Apply it to the element that should respond to the context-menu gesture; the popup is positioned
+ * at the pointer, not against this element.
+ */
+declare class RdxContextMenuTrigger {
+    protected readonly rootContext: _radix_ng_primitives_context_menu.RdxContextMenuRootContext;
+    /** Whether the trigger is disabled. */
+    readonly disabled: i0.InputSignalWithTransform<boolean, BooleanInput>;
+    /** How long (ms) a touch must be held before the menu opens. */
+    readonly longPressDelay: i0.InputSignalWithTransform<number, NumberInput>;
+    private longPressTimer;
+    private longPressOrigin;
+    private lastPointerDownTime;
     constructor();
-    ngAfterContentInit(): void;
-    ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxContextMenuItemRadioDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxContextMenuItemRadioDirective, "[rdxContextMenuItemRadio]", never, { "value": { "alias": "value"; "required": false; }; }, {}, never, never, true, never>;
-}
-
-declare class RdxContextMenuLabelDirective {
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxContextMenuLabelDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxContextMenuLabelDirective, "[rdxContextMenuLabel]", never, {}, {}, never, never, true, never>;
-}
-
-declare class RdxContextMenuSeparatorDirective {
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxContextMenuSeparatorDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxContextMenuSeparatorDirective, "[rdxContextMenuSeparator]", never, {}, {}, never, never, true, [{ directive: typeof i1.RdxSeparatorRootDirective; inputs: {}; outputs: {}; }]>;
+    protected onContextMenu(event: MouseEvent): void;
+    protected onPointerDown(event: PointerEvent): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected cancelLongPress(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxContextMenuTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxContextMenuTrigger, "[rdxContextMenuTrigger]", ["rdxContextMenuTrigger"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "longPressDelay": { "alias": "longPressDelay"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class RdxContextMenuModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxContextMenuModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<RdxContextMenuModule, never, [typeof RdxContextMenuContentDirective, typeof RdxContextMenuSelectable, typeof RdxContextMenuItemCheckboxDirective, typeof RdxContextMenuItemDirective, typeof RdxContextMenuItemRadioGroupDirective, typeof RdxContextMenuItemIndicatorDirective, typeof RdxContextMenuItemRadioDirective, typeof RdxContextMenuLabelDirective, typeof RdxContextMenuSeparatorDirective, typeof RdxContextMenuTriggerDirective], [typeof RdxContextMenuContentDirective, typeof RdxContextMenuSelectable, typeof RdxContextMenuItemCheckboxDirective, typeof RdxContextMenuItemDirective, typeof RdxContextMenuItemRadioGroupDirective, typeof RdxContextMenuItemIndicatorDirective, typeof RdxContextMenuItemRadioDirective, typeof RdxContextMenuLabelDirective, typeof RdxContextMenuSeparatorDirective, typeof RdxContextMenuTriggerDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RdxContextMenuModule, never, [typeof RdxContextMenuRoot, typeof RdxContextMenuTrigger], [typeof RdxContextMenuRoot, typeof RdxContextMenuTrigger]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<RdxContextMenuModule>;
 }
 
-export { ContextMenuSide, RdxContextMenuContentDirective, RdxContextMenuItemCheckboxDirective, RdxContextMenuItemDirective, RdxContextMenuItemIndicatorDirective, RdxContextMenuItemRadioDirective, RdxContextMenuItemRadioGroupDirective, RdxContextMenuLabelDirective, RdxContextMenuModule, RdxContextMenuSelectable, RdxContextMenuSeparatorDirective, RdxContextMenuTriggerDirective };
+export { RdxContextMenuModule, RdxContextMenuRoot, RdxContextMenuTrigger, injectRdxContextMenuRootContext, provideRdxContextMenuRootContext };
+export type { RdxContextMenuRootContext };