@progress/kendo-react-popup

/** * @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; }