ng-primitives 0.121.0 → 0.123.0

package/types/ng-primitives-tooltip.d.ts

@@ -7,6 +7,8 @@ import { Placement } from '@floating-ui/dom';
 import { NumberInput, BooleanInput } from '@angular/cdk/coercion';
 import * as ng_primitives_state from 'ng-primitives/state';
 import { StateInjectionOptions } from 'ng-primitives/state';
+import * as ng_primitives_internal from 'ng-primitives/internal';
+import { HoverBridgePoint } from 'ng-primitives/internal';
 
 interface NgpTooltipConfig {
     /**
@@ -115,16 +117,11 @@ declare const provideTooltipArrowState: (opts?: {
     inherit?: boolean;
 }) => _angular_core.FactoryProvider;
 
-interface TooltipHoverBridgePoint {
-    x: number;
-    y: number;
-}
-
 interface NgpTooltipTriggerState<T> {
     /** Access the tooltip template ref. */
     readonly tooltip: WritableSignal<NgpOverlayContent<T> | string | null>;
     /**
-     * Define if the trigger should be disabled. This will prevent the tooltip from being shown or hidden from interactions.
+     * Whether the tooltip is disabled. This allows the tooltip to be enabled or disabled dynamically.
      * @default false
      */
     readonly disabled: Signal<boolean>;
@@ -165,7 +162,7 @@ interface NgpTooltipTriggerState<T> {
      * Define the container in which the tooltip should be attached.
      * @default document.body
      */
-    readonly container: Signal<HTMLElement | string | null>;
+    readonly container: WritableSignal<HTMLElement | string | null>;
     /**
      * Define whether the tooltip should only show when the trigger element overflows.
      * @default false
@@ -240,7 +237,7 @@ interface NgpTooltipTriggerState<T> {
     /**
      * Current pointer grace polygon used while crossing trigger -> tooltip.
      */
-    readonly hoverBridgePolygon: Signal<TooltipHoverBridgePoint[] | null>;
+    readonly hoverBridgePolygon: Signal<HoverBridgePoint[] | null>;
     /**
      * Show the tooltip programmatically (skips cooldown so multiple tooltips can coexist).
      */
@@ -253,6 +250,13 @@ interface NgpTooltipTriggerState<T> {
      * Set the tooltip id.
      */
     setTooltipId: (id: string) => void;
+    /**
+     * Set the container in which the tooltip should be attached. Takes effect the
+     * next time the tooltip is shown; it does not move a tooltip that is already
+     * visible.
+     * @param container - The new container
+     */
+    setContainer: (container: HTMLElement | string | null) => void;
     /**
      * Called by tooltip content when pointer enters the tooltip.
      * @internal
@@ -269,7 +273,7 @@ interface NgpTooltipTriggerProps<T> {
     /** Access the tooltip template ref. */
     readonly tooltip?: Signal<NgpOverlayContent<T> | string | null>;
     /**
-     * Define if the trigger should be disabled. This will prevent the tooltip from being shown or hidden from interactions.
+     * Whether the tooltip is disabled. This allows the tooltip to be enabled or disabled dynamically.
      * @default false
      */
     readonly disabled?: Signal<boolean>;
@@ -370,7 +374,7 @@ declare const NgpTooltipTriggerStateToken: _angular_core.InjectionToken<Writable
     hideDelay: Signal<number>;
     flip: Signal<NgpFlip>;
     shift: Signal<NgpShift>;
-    container: Signal<string | HTMLElement | null>;
+    container: WritableSignal<string | HTMLElement | null>;
     showOnOverflow: Signal<boolean>;
     anchor: Signal<HTMLElement | null>;
     context: Signal<unknown>;
@@ -385,15 +389,16 @@ declare const NgpTooltipTriggerStateToken: _angular_core.InjectionToken<Writable
     open: Signal<boolean>;
     hasOverflow: Signal<boolean>;
     contentHovered: WritableSignal<boolean>;
-    hoverBridgePolygon: WritableSignal<TooltipHoverBridgePoint[] | null>;
+    hoverBridgePolygon: Signal<HoverBridgePoint[] | null>;
     show: () => void;
     hide: () => void;
     setTooltipId: (id: string) => void;
+    setContainer: (newContainer: HTMLElement | string | null) => void;
     onTooltipHoverStart: () => void;
     onTooltipHoverEnd: () => void;
     destroy: () => void;
 }>>;
-declare const ngpTooltipTrigger: <T>({ tooltip: _tooltip, disabled, placement, offset, showDelay, hideDelay, flip, shift, container, showOnOverflow, anchor, context, useTextContent, trackPosition, position, scrollBehavior, cooldown, hoverableContent, }: NgpTooltipTriggerProps<T>) => {
+declare const ngpTooltipTrigger: <T>({ tooltip: _tooltip, disabled, placement, offset, showDelay, hideDelay, flip, shift, container: _container, showOnOverflow, anchor, context, useTextContent, trackPosition, position, scrollBehavior, cooldown, hoverableContent, }: NgpTooltipTriggerProps<T>) => {
     tooltip: WritableSignal<string | NgpOverlayContent<T> | null>;
     disabled: Signal<boolean>;
     placement: Signal<NgpTooltipPlacement>;
@@ -402,7 +407,7 @@ declare const ngpTooltipTrigger: <T>({ tooltip: _tooltip, disabled, placement, o
     hideDelay: Signal<number>;
     flip: Signal<NgpFlip>;
     shift: Signal<NgpShift>;
-    container: Signal<string | HTMLElement | null>;
+    container: WritableSignal<string | HTMLElement | null>;
     showOnOverflow: Signal<boolean>;
     anchor: Signal<HTMLElement | null>;
     context: Signal<T | undefined>;
@@ -417,10 +422,11 @@ declare const ngpTooltipTrigger: <T>({ tooltip: _tooltip, disabled, placement, o
     open: Signal<boolean>;
     hasOverflow: Signal<boolean>;
     contentHovered: WritableSignal<boolean>;
-    hoverBridgePolygon: WritableSignal<TooltipHoverBridgePoint[] | null>;
+    hoverBridgePolygon: Signal<HoverBridgePoint[] | null>;
     show: () => void;
     hide: () => void;
     setTooltipId: (id: string) => void;
+    setContainer: (newContainer: HTMLElement | string | null) => void;
     onTooltipHoverStart: () => void;
     onTooltipHoverEnd: () => void;
     destroy: () => void;
@@ -445,7 +451,7 @@ declare class NgpTooltipTrigger<T = null> implements OnDestroy {
      */
     readonly tooltip: _angular_core.InputSignalWithTransform<string | NgpOverlayContent<T> | null, TooltipInput<T>>;
     /**
-     * Define if the trigger should be disabled. This will prevent the tooltip from being shown or hidden from interactions.
+     * Whether the tooltip is disabled. This allows the tooltip to be enabled or disabled dynamically.
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
@@ -545,7 +551,7 @@ declare class NgpTooltipTrigger<T = null> implements OnDestroy {
         hideDelay: _angular_core.Signal<number>;
         flip: _angular_core.Signal<NgpFlip>;
         shift: _angular_core.Signal<NgpShift>;
-        container: _angular_core.Signal<string | HTMLElement | null>;
+        container: _angular_core.WritableSignal<string | HTMLElement | null>;
         showOnOverflow: _angular_core.Signal<boolean>;
         anchor: _angular_core.Signal<HTMLElement | null>;
         context: _angular_core.Signal<T | undefined>;
@@ -560,10 +566,11 @@ declare class NgpTooltipTrigger<T = null> implements OnDestroy {
         open: _angular_core.Signal<boolean>;
         hasOverflow: _angular_core.Signal<boolean>;
         contentHovered: _angular_core.WritableSignal<boolean>;
-        hoverBridgePolygon: _angular_core.WritableSignal<TooltipHoverBridgePoint[] | null>;
+        hoverBridgePolygon: _angular_core.Signal<ng_primitives_internal.HoverBridgePoint[] | null>;
         show: () => void;
         hide: () => void;
         setTooltipId: (id: string) => void;
+        setContainer: (newContainer: HTMLElement | string | null) => void;
         onTooltipHoverStart: () => void;
         onTooltipHoverEnd: () => void;
         destroy: () => void;

package/types/ng-primitives-utils.d.ts

@@ -33,6 +33,11 @@ declare function booleanAttributeBinding(element: HTMLElement, attribute: string
  * Disposable functions are a way to manage timers, intervals, and event listeners
  * that should be cleared when a component is destroyed.
  *
+ * Each disposable releases its DestroyRef registration as soon as the resource
+ * is gone (the timer fires or the returned cleanup runs), so repeated calls -
+ * e.g. rescheduling a timeout on every pointermove - don't accumulate destroy
+ * callbacks for the lifetime of the host.
+ *
  * This is heavily inspired by Headless UI disposables:
  * https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/utils/disposables.ts
  */
@@ -45,20 +50,18 @@ declare function injectDisposables(): {
      */
     setTimeout: (callback: () => void, delay: number) => () => void;
     /**
-     * Set an interval that will be cleared when the component is destroyed.
-     * @param callback The callback to execute
-     * @param delay The delay before the callback is executed
-     * @param target
-     * @param type
-     * @param listener
-     * @param options
-     * @returns A function to clear the interval
+     * Add an event listener that will be removed when the component is destroyed.
+     * @param target The event target
+     * @param type The event type
+     * @param listener The event listener
+     * @param options The event listener options
+     * @returns A function to remove the event listener
      */
     addEventListener: <K extends keyof HTMLElementEventMap>(target: EventTarget, type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions) => () => void;
     /**
      * Set an interval that will be cleared when the component is destroyed.
      * @param callback The callback to execute
-     * @param delay The delay before the callback is executed
+     * @param delay The delay between executions
      * @returns A function to clear the interval
      */
     setInterval: (callback: () => void, delay: number) => () => void;