@wix/design-system/dist/types/Popover/Popover.types.d.ts

@wix/design-system

import { MouseEventHandler, CSSProperties, Component, ReactNode, FC, KeyboardEventHandler } from 'react';
import PopperJS from 'popper.js';
import { MoveBy } from './PopoverCore/utils/getModifiers';
import { Predicate } from './PopoverCore/utils/getAppendToElement';
export type Placement = PopperJS.Placement;
export type AppendTo = PopperJS.Boundary | 'parent' | Element | Predicate | null;
export interface PopoverProps {
    /** Specifies a CSS class name to be appended to the component’s root element.
     * @internal
     */
    className?: string;
    /** The location to display the content */
    placement?: Placement;
    /** Is the content shown or not */
    shown?: boolean;
    /** onClick on the component */
    onClick?: MouseEventHandler<HTMLDivElement>;
    /** Provides callback to invoke when clicked outside of the popover */
    onClickOutside?: (event: Event) => void;
    /** Provides callback to invoke when popover loses focus */
    onTabOut?: (event: KeyboardEvent) => void;
    /** Provides callback to invoke when popover loses focus */
    onEscPress?: KeyboardEventHandler<HTMLDivElement>;
    /**
     * Clicking on elements with this excluded class will will not trigger onClickOutside callback
     */
    excludeClass?: string;
    /** onMouseEnter on the component */
    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
    /** onMouseLeave on the component */
    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
    /** onKeyDown on the target component */
    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
    /** Show show arrow from the content */
    showArrow?: boolean;
    /**
     * Whether to enable the flip behaviour. This behaviour is used to flip the `<Popover/>`'s placement
     * when it starts to overlap the target element (`<Popover.Element/>`).
     */
    flip?: boolean;
    /**
     * Whether to enable the fixed behaviour. This behaviour is used to keep the `<Popover/>` at it's
     * original placement even when it's being positioned outside the boundary.
     */
    fixed?: boolean;
    /** Moves popover relative to the parent */
    moveBy?: MoveBy;
    /** Hide Delay in ms */
    hideDelay?: number;
    /** Show Delay in ms */
    showDelay?: number;
    /** Moves arrow by amount */
    moveArrowTo?: number;
    /** Enables calculations in relation to a dom element */
    appendTo?: AppendTo;
    /** Animation timer */
    timeout?: number | {
        enter: number;
        exit: number;
    };
    /** Inline style */
    style?: object;
    /** Id */
    id?: string;
    fluid?: boolean;
    /** Custom arrow element */
    customArrow?(placement: Placement, arrowProps: object): ReactNode;
    /** target element role value */
    role?: string;
    /** popover z-index */
    zIndex?: CSSProperties['zIndex'];
    /**
     * popovers content is set to minimum width of trigger element,
     * but it can expand up to the value of maxWidth.
     */
    dynamicWidth?: boolean;
    /**
     * popover content minWidth value
     * - `number` value which converts to css with `px`
     * - `string` value that contains `px`
     */
    minWidth?: number | string;
    /**
     * popover content maxWidth value
     * - `number` value which converts to css with `px`
     * - `string` value that contains `px`
     */
    maxWidth?: number | string;
    /**
     * popover content width value
     * - `number` value which converts to css with `px`
     * - `string` value that contains `px`
     */
    width?: number | string;
    /**
     * Breaking change:
     * When true - onClickOutside will be called only when popover content is shown
     * @default true
     */
    disableClickOutsideWhenClosed?: boolean;
    /**
     * Hook for testing purposes.
     */
    dataHook?: string;
    /**
     * tabindex for popover content element
     */
    tabIndex?: number;
    ['aria-label']?: string;
    ['aria-labelledby']?: string;
    ['aria-describedby']?: string;
    /**
     * Whether to animate the popover content when it is shown or hidden.
     */
    animate?: boolean;
    /**
     * Components skin value. Can be dark or light.
     */
    skin?: PopoverSkin;
    /**
     * @deprecated use skin instead
     */
    theme?: PopoverSkin;
    /** Callback to invoke when popover is shown */
    onShow?: () => void;
    /** Callback to invoke when popover is hidden */
    onHide?: () => void;
    children?: ReactNode;
    /** Enables hovering the popover content. */
    interactive?: boolean;
    /** Enables overlay for content. */
    overlay?: ReactNode;
}
export default class Popover extends Component<PopoverProps> {
    static Element: FC<{
        children: ReactNode;
    }>;
    static Content: FC<{
        children: ReactNode;
    }>;
}
export type PopoverSkin = 'dark' | 'light';
export type PopoverTheme = PopoverSkin;
//# sourceMappingURL=Popover.types.d.ts.map