pouncejs/dist/cjs/utils/useAlignment.d.ts

A collection of UI components from Panther labs

import React from 'react';
import { PRect } from '@reach/rect';
export declare type GetPositionProperties = (triggerElementRect?: PRect | null, floatingElementRect?: PRect | null, ...unstable_observableNodes: React.ReactNode[]) => Pick<React.CSSProperties, 'top' | 'left' | 'bottom' | 'right'>;
export declare type Alignment = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right' | 'left-bottom' | 'left-center' | 'left-top' | 'right-bottom' | 'right-center' | 'right-top';
/**
 * Αccepts an alignment and returns a function that when given 2 Rect instances, will return a  set of positional CSS
 * properties that the floating element should receive in order for it to be correctly aligned with its trigger element
 *
 * ###
 * This function is only to be used by @reach/ui elements. The one that any element can use is the `useAlignment` one
 * ###
 */
export declare const useAlignmentFunction: (alignment: Alignment) => GetPositionProperties;
/**
 * Αccepts a trigger reference, a floating element reference and an alignment and returns a set of positional CSS
 * properties that the floating element should receive in order for it to be correctly aligned with its trigger element
 */
export declare const useAlignment: (triggerElementRef: React.RefObject<HTMLElement>, floatingElementRef: React.RefObject<HTMLElement>, alignment: Alignment) => Pick<React.CSSProperties, "bottom" | "left" | "right" | "top">;