/** @module @airtable/blocks/ui: Popover */ /** */ import * as PropTypes from 'prop-types'; import * as React from 'react'; import { ObjectValues, FlowAnyObject, FlowAnyFunction } from '../private_utils'; import * as Geometry from './geometry/geometry'; /** * Dictates how a {@link Tooltip} component should be positioned relative * to the anchor element. Accessed via `Tooltip.placements`. */ export declare enum PopoverPlacements { /** Positions the popover above the anchor element. */ TOP = "top", /** Positions the popover below the anchor element. */ BOTTOM = "bottom", /** Positions the popover so it's center aligned with the anchor element. */ CENTER = "center", /** Positions the popover left of the anchor element. */ LEFT = "left", /** Positions the popover right of the anchor element. */ RIGHT = "right" } /** * Any of the supported {@link PopoverPlacements} for horizontal positioning. */ export declare type PopoverPlacementX = PopoverPlacements.LEFT | PopoverPlacements.CENTER | PopoverPlacements.RIGHT; /** * Any of the supported {@link PopoverPlacements} for vertical positioning. */ export declare type PopoverPlacementY = PopoverPlacements.TOP | PopoverPlacements.CENTER | PopoverPlacements.BOTTOM; /** * Dictates how a {@link Popover} or {@link Tooltip} component should be kept within the viewport. Accessed via `Popover.fitInWindowModes` or `Tooltip.fitInWindowModes`. */ export declare enum FitInWindowModes { /** Allow the popover to be placed offscreen. */ NONE = "none", /** If the popover would be placed offscreen, flip the placement to the other side. */ FLIP = "flip", /** If the popover would be placed offscreen, nudge the popover just enough so that it stays in the viewport. */ NUDGE = "nudge" } /** * Any of the supported {@link FitInWindowModes}. */ export declare type FitInWindowMode = ObjectValues; /** * Props for the {@link Popover} component. * * @hidden */ interface PopoverProps { /** Child elements to render. */ children: React.ReactElement; /** The horizontal placement of the popover. Defaults to {@link PopoverPlacements.RIGHT}. */ placementX: PopoverPlacementX; /** The vertical placement of the popover. Defaults to {@link PopoverPlacements.CENTER}. */ placementY: PopoverPlacementY; /** The horizontal offset, in pixels, of the popover. If `placementX` is set to {@link PopoverPlacements.LEFT}, a higher number will move the popover to the left. If `placementX` is set to {@link PopoverPlacements.RIGHT}, a higher number moves the popover to the right. If `placementX` is set to {@link PopoverPlacements.CENTER}, this value has no effect. Defaults to 0. */ placementOffsetX: number; /** The vertical offset, in pixels, of the popover. If `placementY` is set to {@link PopoverPlacements.TOP}, a higher number will move the popover upward. If `placementY` is set to {@link PopoverPlacements.BOTTOM}, a higher number moves the popover downard. If `placementY` is set to {@link PopoverPlacements.CENTER}, this value has no effect. Defaults to 0. */ placementOffsetY: number; /** A function that returns the contents of the popover as React elements. */ renderContent: () => React.ReactElement; /** Dictates the behavior when the "normal" placement of the popover would be outside of the viewport. Defaults to {@link FitInWindowModes.FLIP}. */ fitInWindowMode: FitInWindowMode; /** A function that will be called when the popover closes. */ onClose?: () => void; /** A boolean that dictates whether the popover is open. */ isOpen: boolean; /** Extra class names for the background of the popover, separated by spaces. */ backgroundClassName?: string; /** Extra styles for the background of the popover. */ backgroundStyle?: FlowAnyObject; } /** * A popover component, which is used to "float" some content above some other content. * * @hidden * @docsPath UI/components/Popover * @component */ declare class Popover extends React.Component { /** @hidden */ static placements: typeof PopoverPlacements; /** @hidden */ static fitInWindowModes: typeof FitInWindowModes; /** @hidden */ static propTypes: { children: PropTypes.Validator; renderContent: PropTypes.Validator<(...args: any[]) => any>; placementX: PropTypes.Requireable; placementY: PropTypes.Requireable; placementOffsetX: PropTypes.Requireable; placementOffsetY: PropTypes.Requireable; fitInWindowMode: PropTypes.Requireable>; onClose: PropTypes.Requireable<(...args: any[]) => any>; isOpen: PropTypes.Requireable; backgroundClassName: PropTypes.Requireable; backgroundStyle: PropTypes.Requireable; }; /** @hidden */ static defaultProps: { placementX: PopoverPlacements; placementY: PopoverPlacements; placementOffsetX: number; placementOffsetY: number; fitInWindowMode: FitInWindowModes; isOpen: boolean; }; /** @internal */ _container: null | HTMLElement; /** @internal */ _background: null | HTMLDivElement; /** @internal */ _popoverContent: null | HTMLElement; /** @internal */ _mouseDownOutsidePopover: boolean; /** @internal */ _detectElementResize: { addResizeListener: FlowAnyFunction; removeResizeListener: FlowAnyFunction; } | null | undefined; /** @hidden */ constructor(props: PopoverProps); /** @hidden */ componentDidMount(): void; /** @hidden */ UNSAFE_componentWillReceiveProps(nextProps: PopoverProps): void; /** @hidden */ componentDidUpdate(): void; /** @hidden */ componentWillUnmount(): void; /** @internal */ _createContainer(): void; /** @internal */ _destroyContainer(): void; /** @internal */ get _anchor(): Element | Text | null; /** @internal */ _refreshContainerAsync(): Promise; /** @internal */ _isRectContainedWithinViewportRect(rect: Geometry.Rect, viewportRect: Geometry.Rect): boolean; /** @internal */ _getPlacedPopoverRect(popoverSize: Geometry.Size, anchorRect: Geometry.Rect, placementX: PopoverPlacementX, placementY: PopoverPlacementY): Geometry.Rect; /** @internal */ _renderPopoverAtPositionAsync(left: number, top: number): Promise; /** @internal */ _onMouseDown(e: React.MouseEvent): void; /** @internal */ _onMouseUp(e: React.MouseEvent): void; /** @internal */ _shouldClickingOnElementClosePopover(element: EventTarget): boolean; /** @hidden */ render(): React.ReactElement> & React.ReactNode; } export default Popover;