@progress/kendo-react-popup
Version:
React Popup positions a piece of content next to a specific anchor component. KendoReact Popup package
94 lines (93 loc) • 4.25 kB
TypeScript
/**
* @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;
}