@wordpress/components
Version:
UI components for WordPress.
50 lines • 2.84 kB
TypeScript
import type { WordPressComponentProps } from '../context';
import type { PopoverProps, PopoverSlotProps } from './types';
/**
* Name of slot in which popover should fill.
*
* @type {string}
*/
export declare const SLOT_NAME = "Popover";
export declare const PopoverSlot: import("react").ForwardRefExoticComponent<PopoverSlotProps & import("react").RefAttributes<HTMLDivElement>>;
/**
* `Popover` renders its content in a floating modal. If no explicit anchor is passed via props, it anchors to its parent element by default.
*
* ```jsx
* import { Button, Popover } from '@wordpress/components';
* import { useState } from '@wordpress/element';
*
* const MyPopover = () => {
* const [ isVisible, setIsVisible ] = useState( false );
* const toggleVisible = () => {
* setIsVisible( ( state ) => ! state );
* };
*
* return (
* <Button variant="secondary" onClick={ toggleVisible }>
* Toggle Popover!
* { isVisible && <Popover>Popover is toggled!</Popover> }
* </Button>
* );
* };
* ```
*
*/
export declare const Popover: import("../context").WordPressComponent<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | null, Omit<WordPressComponentProps<PopoverProps, "div", false>, "inherit" | "initial" | "layout" | "drag" | "transition" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "viewport" | "exit" | "whileHover" | "whileTap" | "whileDrag" | "whileFocus" | "whileInView" | "transformTemplate" | "data-framer-appear-id" | "variants" | "onBeforeLayoutMeasure" | "onLayoutMeasure" | "onUpdate" | "onAnimationComplete" | "onPan" | "onPanStart" | "onPanSessionStart" | "onPanEnd" | "onTap" | "onTapStart" | "onTapCancel" | "globalTapTarget" | "onHoverStart" | "onHoverEnd" | "onViewportEnter" | "onViewportLeave" | "dragDirectionLock" | "dragPropagation" | "dragConstraints" | "dragElastic" | "dragMomentum" | "dragTransition" | "dragControls" | "dragSnapToOrigin" | "dragListener" | "onMeasureDragConstraints" | "_dragX" | "_dragY" | "onDirectionLock" | "onDragTransitionEnd" | "layoutId" | "onLayoutAnimationStart" | "onLayoutAnimationComplete" | "layoutDependency" | "layoutScroll" | "layoutRoot" | "custom" | "ignoreStrict"> & import("react").RefAttributes<any>, boolean> & {
/**
* Renders a slot that is used internally by Popover for rendering content.
*/
Slot: import("react").ForwardRefExoticComponent<PopoverSlotProps & import("react").RefAttributes<HTMLDivElement>> & {
displayName: string;
};
/**
* Provides a context to manage popover slot names.
*
* This is marked as unstable and should not be used directly.
*/
__unstableSlotNameProvider: import("react").Provider<string | undefined> & {
displayName: string;
};
};
export default Popover;
//# sourceMappingURL=index.d.ts.map