@tempots/ui/renderables/pop-over.d.ts

Provides a higher level of renderables to help fast development with Tempo.

import { TNode, Value, Signal } from '@tempots/dom';
/**
 * Represents the placement options for a pop-over.
 *
 * @public
 */
export type Placement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
/**
 * Represents all possible placements for a pop-over.
 *
 * @public
 */
export declare const allPlacements: Placement[];
/**
 * Represents the options for the arrow of a pop-over.
 *
 * @public
 */
export type PopOverArrowOptions = {
    x?: number;
    y?: number;
    centerOffset: number;
    alignmentOffset?: number;
    placement: Placement;
    containerWidth: number;
    containerHeight: number;
};
/**
 * Represents the properties for a pop-over.
 *
 * @public
 */
export type PopOverOptions = {
    /**
     * Specifies the content of the PopOver.
     * This should be a function that returns a TNode.
     */
    content: TNode;
    /**
     * Specifies the placement of the PopOver.
     * This is an optional property.
     */
    placement?: Value<Placement>;
    /**
     * Specifies the offset on the main axis.
     */
    mainAxisOffset?: Value<number>;
    /**
     * Specifies the offset on the cross axis.
     */
    crossAxisOffset?: Value<number>;
    /**
     * Specifies the padding between the arrow and the edges of the floating element.
     */
    arrowPadding?: Value<number>;
    /**
     * Specifies the content of the arrow.
     */
    arrow?: (signal: Signal<PopOverArrowOptions>) => TNode;
    /**
     * Specifies the target element for the PopOver. If not provided, the PopOver will be
     * positioned relative to the parent element.
     */
    target?: string | HTMLElement;
    /**
     * Specifies a function to be called when a click occurs outside of the PopOver.
     */
    onClickOutside?: () => void;
};
/**
 * Creates a pop-over component.
 *
 * @param fn - A function that returns the content of the pop-over.
 * @param options - The options for the pop-over.
 * @returns The pop-over component.
 * @public
 */
export declare const PopOver: (fn: (open: (options: PopOverOptions) => void, close: () => void) => TNode, options?: {
    isOpen: Value<boolean>;
}) => import('@tempots/dom').Renderable<import('@tempots/dom').DOMContext>;