@progress/kendo-react-popup 13.3.0 → 13.4.0-develop.2

package/models/CollisionType.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { CollisionType as CollisionTypeBase } from '@progress/kendo-popup-common';
+/**
+ * Defines the possible collision behavior when the Popup is not fully visible.
+ *
+ * The available options are:
+ * - `fit`—Moves the Popup horizontally until it is fully displayed in the viewport.
+ * - `flip`—Flips the Popup position based on the origin and the position properties.
+ * - `none`—The Popup is rendered at its original position.
+ */
+export type CollisionType = CollisionTypeBase;

package/models/Events.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PopupHandle, PopupState } from '../Popup.js';
+/**
+ * Represents the object of the `Open` Popup event.
+ */
+export interface OpenEvent {
+    /**
+     * An event target.
+     */
+    target: PopupHandle;
+}
+/**
+ * Represents the object of the `Close` Popup event.
+ */
+export interface CloseEvent {
+    /**
+     * An event target.
+     */
+    target: PopupHandle;
+}
+/**
+ * Represents the object of the `Position` Popup event.
+ */
+export interface PositionEvent {
+    /**
+     * An event target.
+     */
+    target: PopupHandle;
+    /**
+     * Indicates if the position is fitted.
+     */
+    fitted: boolean;
+    /**
+     * Indicates if the position is flipped.
+     */
+    flipped: boolean;
+}
+/**
+ * Represents the object of the `MouseDownOutside` Popup event.
+ */
+export interface MouseDownOutsideEvent {
+    /**
+     * An event target.
+     */
+    target: PopupHandle;
+    /**
+     * The event object.
+     */
+    event: MouseEvent;
+    /**
+     * The state of the Popup.
+     */
+    state: PopupState;
+    /**
+     * Indicates if the MouseDown event is triggered over the anchor of the Popup.
+     */
+    isAnchorClicked: boolean;
+}

package/models/Margin.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { MarginSettings } from '@progress/kendo-popup-common';
+/**
+ * Defines the horizontal and the vertical margin offset of the component.
+ */
+export interface Margin extends MarginSettings {
+    /**
+     * Defines the possible horizontal margin value.
+     */
+    horizontal: number;
+    /**
+     * Defines the possible vertical margin value.
+     */
+    vertical: number;
+}

package/models/Offset.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { OffsetPosition } from '@progress/kendo-popup-common';
+/**
+ * The offset position of the Popup.
+ */
+export interface Offset extends OffsetPosition {
+    /**
+     * Defines the top position of the Popup.
+     */
+    top: number;
+    /**
+     * Defines the left position of the Popup.
+     */
+    left: number;
+}

package/models/PopupAnimation.d.ts

@@ -0,0 +1,188 @@
+/**
+ * @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']>;

package/models/PopupProps.d.ts

@@ -0,0 +1,235 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { Collision } from './Collision.js';
+import { Align } from './Align.js';
+import { OpenEvent, CloseEvent, PositionEvent, MouseDownOutsideEvent } from './Events.js';
+import { Offset } from './Offset.js';
+import { PopupAnimation } from './PopupAnimation.js';
+import { Margin } from './Margin.js';
+import { PositionMode } from './PositionMode.js';
+import { PopupSettings } from '@progress/kendo-popup-common';
+import { PopupClassStructure } from '@progress/kendo-react-common';
+/**
+ * Represents the props of the [KendoReact Popup component](https://www.telerik.com/kendo-react-ui/components/popup).
+ */
+export interface PopupProps extends PopupSettings {
+    /**
+     * Controls the Popup animation ([see example](https://www.telerik.com/kendo-react-ui/components/popup/animations)). By default, the opening and closing animations are enabled.
+     *
+     * @default true
+     *
+     * @example
+     * ```jsx
+     * <Popup animate={false} />
+     * ```
+     */
+    animate?: boolean | PopupAnimation;
+    /**
+     * Specifies the element which will be used as an anchor ([see example](https://www.telerik.com/kendo-react-ui/components/popup/aligning-positioning)). The Popup opens next to that element.
+     *
+     * @example
+     * ```jsx
+     * <Popup anchor={document.getElementById('anchorElement')} />
+     * ```
+     */
+    anchor?: HTMLElement | null;
+    /**
+     * Defines the container to which the Popup will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
+     * * If set to `null` the Popup will be rendered without React Portal.
+     *
+     * @default document.body
+     *
+     * @example
+     * ```jsx
+     * <Popup appendTo={document.getElementById('container')} />
+     * ```
+     */
+    appendTo?: HTMLElement | null;
+    /**
+     * Specifies the pivot point of the anchor ([see example](https://www.telerik.com/kendo-react-ui/components/popup/aligning-positioning)).
+     *
+     * @example
+     * ```jsx
+     * <Popup anchorAlign={{ horizontal: 'left', vertical: 'top' }} />
+     * ```
+     */
+    anchorAlign?: Align;
+    /**
+     * Configures the collision behavior of the Popup ([see example](https://www.telerik.com/kendo-react-ui/components/popup/viewport-boundary)).
+     *
+     * @example
+     * ```jsx
+     * <Popup collision={{ horizontal: 'fit', vertical: 'flip' }} />
+     * ```
+     */
+    collision?: Collision;
+    /**
+     * Configures the margin value that will be added to the popup dimensions
+     * in pixels and leaves a blank space between the popup and the anchor.
+     *
+     * @example
+     * ```jsx
+     * <Popup margin={{ horizontal: 10, vertical: 10 }} />
+     * ```
+     */
+    margin?: Margin;
+    /**
+     * Specifies the position mode of the component. By default, the Popup uses absolute positioning.
+     * To make the Popup acquire fixed positioning, set this option to `fixed`.
+     *
+     * @default "absolute"
+     *
+     * @example
+     * ```jsx
+     * <Popup positionMode="fixed" />
+     * ```
+     */
+    positionMode?: PositionMode;
+    /**
+     * Used to set the document scale when using a [scale transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale).
+     *
+     * The document or container scale is required to compute the popup position correctly. Detecting the scale is not reliable and must be set by providing a value for SCALE.
+     *
+     * > Using this token is not necessary for user-applied browser zoom.
+     *
+     * @example
+     * ```jsx
+     * <Popup scale={1.5} />
+     * ```
+     */
+    scale?: number;
+    /**
+     * Specifies the pivot point of the Popup ([see example](https://www.telerik.com/kendo-react-ui/components/popup/aligning-positioning)).
+     *
+     * @example
+     * ```jsx
+     * <Popup popupAlign={{ horizontal: 'center', vertical: 'bottom' }} />
+     * ```
+     */
+    popupAlign?: Align;
+    /**
+     * Specifies the absolute position of the element ([see example](https://www.telerik.com/kendo-react-ui/components/popup/aligning-positioning)). The Popup opens next to that point. The pivot point of the Popup is defined by the `popupAlign` configuration option. The boundary detection is applied by using the window viewport.
+     *
+     * @example
+     * ```jsx
+     * <Popup offset={{ left: 100, top: 200 }} />
+     * ```
+     */
+    offset?: Offset;
+    /**
+     * Specifies a list of CSS classes that will be added to the internal animated element ([see example](https://www.telerik.com/kendo-react-ui/components/popup/styling)).
+     *
+     * @example
+     * ```jsx
+     * <Popup popupClass="custom-popup-class" />
+     * ```
+     */
+    popupClass?: string | Array<string> | {
+        [key: string]: boolean;
+    };
+    /**
+     * Specifies a list of CSS classes that will be added to the Popup element.
+     *
+     * @example
+     * ```jsx
+     * <Popup className="custom-class" />
+     * ```
+     */
+    className?: string | Array<string>;
+    /**
+     * Specifies the id that will be added to the Popup element.
+     *
+     * @example
+     * ```jsx
+     * <Popup id="popup-id" />
+     * ```
+     */
+    id?: string;
+    /**
+     * Represents the styles that are applied to the Popup.
+     *
+     * @example
+     * ```jsx
+     * <Popup style={{ width: '200px', height: '100px' }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Fires after the Popup is opened and the opening animation ends.
+     *
+     * @example
+     * ```jsx
+     * <Popup onOpen={(event) => console.log('Popup opened')} />
+     * ```
+     */
+    onOpen?: (event: OpenEvent) => void;
+    /**
+     * Fires after the Popup is closed.
+     *
+     * @example
+     * ```jsx
+     * <Popup onClose={(event) => console.log('Popup closed')} />
+     * ```
+     */
+    onClose?: (event: CloseEvent) => void;
+    /**
+     * Fires after the Popup position is set.
+     *
+     * @example
+     * ```jsx
+     * <Popup onPosition={(event) => console.log('Popup positioned')} />
+     * ```
+     */
+    onPosition?: (event: PositionEvent) => void;
+    /**
+     * Fires when the mousedown event is triggered outside the Popup.
+     *
+     * @example
+     * ```jsx
+     * <Popup onMouseDownOutside={(event) => console.log('onMouseDownOutside')} />
+     * ```
+     */
+    onMouseDownOutside?: (event: MouseDownOutsideEvent) => void;
+    /**
+     * Controls the Popup visibility ([see example](https://www.telerik.com/kendo-react-ui/components/popup/hidden-state)). Defaults to `false`.
+     *
+     * @default false
+     *
+     * @example
+     * ```jsx
+     * <Popup show={true} />
+     * ```
+     */
+    show?: boolean;
+    /**
+     * @hidden
+     *
+     * If contentKey has changed, the popup will recalculate its position.
+     */
+    contentKey?: any;
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
+    /**
+     * @hidden
+     */
+    useBaseStyles?: boolean;
+    /**
+     * @hidden
+     */
+    role?: string;
+    /**
+     * @hidden
+     */
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+    /**
+     * @hidden
+     */
+    unstyled?: PopupClassStructure;
+}

package/models/PopupSettings.d.ts

@@ -0,0 +1,93 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { Collision } from './Collision.js';
+import { Align } from './Align.js';
+import { OpenEvent, CloseEvent } from './Events.js';
+import { Offset } from './Offset.js';
+import { PopupAnimation } from './PopupAnimation.js';
+import { Margin } from './Margin.js';
+import { PositionMode } from './PositionMode.js';
+import { PopupSettings as PopupSettingsBase } from '@progress/kendo-popup-common';
+/**
+ * @hidden
+ */
+export interface PopupSettings extends PopupSettingsBase {
+    /**
+     * Controls the Popup animation ([see example](https://www.telerik.com/kendo-react-ui/components/popup/animations)). By default, the opening and closing animations are enabled.
+     */
+    animate?: boolean | PopupAnimation;
+    /**
+     * Specifies the element which will be used as an anchor ([see example](https://www.telerik.com/kendo-react-ui/components/popup/aligning-positioning)). The Popup opens next to that element.
+     */
+    anchor?: HTMLElement | null;
+    /**
+     * Defines the container to which the Popup will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
+     */
+    appendTo?: HTMLElement | null;
+    /**
+     * Specifies the pivot point of the anchor ([see example](https://www.telerik.com/kendo-react-ui/components/popup/aligning-positioning)).
+     */
+    anchorAlign?: Align;
+    /**
+     * Configures the collision behavior of the Popup ([see example](https://www.telerik.com/kendo-react-ui/components/popup/viewport-boundary)).
+     */
+    collision?: Collision;
+    /**
+     * Configures the margin value that will be added to the popup dimensions
+     * in pixels and leaves a blank space between the popup and the anchor.
+     */
+    margin?: Margin;
+    /**
+     * Specifies the position mode of the component. By default, the Popup uses abosolute positioning.
+     * To make the Popup acquire fixed positioning, set this option to `fixed`.
+     *
+     * > If you need to support mobile browsers with the zoom option, use the `absolute` positioning of the Popup.
+     */
+    positionMode?: PositionMode;
+    /**
+     * Used to set the document scale when using a [scale transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale).
+     *
+     * The document or container scale is required to compute the popup position correctly. Detecting the scale is not reliable and must be set by providing a value for SCALE.
+     *
+     * > Using this token is not necessary for user-applied browser zoom.
+     *
+     */
+    scale?: number;
+    /**
+     * Specifies the pivot point of the Popup ([see example](https://www.telerik.com/kendo-react-ui/components/popup/aligning-positioning)).
+     */
+    popupAlign?: Align;
+    /**
+     * Specifies the absolute position of the element ([see example](https://www.telerik.com/kendo-react-ui/components/popup/aligning-positioning)). The Popup opens next to that point. The pivot point of the Popup is defined by the `popupAlign` configuration option. The boundary detection is applied by using the window viewport.
+     */
+    offset?: Offset;
+    /**
+     * Specifies a list of CSS classes that will be added to the internal animated element ([see example](https://www.telerik.com/kendo-react-ui/components/popup/styling)).
+     */
+    popupClass?: string | Array<string>;
+    /**
+     * Specifies a list of CSS classes that will be added to the Popup element.
+     */
+    className?: string | Array<string>;
+    /**
+     * Specifies the id that will be added to the Popup element.
+     */
+    id?: string;
+    /**
+     * Represents the styles that are applied to the Popup.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Fires after the Popup is opened and the opening animation ends.
+     */
+    onOpen?: (event: OpenEvent) => void;
+    /**
+     * Fires after the Popup is closed.
+     */
+    onClose?: (event: CloseEvent) => void;
+}

package/models/PositionMode.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PositionMode as PositionModeBase } from '@progress/kendo-popup-common';
+/**
+ * The type which defines all possible position modes of the Popup.
+ */
+export type PositionMode = PositionModeBase;

package/package-metadata.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PackageMetadata } from '@progress/kendo-licensing';
+/**
+ * @hidden
+ */
+export declare const packageMetadata: PackageMetadata;

package/package-metadata.mjs

@@ -0,0 +1,13 @@
+// Generated file. DO NOT EDIT.
+/**
+ * @hidden
+ */
+export const packageMetadata = Object.freeze({
+    name: '@progress/kendo-react-popup',
+    productName: 'KendoReact',
+    productCode: 'KENDOUIREACT',
+    productCodes: ['KENDOUIREACT'],
+    publishDate: 0,
+    version: '13.4.0-develop.2',
+    licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
+});