@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
99 lines • 3.72 kB
TypeScript
import { BaseComponentProps } from '../internal/base-component';
export interface PopoverProps extends BaseComponentProps {
/**
* Determines where the popover is displayed when opened, relative to the trigger.
* If the popover doesn't have enough space to open in this direction, it
* automatically chooses a better direction based on available space.
*/
position?: PopoverProps.Position;
/**
* Determines the maximum width for the popover.
*/
size?: PopoverProps.Size;
/**
* Expands the popover body to its maximum width regardless of content.
* For example, use it when you need to place a column layout in the popover content.
*/
fixedWidth?: boolean;
/**
* Specifies the type of content inside the trigger region. The following types are available:
* - `text` - Use for triggers containing inline components, like status indicator.
* - `text-inline` - Use for triggers containing plain text only.
* - `custom` - Use for the [button](/components/button/) component.
*/
triggerType?: PopoverProps.TriggerType;
/**
* Adds `aria-label` to the text trigger button. Use this to provide an accessible name for triggers
* that don't have visible text, and to distinguish between multiple triggers with identical visible text.
*/
triggerAriaLabel?: string;
/**
* Specifies if the text trigger content should wrap. If you set it to false, it prevents the text from
* wrapping and truncates it with an ellipsis.
*/
wrapTriggerText?: boolean;
/**
* Element that triggers the popover when selected by the user.
* @displayname trigger
*/
children?: React.ReactNode;
/**
* Specifies optional header text for the popover.
*/
header?: string;
/**
* Content of the popover.
*/
content?: React.ReactNode;
/**
* Determines whether the dismiss button is shown in the popover body.
*/
dismissButton?: boolean;
/**
* Adds an `aria-label` to the dismiss button for accessibility.
* @i18n
*/
dismissAriaLabel?: string;
/**
* By default, the popover is constrained to fit inside its parent
* [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).
* Enabling this property will allow the popover to be rendered in the root stack context using
* [React Portals](https://reactjs.org/docs/portals.html).
* Enable this setting if you need the popover to ignore its parent stacking context, such as in side navigation.
*
* Note: Using popover rendered with portal within a Modal is not supported.
*/
renderWithPortal?: boolean;
}
/**
* The position the popover is actually in, given space constraints.
*/
export type InternalPosition = 'right-top' | 'right-bottom' | 'left-top' | 'left-bottom' | 'top-center' | 'top-right' | 'top-left' | 'bottom-center' | 'bottom-right' | 'bottom-left';
export interface Offset {
insetInlineStart: number;
insetBlockStart: number;
}
export interface Dimensions {
inlineSize: number;
blockSize: number;
}
export type BoundingBox = Dimensions & Offset;
export type Rect = BoundingBox & {
insetBlockEnd: number;
insetInlineEnd: number;
};
export declare namespace PopoverProps {
type Position = 'top' | 'right' | 'bottom' | 'left';
type Size = 'small' | 'medium' | 'large';
type TriggerType = 'text' | 'text-inline' | 'custom';
interface Ref {
/**
* Sets focus on the popover's trigger and dismisses the popover if open.
*/
focus(): void;
/**
* Dismisses the popover without focusing the trigger. Use only if an element other than the trigger needs to be focused after dismissing the popover.
*/
dismiss(): void;
}
}