flexipop/dist/create-overlay.d.ts

declare type Alignment = 'start' | 'middle' | 'end';

/**
 * CreateOverlay class for managing overlay/popup UI components
 * @example
 * const overlay = new CreateOverlay({
 *   trigger: '#triggerButton',
 *   content: '#popupContent',
 *   options: {
 *     triggerStrategy: 'click',
 *     placement: 'bottom',
 *     offsetDistance: 10
 *   }
 * });
 *
 * @type {OverlayOptions}
 * @property {'click' | 'hover'} [triggerStrategy='click'] - How the overlay is triggered
 * @property {string} [placement='bottom'] - Where the overlay is positioned relative to trigger
 * @property {number} [offsetDistance=6] - Distance between trigger and overlay
 * @property {boolean} [preventFromCloseOutside=false] - Prevents closing when clicking outside
 * @property {boolean} [preventCloseFromInside=false] - Prevents closing when clicking inside
 * @property {'open' | 'close'} [defaultState='close'] - Initial state of the overlay
 */
export declare class CreateOverlay {
    private triggerElement;
    private contentElement;
    private triggerStrategy;
    private placement;
    private offsetDistance;
    private preventFromCloseOutside;
    private preventFromCloseInside;
    private options;
    private defaultState;
    private popper;
    private eventEffect;
    /**
     * Creates an instance of CreateOverlay
     * @param {Object} params - The initialization parameters
     * @param {string | HTMLElement} params.trigger - The trigger element selector or HTMLElement
     * @param {string | HTMLElement} params.content - The content element selector or HTMLElement
     * @param {OverlayOptions} [params.options] - Configuration options for the overlay
     */
    constructor({ trigger, content, options }: {
        trigger: string | HTMLElement;
        content: string | HTMLElement;
        options?: OverlayOptions;
    });
    private getElement;
    private handleDocumentClick;
    private handleKeyDown;
    private onToggleState;
    private toggleStateOnClick;
    private hideOnMouseLeaseTrigger;
    private hideOnMouseLeave;
    private addEventOnMouseEnter;
    private showOnMouseEnter;
    /**
     * Shows the overlay
     * Positions the overlay, adds event listeners, and triggers related callbacks
     */
    show(): void;
    /**
     * Updates the overlay's show options and displays it
     * @param {Object} params - The show options
     * @param {Placement} params.placement - The new placement position
     * @param {number} [params.offsetDistance] - The new offset distance
     */
    setShowOptions: ({ placement, offsetDistance }: {
        placement: Placement;
        offsetDistance?: number;
    }) => void;
    /**
     * Updates the popper's positioning options
     * @param {Object} params - The popper options
     * @param {Placement} params.placement - The new placement position
     * @param {number} [params.offsetDistance] - The new offset distance
     */
    setPopperOptions: ({ placement, offsetDistance }: {
        placement: Placement;
        offsetDistance?: number;
    }) => void;
    /**
     * Updates the popper's trigger reference Element and options
     * The new set trigger will be used as reference for the popper
     */
    setPopperTrigger: (trigger: HTMLElement, options: {
        placement?: Placement;
        offsetDistance?: number;
    }) => void;
    /**
     * Hides the overlay
     * Removes event listeners and triggers related callbacks
     */
    hide(): void;
    private initInstance;
    /**
     * Cleans up event listeners and related callbacks
     */
    cleanup: () => void;
}

declare type Direction = 'top' | 'left' | 'bottom' | 'right';

/**
 * Configuration options for controlling event-based behaviors
 */
declare type EventEffect = {
    /** Disable popover response to scroll events */
    disableOnScroll?: boolean;
    /** Disable popover response to window resize events */
    disableOnResize?: boolean;
};

/**
 * Configuration options for the Popover component
 */
export declare type OverlayOptions = {
    /** Initial state of the overlay ("open" or "close") */
    defaultState?: "open" | "close";
    /** Prevent overlay from closing when clicking outside */
    preventFromCloseOutside?: boolean;
    /** Prevent overlay from closing when clicking inside */
    preventCloseFromInside?: boolean;
    /** Position of the overlay relative to its trigger element */
    placement?: Placement;
    /** Distance in pixels between overlay and trigger element */
    offsetDistance?: number;
    /** How the overlay is triggered ("click" or "hover") */
    triggerStrategy?: "click" | "hover";
    /** Popper-specific configuration */
    popper?: {
        /** Event-related effects configuration */
        eventEffect: EventEffect;
    };
    /** Callback function executed before Overlay shows */
    beforeShow?: () => void;
    /** Callback function executed before Overlay hides */
    beforeHide?: () => {
        cancelAction?: boolean;
    } | void;
    /** Callback function executed after Overlay shows */
    onShow?: () => void;
    /** Callback function executed after Overlay hides */
    onHide?: () => void;
    /** Callback function executed when Overlay visibility toggles */
    onToggle?: ({ isHidden }: {
        isHidden?: boolean;
    }) => void;
};

export declare type Placement = `${Direction}-${Alignment}` | Direction;

export { }