@trail-ui/react
Version:
56 lines (52 loc) • 2.08 kB
TypeScript
import { AriaOverlayProps, AriaPositionProps } from '@react-aria/overlays';
import { DOMAttributes } from '@react-types/shared';
import { RefObject } from 'react';
import { PlacementAxis } from 'react-aria';
import { OverlayTriggerState } from 'react-stately';
/**
* This code comes from @react-aria/overlays
*/
interface AriaPopoverProps extends AriaOverlayProps, Omit<AriaPositionProps, 'isOpen' | 'onClose' | 'targetRef' | 'overlayRef'> {
/**
* The ref for the element which the popover positions itself with respect to.
*/
triggerRef: RefObject<Element>;
/**
* The ref for the popover element.
*/
popoverRef: RefObject<Element>;
/**
* Whether the popover is non-modal, i.e. elements outside the popover may be
* interacted with by assistive technologies.
*
* Most popovers should not use this option as it may negatively impact the screen
* reader experience. Only use with components such as combobox, which are designed
* to handle this situation carefully.
*/
isNonModal?: boolean;
/**
* Whether pressing the escape key to close the popover should be disabled.
*
* Most popovers should not use this option. When set to true, an alternative
* way to close the popover with a keyboard must be provided.
*
* @default false
*/
isKeyboardDismissDisabled?: boolean;
}
interface PopoverAria {
/** Props for the popover element. */
popoverProps: DOMAttributes;
/** Props for the popover tip arrow if any. */
arrowProps: DOMAttributes;
/** Props to apply to the underlay element, if any. */
underlayProps: DOMAttributes;
/** Placement of the popover with respect to the trigger. */
placement: PlacementAxis;
}
/**
* Provides the behavior and accessibility implementation for a popover component.
* A popover is an overlay element positioned relative to a trigger.
*/
declare function usePopover(props: AriaPopoverProps, state: OverlayTriggerState): PopoverAria;
export { AriaPopoverProps, PopoverAria, usePopover };