/**
 * @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';
import { Align } from './Align';
import { OpenEvent, CloseEvent, PositionEvent, MouseDownOutsideEvent } from './Events';
import { Offset } from './Offset';
import { PopupAnimation } from './PopupAnimation';
import { Margin } from './Margin';
import { PositionMode } from './PositionMode';
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
     */
    ariaLabelledBy?: string;
    /**
     * @hidden
     */
    ariaDescribedBy?: string;
    /**
     * @hidden
     */
    onKeyDown?: (event: React.KeyboardEvent) => void;
    /**
     * @hidden
     */
    unstyled?: PopupClassStructure;
}