@tempots/dom/renderable/transition-keyed-foreach.d.ts

Fully-typed frontend framework alternative to React and Angular

import { Signal, KeyedPosition } from '@tempots/core';
import { Renderable, TNode } from '../types/domain';
/**
 * Configuration for enter/exit transitions.
 * @public
 */
export type TransitionConfig = {
    /** CSS class added to items during their exit animation. */
    readonly exitClass?: string;
    /** Duration in milliseconds before an exiting item is removed from the DOM. */
    readonly exitDuration?: number;
    /** CSS class added to items during their enter animation. */
    readonly enterClass?: string;
    /** Duration in milliseconds before the enter class is removed. */
    readonly enterDuration?: number;
    /**
     * When `true`, listens for `animationend` / `transitionend` events to
     * determine when to remove exiting items, instead of using `exitDuration`.
     */
    readonly useAnimationEvents?: boolean;
};
/**
 * A drop-in replacement for `KeyedForEach` that supports enter and exit
 * animations by delaying DOM removal. Items that leave the list are kept in
 * the DOM with an `isExiting` signal set to `true`, allowing CSS transitions
 * or class-based animations to play before removal.
 *
 * @typeParam T - The type of items in the list.
 * @param items - A signal of the current item array.
 * @param key - A function that returns a unique key for each item.
 * @param renderFn - Renders each item. Receives the item signal, keyed position,
 *   and an `isExiting` signal.
 * @param config - Transition configuration (classes, durations).
 * @returns A renderable.
 * @public
 */
export declare function TransitionKeyedForEach<T>(items: Signal<T[]>, key: (item: T) => string | number, renderFn: (item: Signal<T>, position: KeyedPosition, isExiting: Signal<boolean>) => TNode, config: TransitionConfig): Renderable;