@fluentui/react-northstar
Version:
A themable React component library.
68 lines (67 loc) • 3.32 kB
TypeScript
import { Accessibility, PopupBehaviorProps } from '@fluentui/accessibility';
import { AutoFocusZoneProps, FocusTrapZoneProps } from '@fluentui/react-bindings';
import * as React from 'react';
import { ChildrenComponentProps, ContentComponentProps } from '../../utils';
import { ComponentEventHandler, FluentComponentStaticProps, ShorthandValue } from '../../types';
import { PositioningProps } from '../../utils/positioner';
import { PopupContent, PopupContentProps } from './PopupContent';
export declare type PopupEvents = 'click' | 'hover' | 'focus' | 'context';
export declare type RestrictedClickEvents = 'click' | 'focus';
export declare type RestrictedHoverEvents = 'hover' | 'focus' | 'context';
export declare type PopupEventsArray = RestrictedClickEvents[] | RestrictedHoverEvents[];
export interface PopupProps extends ChildrenComponentProps, ContentComponentProps<ShorthandValue<PopupContentProps>>, PositioningProps {
/**
* Accessibility behavior if overridden by the user.
* @available dialogBehavior
*/
accessibility?: Accessibility<PopupBehaviorProps>;
/** Initial value for 'open'. */
defaultOpen?: boolean;
/** Whether the Popup should be rendered inline with the trigger or in the body. */
inline?: boolean;
/** Existing element the popup should be bound to. */
mountNode?: HTMLElement;
/** Delay in ms for the mouse leave event, before the popup will be closed. */
mouseLeaveDelay?: number;
/** Events triggering the popup. */
on?: PopupEvents | PopupEventsArray;
/** Defines whether popup is displayed. */
open?: boolean;
/**
* Event for request to change 'open' value.
* @param event - React's original SyntheticEvent.
* @param data - All props and proposed value.
*/
onOpenChange?: ComponentEventHandler<PopupProps>;
/** A popup can show a pointer to trigger. */
pointing?: boolean;
/**
* Function to render popup content.
* @deprecated Please use `popperRef` to get an imperative handle to Popper's APIs.
* @param updatePosition - function to request popup position update.
*/
renderContent?: (updatePosition: Function) => ShorthandValue<PopupContentProps>;
/**
* DOM element that should be used as popup's target - instead of 'trigger' element that is used by default.
*/
target?: HTMLElement;
/** Element to be rendered in-place where the popup is defined. */
trigger?: JSX.Element;
/** Whether the trigger should be tabbable */
tabbableTrigger?: boolean;
/** Ref for Popup content DOM node. */
contentRef?: React.Ref<HTMLElement>;
/** Controls whether or not focus trap should be applied, using boolean or FocusTrapZoneProps type value. */
trapFocus?: boolean | FocusTrapZoneProps;
/** Controls whether or not auto focus should be applied, using boolean or AutoFocusZoneProps type value. */
autoFocus?: boolean | AutoFocusZoneProps;
/** Close the popup when scroll happens outside of Popup */
closeOnScroll?: boolean;
}
export declare const popupClassName = "ui-popup";
/**
* A Popup displays a non-modal, often rich content, on top of its target element.
*/
export declare const Popup: React.FC<PopupProps> & FluentComponentStaticProps<PopupProps> & {
Content: typeof PopupContent;
};