carbon-react
Version:
A library of reusable React components for easily building user interfaces.
79 lines (78 loc) • 3.6 kB
TypeScript
import React from "react";
import { PaddingProps } from "styled-system";
import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
import { BoxProps } from "../box";
export interface RenderOpenProps {
tabIndex: number;
isOpen?: boolean;
"data-element"?: string;
onClick: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void;
ref: React.RefObject<HTMLButtonElement>;
"aria-label"?: string;
id?: string;
"aria-expanded": boolean;
"aria-haspopup": "dialog";
"data-popover-container-button"?: string;
}
export declare const renderOpen: ({ tabIndex, onClick, "data-element": dataElement, ref, "aria-label": ariaLabel, id, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, }: RenderOpenProps) => React.JSX.Element;
export interface RenderCloseProps {
"data-element"?: string;
tabIndex: number;
onClick: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void;
ref: React.RefObject<HTMLButtonElement>;
"aria-label": string;
closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
}
export declare const renderClose: ({ "data-element": dataElement, tabIndex, onClick, ref, "aria-label": ariaLabel, closeButtonDataProps, }: RenderCloseProps) => React.JSX.Element;
type Position = "left" | "right" | "center";
export interface PopoverContainerProps extends PaddingProps, TagProps {
/** A function that will render the open component
*
* `({tabIndex, isOpen, data-element, onClick, ref, aria-label}) => ()`
*
*/
renderOpenComponent?: (args: RenderOpenProps) => JSX.Element;
/** A function that will render the close component
*
* `({data-element, tabIndex, onClick, ref, aria-label}) => ()`
*
*/
renderCloseComponent?: (args: RenderCloseProps) => JSX.Element;
/** The content of the popover-container */
children?: React.ReactNode;
/** Sets rendering position of dialog */
position?: Position;
/** The popover offset from the reference element */
offset?: number;
/** Sets the popover container dialog header name */
title?: string;
/** Sets the border radius of the popover container */
borderRadius?: BoxProps["borderRadius"];
/** Callback fires when close icon clicked */
onClose?: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLElement> | Event) => void;
/** if `true` the popover-container is open */
open?: boolean;
/** Callback fires when open component is clicked */
onOpen?: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void;
/** if `true` the popover-container will cover open button */
shouldCoverButton?: boolean;
/** The id of the element that describe the dialog. */
ariaDescribedBy?: string;
/** Open button aria label */
openButtonAriaLabel?: string;
/** Close button aria label */
closeButtonAriaLabel?: string;
/** Data tag prop bag for close Button */
closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
/** Container aria label */
containerAriaLabel?: string;
/** Disables the animation for the component */
disableAnimation?: boolean;
/** Flag to enable fullWidth Button styles */
hasFullWidth?: boolean;
}
export type PopoverContainerHandle = {
focusButton: () => void;
} | null;
export declare const PopoverContainer: React.ForwardRefExoticComponent<PopoverContainerProps & React.RefAttributes<PopoverContainerHandle>>;
export default PopoverContainer;