@progress/kendo-react-popup/models/PopupAnimation.d.ts

React Popup positions a piece of content next to a specific anchor component. KendoReact Popup package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
/**
 * The possible base directions for slide and push animations.
 *
 * Possible values: 'left', 'right', 'up', 'down'.
 *
 * @example
 * <Popup animation={{ direction: 'left' }} />
 */
export type PopupBaseDirections = 'left' | 'right' | 'up' | 'down';
/**
 * The possible directions for zoom animations.
 *
 * Possible values: 'in', 'out'.
 *
 * @example
 * <Popup animation={{ type: 'zoom', direction: 'in' }} />
 */
export type PopupZoomDirections = 'in' | 'out';
/**
 * The possible directions for expand animations.
 *
 * Possible values: 'horizontal', 'vertical'.
 *
 * @example
 * <Popup animation={{ type: 'expand', direction: 'vertical' }} />
 */
export type PopupExpandDirection = 'horizontal' | 'vertical';
/**
 * Represents no direction for fade animation.
 *
 * Possible value: 'none'.
 *
 * @example
 * <Popup animation={{ type: 'fade', direction: 'none' }} />
 */
export type PopupNoDirection = 'none';
/**
 * The available animation types for the Popup component.
 *
 * Possible values: 'slide', 'zoom', 'push', 'expand', 'fade'.
 *
 * @example
 * <Popup animation={{ type: 'slide' }} />
 */
export declare const animationTypes: {
    readonly slide: "slide";
    readonly zoom: "zoom";
    readonly push: "push";
    readonly expand: "expand";
    readonly fade: "fade";
};
/**
 * The type representing all possible animation type values.
 *
 * Possible values: 'slide', 'zoom', 'push', 'expand', 'fade'
 *
 * @example
 * <Popup animation={{ type: 'fade' }} />
 */
export type PopupAnimationType = (typeof animationTypes)[keyof typeof animationTypes];
/**
 * Defines the base animation settings for the Popup component.
 *
 * Includes duration properties for opening and closing animations
 *
 * @example
 * <Popup animation={{ openDuration: 500, closeDuration: 200 }} />
 */
export interface PopupAnimationBase {
    /**
     * The duration of the opening animation in milliseconds. Defaults to `300ms`.
     */
    openDuration?: number;
    /**
     * The duration of the closing animation in milliseconds. Defaults to `300ms`.
     */
    closeDuration?: number;
}
/**
 * Defines the slide animation settings for the Popup component.
 *
 * Use this to configure slide type and direction
 *
 * @example
 * <Popup animation={{ type: 'slide', direction: 'left' }} />
 */
export interface SlidePopupAnimation {
    /**
     * The type of the animation. Default is 'slide'.
     */
    type?: typeof animationTypes.slide;
    /**
     * The direction of the slide animation. Possible values: 'left', 'right', 'up', 'down'.
     */
    direction?: PopupBaseDirections;
}
/**
 * Defines the zoom animation settings for the Popup component.
 *
 * Use this to configure zoom type and direction
 *
 * @example
 * <Popup animation={{ type: 'zoom', direction: 'in' }} />
 */
export interface ZoomPopupAnimation {
    /**
     * The type of the animation. Must be 'zoom'.
     */
    type: typeof animationTypes.zoom;
    /**
     * The direction of the zoom animation. Possible values: 'in', 'out'.
     */
    direction: PopupZoomDirections;
}
/**
 * Defines the fade animation settings for the Popup component.
 *
 * Use this to configure fade type. Direction is always 'none'.
 *
 * @example
 * <Popup animation={{ type: 'fade' }} />
 */
export interface FadePopupAnimation {
    /**
     * The type of the animation. Must be 'fade'.
     */
    type: typeof animationTypes.fade;
    /**
     * @hidden
     */
    direction?: PopupNoDirection;
}
/**
 * Defines the push animation settings for the Popup component.
 *
 * Use this to configure push type and direction
 *
 * @example
 * <Popup animation={{ type: 'push', direction: 'down' }} />
 */
export interface PushPopupAnimation {
    /**
     * The type of the animation. Must be 'push'.
     */
    type: typeof animationTypes.push;
    /**
     * The direction of the push animation. Possible values: 'left', 'right', 'up', 'down'.
     */
    direction: PopupBaseDirections;
}
/**
 * Defines the expand animation settings for the Popup component.
 *
 * Use this to configure expand type and direction
 *
 * @example
 * <Popup animation={{ type: 'expand', direction: 'vertical' }} />
 */
export interface ExpandPopupAnimation {
    /**
     * The type of the animation. Must be 'expand'.
     */
    type: typeof animationTypes.expand;
    /**
     * The direction of the expand animation. Possible values: 'horizontal', 'vertical'.
     */
    direction: PopupExpandDirection;
}
/**
 * The animation settings for the Popup component
 */
export type PopupAnimation = PopupAnimationBase & (FadePopupAnimation | SlidePopupAnimation | ZoomPopupAnimation | PushPopupAnimation | ExpandPopupAnimation);
/**
 * Represents all possible direction values for Popup animations.
 *
 * Includes directions for slide, zoom, push, expand, and fade animations.
 * Useful for type-safe direction assignment in animation settings.
 *
 * Possible values: 'left', 'right', 'up', 'down', 'in', 'out', 'horizontal', 'vertical', 'none'.
 */
export type PopupAnimationDirection = NonNullable<FadePopupAnimation['direction'] | SlidePopupAnimation['direction'] | ZoomPopupAnimation['direction'] | PushPopupAnimation['direction'] | ExpandPopupAnimation['direction']>;