import { FloatingContext, FloatingFocusManager, OffsetOptions, Placement, ReferenceType, Strategy, UseRoleProps } from '@floating-ui/react'; import { ComponentProps, ReactNode } from 'react'; export type OverlayOpenWith = 'click' | 'hover'; export interface OverlayProps { /** * Trigger and Content components */ children: ReactNode | ReactNode[]; /** * Props passed to FloatingFocusManager */ focusManager?: Omit, 'context' | 'children'>; /** * Adds correct event listeners that change the open state. * @default hover */ openWith?: OverlayOpenWith; /** * Is open by default?
* Does not work with open and onToggle props. * @default false */ defaultOpen?: boolean; /** * Is open?
* Use this with onToggle prop for controlled component. */ open?: boolean; /** * Callback when toggled.
* Use this with open prop for state outside of component. */ onToggle?: (open: boolean) => void; /** * Is dismissible by clicking outside of content or Escape button? * @default true */ dismissible?: boolean; /** * Is scrolling locked outside of content? * @default false */ scrollLock?: boolean; /** * Changes aria attributes on trigger and content based on the components role * @default tooltip */ role?: UseRoleProps['role']; /** * Content overlay arrow dimensions. */ arrowDimensions?: { width: number; height: number; }; /** * Placement of content. * @default top */ placement?: Placement; /** * Offset of content. * @default GAP + arrow height */ offset?: OffsetOptions; /** * Re-measure the floating element every animation frame while mounted. * * Enable this when the trigger/reference element's position can change without a * DOM-observable event (e.g. position driven by an inherited CSS custom property on an * ancestor). The default `autoUpdate` only reacts to scroll, resize, and element-size * changes, so position-only movement goes unnoticed and the overlay lags behind. * * Opt-in because animation-frame tracking is more expensive than the default. * @default false */ trackReferencePosition?: boolean; /** * Minimum distance (in px) between the arrow and the edges of the content. * Helps keep the arrow away from rounded corners, especially on `-start` and `-end` placements. * Use a larger value for bigger arrows or arrows with borders. * @default 4 */ arrowPadding?: number; } export interface OverlayContextType { open: boolean; onOpenChange: (open: boolean) => void; isMounted: boolean; openWith: OverlayOpenWith; focusManager?: OverlayProps['focusManager']; reference: (node: ReferenceType | null) => void; floating: (node: HTMLElement | null) => void; arrowRef: React.MutableRefObject; x: number; y: number; strategy: Strategy; getReferenceProps: (userProps?: React.HTMLProps | undefined) => Record; getFloatingProps: (userProps?: React.HTMLProps | undefined) => Record; arrow?: { width?: number; height?: number; x?: number; y?: number; centerOffset?: number; }; placement: Placement; context: FloatingContext; scrollLock?: boolean; role?: UseRoleProps['role']; contentId: string; } export declare const OverlayContext: import('react').Context; export declare const Overlay: { (props: OverlayProps): import("react/jsx-runtime").JSX.Element; Trigger: (props: import('./overlay-trigger').OverlayTriggerProps) => import("react/jsx-runtime").JSX.Element; Content: (props: import('./overlay-content').OverlayContentProps) => import("react/jsx-runtime").JSX.Element | null; }; export default Overlay;