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

@wix/design-system

import * as React from 'react';
import { MoveByOffset } from '../common';
import { AppendTo, Placement } from '../Popover';
import { DropdownBaseProps } from '../DropdownBase';
export interface PopoverTriggerElementProps {
    onClick?: () => void;
    toggle: () => void;
    open: () => void;
    close: (event?: React.SyntheticEvent) => void;
    isOpen: boolean;
    ref?: React.RefObject<HTMLElement>;
}
export interface PopoverMenuProps {
    /** Defines a component that calls out a Popover menu (`<IconButton />`, `<Button />` or `<Text Button />`) */
    triggerElement: React.ReactNode | React.FC<PopoverTriggerElementProps>;
    /**
     * Stores Popover menu compound components:
     * - <PopoverMenu.MenuItem />
     * - <PopoverMenu.Divider /> (optional)
     * - <PopoverMenu.SectionTitle /> (optional)
     *
     * `<PopoverMenu.MenuItem>` component has these fields:
     *  * `text` - Sets a label for a Popover menu item
     *  * `onClick` - Defines a callback function which is called when a Popover menu item is clicked on
     *  * `skin` - Controls the appearance of a Popover menu item (one of `standard`, `dark`, `destructive`)
     *  * `prefixIcon` - Contains an icon at the start of a Popover menu item
     *  * `dataHook` - Applies a data-hook HTML attribute to be used in the tests
     *  * `suffixIcon` - suffix icon property
     *  * `disabled` - Disables a Popover menu item
     *  * `subtitle` - Sets a text for a Popover menu item subtitle\
     *
     * `<PopoverMenu.Divider>` component has these fields:
     * * `dataHook` - Applies a data-hook HTML attribute to be used in the tests
     *
     * `<PopoverMenu.SectionTitle>` component has these fields:
     * * `dataHook` - Applies a data-hook HTML attribute to be used in the tests
     * * `title` - Acts as a title for following list items.
     */
    children?: React.ReactNode;
    /** Sets a maximum width for a Popover menu
     * @default 204
     */
    maxWidth?: DropdownBaseProps['maxWidth'];
    /** Sets a minimum width for a Popover menu
     * @default 144
     */
    minWidth?: DropdownBaseProps['minWidth'];
    /** Sets a maximum height for a Popover menu
     * @default 'auto'
     */
    maxHeight?: DropdownBaseProps['maxHeight'];
    /** Sets the Popover z-index */
    zIndex?: number;
    /** Moves Popover menu overlay relative to its trigger element by a defined number of px:
     * - horizontally (on X-axis)
     * - or vertically (on Y-axis)
     */
    moveBy?: MoveByOffset;
    /** Defines the Popover menu’s overlay placement in relation to its trigger element:
     *  * auto-start
     *  * auto
     *  * auto-end
     *  * top-start
     *  * top
     *  * top-end
     *  * right-start
     *  * right
     *  * right-end
     *  * bottom-start
     *  * bottom
     *  * bottom-end
     *  * left-start
     *  * left
     *  * left-end
     * @default 'bottom'
     */
    placement?: Placement;
    /** Sets the size of text in Popover menu items
     * @default 'medium'
     */
    textSize?: 'small' | 'medium';
    /** Truncates menu item text that overflows component’s max Width
     * @default false
     */
    ellipsis?: boolean;
    /** Allows truncating the trigger element to a specified parent container width.
     * @default false
     */
    fluid?: boolean;
    /** Enables calculations in relation to a DOM element
     * @default 'window'
     */
    appendTo?: AppendTo;
    /** Enables the flip behaviour. This behaviour is used to flip the overlay placement when it starts to overlap the trigger element.
     * @default true
     */
    flip?: boolean;
    /** Enables the fixed behaviour. This behaviour is used to keep the overlay at its original placement even when it is being positioned outside the boundary.
     * @default true
     */
    fixed?: boolean;
    /** Controls visibility of the pointer arrow
     * @default true
     */
    showArrow?: boolean;
    /** Applies a data-hook HTML attribute to be used in the tests */
    dataHook?: string;
    /** Specifies a CSS class name to be appended to the component’s root element.
     * @internal
     */
    className?: string;
    /** Defines a callback function which is called when a Popover menu is closed */
    onHide?: () => void;
    /** Defines a callback function which is called when a Popover menu is opened */
    onShow?: () => void;
    /** A fixed footer to the list */
    fixedFooter?: DropdownBaseProps['fixedFooter'];
}
export interface PopoverMenuItemProps {
    text?: React.ReactNode;
    onClick?: () => void;
    skin?: 'standard' | 'dark' | 'destructive';
    prefixIcon?: React.ReactNode;
    suffixIcon?: React.ReactNode;
    dataHook?: string;
    disabled?: boolean;
    disabledDescription?: string;
    subtitle?: string;
}
export interface PopoverMenuDividerProps {
    dataHook?: string;
}
export interface PopoverMenuSectionTitleProps {
    title?: React.ReactNode;
    dataHook?: string;
}
export interface PopoverMenuRefHandle {
    _open: () => void;
}
export type PopoverMenuComponent = React.ForwardRefExoticComponent<PopoverMenuProps & React.RefAttributes<PopoverMenuRefHandle>> & {
    MenuItem: React.FC<PopoverMenuItemProps>;
    Divider: React.FC<PopoverMenuDividerProps>;
    SectionTitle: React.FC<PopoverMenuSectionTitleProps>;
};
//# sourceMappingURL=PopoverMenu.types.d.ts.map