@govbr-ds/webcomponents/dist/types/utils/floating-ui.d.ts

Biblioteca de Web Components baseado no GovBR-DS

import { Placement } from '@floating-ui/dom';
/**
 * FloatingUIManagerOptions define as opções para o FloatingUIManager.
 */
export interface FloatingUIManagerOptions {
    triggerElement: HTMLElement;
    contentElement: HTMLElement;
    arrowElement?: HTMLElement;
    placement?: Placement;
    onUpdate?: (data: {
        x: number;
        y: number;
        placement: string;
        middlewareData: import('@floating-ui/dom').MiddlewareData;
    }) => void;
}
/**
 * FloatingUIManager é uma classe utilitária que gerencia o posicionamento de elementos flutuantes
 * como tooltips ou popovers em relação a um elemento de disparo (trigger).
 * Ela utiliza a biblioteca Floating UI para calcular posições e lidar com atualizações.
 */
export declare class FloatingUIManager {
    private triggerElement;
    private contentElement;
    private arrowElement?;
    private placement;
    private onUpdate?;
    private cleanupAutoUpdate?;
    constructor(options: FloatingUIManagerOptions);
    /**
     * Inicia o gerenciador Floating UI configurando a atualização automática da posição.
     */
    start(): void;
    /**
     * Para o gerenciador Floating UI e limpa os recursos utilizados.
     */
    stop(): void;
    /**
     * Atualiza a posição do elemento flutuante com base no elemento disparador e no elemento de conteúdo.
     * Esta função é chamada automaticamente quando o gerenciador está ativo.
     * Ela calcula a nova posição usando a biblioteca Floating UI e aplica as transformações necessárias.
     * Também atualiza a posição da seta, se fornecida.
     * Além disso, define o atributo de dados `data-placement` no elemento de conteúdo para refletir a posição atual.
     * @returns {Promise<void>} Uma promessa que resolve quando a posição é atualizada.
     */
    private updatePosition;
    /**
     * Constrói os middlewares necessários para o Floating UI.
     * Esses middlewares são usados para ajustar o posicionamento do elemento flutuante,
     * incluindo offset, flip, shift e hide. Se uma seta for fornecida, o middleware de seta também é adicionado.
     * @returns {Middleware[]} Retorna um array de middlewares configurados para o Floating UI.
     */
    private buildMiddleware;
    /**
     * Adiciona o estilo necessário para posicionar o tooltip com base nas coordenadas fornecidas.
     * Esta função é chamada após o cálculo da posição do tooltip.
     * Ela aplica as propriedades CSS `left` e `top` ao elemento de conteúdo do tooltip.
     * @param data Contém as coordenadas x e y para posicionar o tooltip.
     */
    private updateTooltipPosition;
    /**
     * Adiciona o estilo necessário para posicionar a seta do tooltip com base nos dados de middleware.
     * Esta função é chamada após o cálculo da posição do tooltip.
     * Ela aplica as propriedades CSS `left`, `top`, `right`, `bottom` e a posição estática da seta.
     * A posição estática é determinada com base na colocação do tooltip (top, right, bottom, left).
     * Se a seta não estiver presente ou os dados de middleware não contiverem informações sobre a seta, nada será feito.
     * @param data Contém a posição da seta e os dados de middleware.
     */
    private updateArrowPosition;
    /**
     * Define o atributo de dados `data-placement` no elemento de conteúdo.
     * Este atributo é usado para indicar a posição atual do tooltip ou popover.
     * Ele é útil para fins de acessibilidade e para permitir que estilos CSS sejam aplicados com base na posição.
     * @param data Objeto contendo a propriedade `placement` que define a posição do tooltip ou popover.
     *            A propriedade `placement` deve ser uma string representando a posição, como 'top', 'bottom', 'left', 'right', etc.
     */
    private setPlacementDataAttribute;
}