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

@wix/design-system

import { ReactNode, CSSProperties, SyntheticEvent, KeyboardEventHandler, RefObject } from 'react';
import { MoveByOffset } from '../common';
import type { DropdownLayoutValueOption, DropdownLayoutProps, ListType, Overflow, DropdownLayoutOption } from '../DropdownLayout';
import { AppendTo, PopoverProps } from '../Popover';
export type DropdownBaseProps = {
    /** Control whether the <Popover/> should be opened */
    open?: undefined | boolean;
    /** Defines a callback function which is called when dropdown is opened */
    onShow?: () => void;
    /** Defines a callback function which is called when dropdown is closed */
    onHide?: () => void;
    /**
     * Specifies a CSS class name to be appended to the component’s root element.
     * @internal
     */
    className?: string;
    /** Applies a data-hook HTML attribute that can be used in the tests */
    dataHook?: string;
    /** Control popover placement */
    placement?: PopoverProps['placement'];
    /** Specifies where popover should be inserted as a last child - whether `parent` or `window` containers */
    appendTo?: AppendTo;
    /** Specifies whether popover arrow should be shown */
    showArrow?: boolean;
    /** Defines a callback function which is called when user clicks outside of a dropdown */
    onClickOutside?: () => void;
    /** Defines a callback function which is called on `onMouseEnter` event on the entire component */
    onMouseEnter?: () => void;
    /** Defines a callback function which is called on `onMouseLeave` event on the entire component */
    onMouseLeave?: () => void;
    onMouseDown?: DropdownLayoutProps['onMouseDown'];
    /** Defines a callback function which is called whenever user selects a different option in the list */
    onSelect?: (option: DropdownLayoutValueOption) => void;
    /**
     * Set popover's content width to a minimum width of a trigger element,
     * but it can expand up to the defined value of `maxWidth`
     */
    dynamicWidth?: boolean;
    /** Controls the maximum width of dropdown layout */
    maxWidth?: CSSProperties['maxWidth'];
    /** Controls the minimum width of dropdown layout */
    minWidth?: CSSProperties['minWidth'];
    /** Controls the maximum height of dropdown layout */
    maxHeight?: number | string;
    /**
     * Specifies a target component to be rendered. If a regular node is passed, it'll be rendered as-is.
     * If a function is passed, it's expected to return a React element.
     * The function accepts an object containing the following properties:
     *
     *  * `open` - will open the Popover
     *  * `close` - will close the Popover
     *  * `toggle` - will toggle the Popover
     *  * `isOpen` - indicates whether the items list is currently open
     *  * `delegateKeyDown` - the underlying DropdownLayout's keydown handler. It can be called
     *                        inside another keyDown event in order to delegate it.
     *  * `selectedOption` - the currently selected option
     *
     * Check inserted component documentation for more information on available properties.
     */
    children?: DropdownBaseChildrenFn;
    /**
     * Specifies an array of options for a dropdown list. Objects must have an id and can include string value or node.
     * If value is '-', a divider will be rendered instead (dividers do not require and id).
     */
    options?: DropdownLayoutProps['options'];
    /** Define the selected option in the list */
    selectedId?: string | number;
    /** Handles container overflow behaviour */
    overflow?: Overflow | undefined;
    /** Indicates that element can be focused and where it participates in sequential keyboard navigation */
    tabIndex?: number;
    /**
     * Sets the initially selected option in the list. Used when selection
     * behaviour is being controlled.
     */
    initialSelectedId?: string | number;
    /** Specifies the stack order (`z-index`) of a dropdown layout */
    zIndex?: number;
    /** Moves dropdown content relative to the parent on X or Y axis by a defined amount of pixels */
    moveBy?: MoveByOffset;
    /**
     * Specifies whether to flip the <Popover/> placement
     * when it starts to overlap the target element (<Popover.Element/>)
     */
    flip?: boolean;
    /**
     * Specifies whether to enable the fixed behaviour. If enabled, <Popover/> keep its
     * original placement even when it's being positioned outside the boundary.
     */
    fixed?: boolean;
    /** Stretches trigger element to fill its parent container width */
    fluid?: boolean;
    /** Adds enter and exit animation */
    animate?: boolean;
    /** Focus to the selected option when dropdown is opened */
    focusOnSelectedOption?: boolean;
    /** Specifies whether lazy loading of the dropdown items is enabled */
    infiniteScroll?: boolean;
    /** Defines a callback function which is called on a request to render more list items */
    loadMore?: (page: number) => void;
    /** Specifies whether there are more items to load */
    hasMore?: boolean;
    /** Focus to the specified option when dropdown is opened */
    focusOnOption?: DropdownLayoutProps['focusOnOption'];
    /** Scrolls to the specified option when dropdown is opened without marking it */
    scrollToOption?: DropdownLayoutProps['scrollToOption'];
    /** A fixed header to the list */
    fixedHeader?: DropdownLayoutProps['fixedHeader'];
    /** A fixed footer to the list */
    fixedFooter?: DropdownLayoutProps['fixedFooter'];
    /** Defines type of behavior applied in list */
    listType?: ListType;
    /** Specifies whether first list item should be focused */
    autoFocus?: boolean;
    /** Sets the initial marking of an option in the list when opened:
     *  - `false` - no initially hovered list item
     *  - `true` - hover first selectable option
     *  - any `number/string` specify the id of an option to be hovered
     */
    markedOption?: boolean | number | string;
};
export type DropdownBaseChildrenFn = ReactNode | ChildrenFnArgs;
export type ChildrenFnArgs<T extends {
    focus: () => void;
} = any> = (data: {
    open: () => void;
    close: (e?: SyntheticEvent) => void;
    toggle: () => void;
    delegateKeyDown: KeyboardEventHandler;
    selectedOption: DropdownLayoutOption | undefined;
    activeDescendantId: string | undefined;
    listboxId: string;
    isOpen: boolean;
    ref: RefObject<T>;
}) => ReactNode;
//# sourceMappingURL=DropdownBase.types.d.ts.map