@atlaskit/popup
Version:
A popup displays brief content in an overlay.
72 lines (71 loc) • 2.87 kB
TypeScript
import React from 'react';
import { type ContentProps, type PopupProps as LegacyPopupProps, type TriggerProps } from '../types';
export type PopupProps = {
children: React.ReactNode;
isOpen?: boolean;
id?: string;
};
/**
* __Popup__
*
* Popup is a composable component that provides the context for the trigger and content components.
*
* Usage example:
* ```jsx
* <Popup>
* <PopupTrigger>
* {(props) => (
* <button type="button" {...props}>Click me</button>
* )}
* </PopupTrigger>
* <PopupContent>
* {(props) => <div>Hello world</div>}
* </PopupContent>
* </Popup>
* ```
*/
export declare const Popup: ({ children, id: providedId, isOpen }: PopupProps) => React.JSX.Element;
export type PopupTriggerProps = {
children: (props: TriggerProps) => React.ReactNode;
};
/**
* __Popup trigger__
*
* Popup trigger is the component that renders the trigger for the popup.
*
* It must be a child of the Popup component.
*/
export declare const PopupTrigger: ({ children }: PopupTriggerProps) => React.JSX.Element;
type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport'> & {
children: (props: ContentProps) => React.ReactNode;
/**
* ___Use with caution___
*
* Disables popper.js GPU acceleration for this popup.
* This means only positioning will be used, without any transforms.
*
* Performance will be degraded if the popup is expected to move.
*
* This should almost never be used, but is sometimes needed
* to resolve layering issues.
*/
shouldDisableGpuAcceleration?: boolean;
};
type ShouldFitContainerContentPopupProps = CommonContentPopupProps & {
shouldFitContainer: true;
shouldRenderToParent?: true;
strategy?: 'absolute';
};
type StandardPopupContentProps = CommonContentPopupProps & {
shouldFitContainer?: false;
};
export type PopupContentProps = ShouldFitContainerContentPopupProps | StandardPopupContentProps;
/**
* __Popup content__
*
* Popup content is the component that renders the content of the popup.
*
* It must be a child of the Popup component.
*/
export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, }: PopupContentProps) => React.JSX.Element | null;
export {};