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

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

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
-import { ElementRef } from '@angular/core';
-import { NumberInput, BooleanInput } from '@angular/cdk/coercion';
-import { Middleware, Placement } from '@floating-ui/dom';
+import { ElementRef, InjectionToken, Provider } from '@angular/core';
+import { ReferenceElement, Placement, Middleware, VirtualElement } from '@floating-ui/dom';
+import { NumberInput, BooleanInput } from '@radix-ng/primitives/core';
 
 declare class RdxPopperAnchor {
     readonly elementRef: ElementRef<HTMLElement>;
@@ -10,7 +10,8 @@ declare class RdxPopperAnchor {
 }
 
 declare class RdxPopper {
-    readonly anchor: _angular_core.Signal<RdxPopperAnchor>;
+    readonly anchor: _angular_core.Signal<RdxPopperAnchor | undefined>;
+    readonly anchorOverride: _angular_core.WritableSignal<ReferenceElement | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPopper, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPopper, "[rdxPopperRoot]", never, {}, {}, ["anchor"], never, true, never>;
 }
@@ -23,6 +24,7 @@ declare class RdxPopperContent {
         arrowY: _angular_core.Signal<number | undefined>;
         shouldHideArrow: _angular_core.Signal<boolean>;
         isPositioned: _angular_core.Signal<boolean>;
+        anchorHidden: _angular_core.Signal<boolean>;
     };
     /**
      * if the PopperContent hasn't been placed yet (not all measurements done)
@@ -46,6 +48,7 @@ declare function transformOrigin(options: {
 }): Middleware;
 declare function getSideAndAlignFromPlacement(placement: Placement): readonly ["top" | "right" | "bottom" | "left", "start" | "center" | "end"];
 
+type RdxPopperAnchorElement = Element | ElementRef<Element> | VirtualElement | (() => Element | VirtualElement | null) | null | undefined;
 declare const context: () => {
     placedSide: _angular_core.Signal<"top" | "right" | "bottom" | "left" | undefined>;
     placedAlign: _angular_core.Signal<"start" | "center" | "end" | undefined>;
@@ -53,6 +56,7 @@ declare const context: () => {
     arrowY: _angular_core.Signal<number | undefined>;
     shouldHideArrow: _angular_core.Signal<boolean>;
     isPositioned: _angular_core.Signal<boolean>;
+    anchorHidden: _angular_core.Signal<boolean>;
 };
 type PopperContentWrapperContext = ReturnType<typeof context>;
 declare const injectPopperContentWrapperContext: (optional?: boolean) => {
@@ -62,6 +66,7 @@ declare const injectPopperContentWrapperContext: (optional?: boolean) => {
     arrowY: _angular_core.Signal<number | undefined>;
     shouldHideArrow: _angular_core.Signal<boolean>;
     isPositioned: _angular_core.Signal<boolean>;
+    anchorHidden: _angular_core.Signal<boolean>;
 } | null;
 declare const providePopperContentWrapperContext: (useFactory: () => {
     placedSide: _angular_core.Signal<"top" | "right" | "bottom" | "left" | undefined>;
@@ -70,13 +75,19 @@ declare const providePopperContentWrapperContext: (useFactory: () => {
     arrowY: _angular_core.Signal<number | undefined>;
     shouldHideArrow: _angular_core.Signal<boolean>;
     isPositioned: _angular_core.Signal<boolean>;
+    anchorHidden: _angular_core.Signal<boolean>;
 }) => _angular_core.Provider;
 declare class RdxPopperContentWrapper {
     private readonly elementRef;
-    private readonly destroyRef;
     private readonly injector;
     private readonly context;
     private readonly isBrowser;
+    /** Optional positioning defaults provided by a composing primitive (e.g. tooltip). */
+    private readonly config;
+    /**
+     * An element to position the popup against. Defaults to the popper anchor.
+     */
+    readonly anchor: _angular_core.InputSignal<RdxPopperAnchorElement>;
     /**
      * The preferred side of the anchor to render against when open.
      * Will be reversed when collisions occur and avoidCollisions is enabled.
@@ -134,13 +145,17 @@ declare class RdxPopperContentWrapper {
     readonly placed: _angular_core.OutputEmitterRef<void>;
     readonly arrow: _angular_core.Signal<any>;
     readonly shouldHideArrow: _angular_core.Signal<boolean>;
+    /** Whether the arrow could not be centered on the anchor because the popup was shifted. */
+    readonly arrowUncentered: _angular_core.Signal<boolean>;
     readonly arrowX: _angular_core.Signal<number | undefined>;
     readonly arrowY: _angular_core.Signal<number | undefined>;
+    readonly anchorHidden: _angular_core.Signal<boolean>;
     private readonly desiredPlacement;
     private readonly arrowSize;
     private readonly boundary;
     private readonly hasExplicitBoundaries;
     private readonly detectOverflowOptions;
+    private readonly resolvedAnchor;
     private readonly position;
     /**
      * Whether the panel is positioned.
@@ -173,11 +188,13 @@ declare class RdxPopperContentWrapper {
         top: string;
         left: string;
         '--radix-popper-transform-origin': string;
+        '--radix-popper-content-wrapper-width': string;
+        '--radix-popper-content-wrapper-height': string;
     }>;
-    private readonly afterNextRender;
+    private readonly afterRenderEffect;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPopperContentWrapper, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPopperContentWrapper, "[rdxPopperContentWrapper]", never, { "side": { "alias": "side"; "required": false; "isSignal": true; }; "sideOffset": { "alias": "sideOffset"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "alignOffset": { "alias": "alignOffset"; "required": false; "isSignal": true; }; "arrowPadding": { "alias": "arrowPadding"; "required": false; "isSignal": true; }; "avoidCollisions": { "alias": "avoidCollisions"; "required": false; "isSignal": true; }; "collisionBoundary": { "alias": "collisionBoundary"; "required": false; "isSignal": true; }; "collisionPadding": { "alias": "collisionPadding"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "hideWhenDetached": { "alias": "hideWhenDetached"; "required": false; "isSignal": true; }; "positionStrategy": { "alias": "positionStrategy"; "required": false; "isSignal": true; }; "updatePositionStrategy": { "alias": "updatePositionStrategy"; "required": false; "isSignal": true; }; }, { "placed": "placed"; }, ["arrow", "contentElementRef"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPopperContentWrapper, "[rdxPopperContentWrapper]", never, { "anchor": { "alias": "anchor"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "sideOffset": { "alias": "sideOffset"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "alignOffset": { "alias": "alignOffset"; "required": false; "isSignal": true; }; "arrowPadding": { "alias": "arrowPadding"; "required": false; "isSignal": true; }; "avoidCollisions": { "alias": "avoidCollisions"; "required": false; "isSignal": true; }; "collisionBoundary": { "alias": "collisionBoundary"; "required": false; "isSignal": true; }; "collisionPadding": { "alias": "collisionPadding"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "hideWhenDetached": { "alias": "hideWhenDetached"; "required": false; "isSignal": true; }; "positionStrategy": { "alias": "positionStrategy"; "required": false; "isSignal": true; }; "updatePositionStrategy": { "alias": "updatePositionStrategy"; "required": false; "isSignal": true; }; }, { "placed": "placed"; }, ["arrow", "contentElementRef"], never, true, never>;
 }
 
 declare class RdxPopperArrow {
@@ -201,7 +218,30 @@ declare class RdxPopperArrow {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPopperArrow, "[rdxPopperArrow]", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Default positioning values for `RdxPopperContentWrapper`.
+ *
+ * Lets a composing primitive (e.g. tooltip) provide its own Base UI-aligned defaults without
+ * changing the shared popper defaults that other consumers (e.g. popover) rely on. Any value left
+ * `undefined` falls back to the wrapper's built-in default. Consumer template bindings always win.
+ */
+interface RdxPopperContentConfig {
+    side?: Side;
+    align?: Align;
+    sideOffset?: number;
+    alignOffset?: number;
+    arrowPadding?: number;
+    avoidCollisions?: boolean;
+    collisionPadding?: number | Partial<Record<Side, number>>;
+    sticky?: 'partial' | 'always';
+    hideWhenDetached?: boolean;
+    positionStrategy?: 'fixed' | 'absolute';
+    updatePositionStrategy?: 'optimized' | 'always';
+}
+declare const RdxPopperContentConfigToken: InjectionToken<RdxPopperContentConfig>;
+declare function provideRdxPopperContentConfig(config: RdxPopperContentConfig): Provider;
+
 declare const popperImports: (typeof RdxPopperAnchor | typeof RdxPopper | typeof RdxPopperContent | typeof RdxPopperContentWrapper)[];
 
-export { RdxPopper, RdxPopperAnchor, RdxPopperArrow, RdxPopperContent, RdxPopperContentWrapper, getSideAndAlignFromPlacement, injectPopperContentWrapperContext, isNotNull, popperImports, providePopperContentWrapperContext, transformOrigin };
-export type { Align, PopperContentWrapperContext, Side };
+export { RdxPopper, RdxPopperAnchor, RdxPopperArrow, RdxPopperContent, RdxPopperContentConfigToken, RdxPopperContentWrapper, getSideAndAlignFromPlacement, injectPopperContentWrapperContext, isNotNull, popperImports, providePopperContentWrapperContext, provideRdxPopperContentConfig, transformOrigin };
+export type { Align, PopperContentWrapperContext, RdxPopperAnchorElement, RdxPopperContentConfig, Side };

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

@@ -1,22 +1,30 @@
 import * as _angular_core from '@angular/core';
 import { ElementRef } from '@angular/core';
 
+/**
+ * A target container for the portal. Accepts an `ElementRef`, a native element, or a CSS selector
+ * resolved against the document.
+ */
+type RdxPortalContainer = ElementRef<HTMLElement> | HTMLElement | string;
 declare class RdxPortal {
     private readonly elementRef;
     private readonly platformId;
     private readonly document;
     private readonly destroyRef;
     /**
-     * Specify a container element to portal the content into.
+     * Specify a container to portal the content into. Can be an `ElementRef`, a native element, or a
+     * CSS selector. Defaults to `document.body` when not set (or when a selector matches nothing).
      */
-    readonly container: _angular_core.InputSignal<ElementRef<HTMLElement> | undefined>;
-    private _computedContainer;
-    readonly computedContainer: _angular_core.WritableSignal<ElementRef<HTMLElement> | undefined>;
+    readonly container: _angular_core.InputSignal<RdxPortalContainer | undefined>;
+    private readonly _computedContainer;
+    readonly computedContainer: _angular_core.Signal<RdxPortalContainer | undefined>;
     private readonly elementContainer;
     constructor();
-    setContainer(container: ElementRef<HTMLElement>): void;
+    setContainer(container: RdxPortalContainer): void;
+    private resolveContainer;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPortal, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPortal, "[rdxPortal]", never, { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPortal, "[rdxPortal]", ["rdxPortal"], { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { RdxPortal };
+export type { RdxPortalContainer };

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

@@ -1,59 +1,5 @@
 import * as i0 from '@angular/core';
-import { NgZone, Signal, InjectionToken, Provider } from '@angular/core';
-import { Subject, Observable } from 'rxjs';
-
-type TransitionOptions<T> = {
-    context?: T;
-    animation: boolean;
-    state?: 'continue' | 'stop';
-    transitionTimerDelayMs?: number;
-};
-type TransitionContext<T> = {
-    transition$: Subject<any>;
-    complete: () => void;
-    context: T;
-};
-type TransitionStartFn<T = any> = (element: HTMLElement, animation: boolean, context: T) => TransitionEndFn | void;
-type TransitionEndFn = () => void;
-
-/**
- * Manages the presence of an element with optional transition animation.
- *
- * @template T - The type of the context object used in the transition.
- * @param {NgZone} zone - The Angular zone to control the change detection context.
- * @param {HTMLElement} element - The target HTML element to apply the transition.
- * @param {TransitionOptions<T>} options - Options for controlling the transition behavior.
- *   @param {T} [options.context] - An optional context object to pass through the transition.
- *   @param {boolean} options.animation - A flag indicating if the transition should be animated.
- *   @param {'start' | 'continue' | 'stop'} options.state - The desired state of the transition.
- * @param {TransitionStartFn<T>} startFn - A function to start the transition.
- * @returns {Observable<void>} - An observable that emits when the transition completes.
- *
- * The `usePresence` function is designed to manage the presence and visibility of an HTML element,
- * optionally applying a transition animation. It utilizes Angular's NgZone for efficient change
- * detection management and allows for different states of transitions ('start', 'continue', 'stop').
- * The function takes a start function to handle the beginning of the transition and returns an
- * observable that completes when the transition ends.
- *
- * Example usage:
- *
- * const options: TransitionOptions<MyContext> = {
- *   context: {}, // your context object
- *   animation: true,
- *   state: 'start'
- * };
- *
- * const startFn: TransitionStartFn<MyContext> = (el, animation, context) => {
- *   el.classList.add('active');
- *   return () => el.classList.remove('active');
- * };
- *
- * usePresence(zone, element, startFn, options).subscribe(() => {
- *   console.log('Transition completed');
- * });
- */
-declare const usePresence: <T>(zone: NgZone, element: HTMLElement, startFn: TransitionStartFn<T>, options: TransitionOptions<T>) => Observable<void>;
-declare const completeTransition: (element: HTMLElement) => void;
+import { InjectionToken, Signal, Provider } from '@angular/core';
 
 /**
  * Context interface for RdxPresence directive
@@ -72,32 +18,38 @@ declare const RDX_PRESENCE_CONTEXT: InjectionToken<RdxPresenceContext>;
  *   ]
  */
 declare function provideRdxPresenceContext(contextFactory: () => RdxPresenceContext): Provider;
+/**
+ * Headless structural directive that conditionally renders its template based on a reactive
+ * `present` signal supplied through {@link RDX_PRESENCE_CONTEXT}.
+ *
+ * Unlike a plain `*ngIf`, it keeps the content mounted while a CSS exit animation
+ * (`@keyframes` applied for the closed state) is running, and unmounts it only once that
+ * animation finishes. If the content has no exit animation, it unmounts immediately.
+ */
 declare class RdxPresenceDirective {
     private readonly context;
     private readonly viewContainerRef;
     private readonly templateRef;
-    private effectRef;
+    private readonly injector;
+    private readonly isBrowser;
+    private viewRef;
+    private node;
+    private removeListeners;
+    private state;
+    private prevPresent;
+    private prevAnimationName;
+    constructor();
+    /** Decides whether to suspend the unmount for an exit animation (port of Radix' logic). */
+    private evaluateExit;
+    private send;
+    private mountView;
+    private destroyView;
+    private addAnimationListeners;
+    private getComputedStyles;
+    private getAnimationName;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxPresenceDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<RdxPresenceDirective, never, never, {}, {}, never, never, true, never>;
 }
 
-type CollapseContext = {
-    direction: 'show' | 'hide';
-    dimension: 'width' | 'height';
-    maxSize?: string;
-};
-/**
- * Function to handle the start of a collapsing transition.
- *
- * @param element - The HTML element to animate.
- * @param animation - Whether to use animation or not.
- * @param context - The context containing direction and dimension information.
- * @returns A function to clean up the animation.
- */
-declare const transitionCollapsing: TransitionStartFn<CollapseContext>;
-
-declare const toastFadeInTransition: TransitionStartFn;
-declare const toastFadeOutTransition: TransitionStartFn;
-
-export { RDX_PRESENCE_CONTEXT, RdxPresenceDirective, completeTransition, provideRdxPresenceContext, toastFadeInTransition, toastFadeOutTransition, transitionCollapsing, usePresence };
-export type { CollapseContext, RdxPresenceContext, TransitionContext, TransitionEndFn, TransitionOptions, TransitionStartFn };
+export { RDX_PRESENCE_CONTEXT, RdxPresenceDirective, provideRdxPresenceContext };
+export type { RdxPresenceContext };