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

@wix/design-system

import * as React from 'react';
import { listItemActionBuilder } from '../ListItemAction';
import { listItemEditableBuilder } from '../ListItemEditable';
import { listItemSectionBuilder } from '../ListItemSection';
import { listItemSelectBuilder, ListItemSelectSizes } from '../ListItemSelect';
import { DIVIDER_OPTION_VALUE } from './DropdownLayout.constants';
export interface DropdownLayoutProps {
    /** Applies a data-hook HTML attribute that can be used in the tests. */
    dataHook?: string;
    /** Specifies a CSS class name to be appended to the component’s root element.
     * @internal
     */
    className?: string;
    /** @deprecated */
    dropDirectionUp?: boolean;
    /** Scroll view to the selected option on opening the dropdown */
    focusOnSelectedOption?: boolean;
    /** Callback function called whenever the user press the `Escape` keyboard.*/
    onClose?: () => void;
    /** Callback function called whenever the user selects a different option in the list */
    onSelect?: (option: DropdownLayoutValueOption, sameOptionWasPicked: boolean) => void;
    /** Callback function called whenever an option becomes focused (hovered/active). Receives the relevant option object from the original props.options array. */
    onOptionMarked?: (option: DropdownLayoutValueOption | null, optionElementId?: string) => void;
    /** Callback function called whenever the user navigates to an option (via keyboard or mouse). Receives the relevant option object from the original props.options array, or null when navigation is cleared. */
    onOptionsNavigate?: (option: DropdownLayoutValueOption | null) => void;
    /** Should show or hide the component */
    visible?: boolean;
    /** Array of objects:
     * - id `<string / number>` *required*: the id of the option, should be unique.
     * - value `<function / string / node>` *required*: can be a string, react element or a builder function.
     * - disabled `<bool>` *default value- false*: whether this option is disabled or not
     * - linkTo `<string>`: when provided the option will be an anchor to the given value
     * - title `<bool>`  *default value- false*  **deprecated**: please use `listItemSectionBuilder` for rendering a title.
     * - overrideStyle `<bool>` *default value- false*  **deprecated**: please use `overrideOptionStyle` for override option styles.
     * - overrideOptionStyle `<bool>` *default value- false* - when set to `true`, the option will be responsible to its own styles. No styles will be applied from the DropdownLayout itself.
     * - label `<string>`: the string displayed within an input when the option is selected. This is used when using `<DropdownLayout/>` with an `<Input/>`.
     */
    options?: DropdownLayoutOption[];
    /** The id of the selected option in the list  */
    selectedId?: string | number;
    /** Specifies the tab order of the component. */
    tabIndex?: number;
    /** @deprecated Do not use this prop. */
    onClickOutside?: (e: TouchEvent | MouseEvent) => void;
    /** A fixed header to the list */
    fixedHeader?: React.ReactNode;
    /** A fixed footer to the list */
    fixedFooter?: React.ReactNode;
    /** Set the max height of the dropdownLayout in pixels */
    maxHeightPixels?: string | number;
    /** Set the min width of the dropdownLayout in pixels */
    minWidthPixels?: string | number;
    /** @deprecated Do not use this prop. */
    withArrow?: boolean;
    /** Closes DropdownLayout on option selection */
    closeOnSelect?: boolean;
    /** Callback function called whenever the user entered with the mouse to the dropdown layout.*/
    onMouseEnter?: React.MouseEventHandler<HTMLElement>;
    /** Callback function called whenever the user exited with the mouse from the dropdown layout.*/
    onMouseLeave?: React.MouseEventHandler<HTMLElement>;
    /** Callback function called whenever the user clicks the dropdown layout.*/
    onMouseDown?: React.MouseEventHandler<HTMLElement>;
    /** @deprecated Do not use this prop. */
    itemHeight?: DropdownLayoutItemHeight;
    /** Controls the size of internally rendered ListItemSelect or ListItemAction components
     * @default 'medium'
     */
    size?: ListItemSelectSizes;
    /** Whether the selected option will be highlighted when dropdown reopened. */
    selectedHighlight?: boolean;
    /** Whether the `<DropdownLayout/>` is in a container component. If `true`, some styles such as shadows, positioning and padding will be added the the component contentContainer. */
    inContainer?: boolean;
    /** Set this prop for lazy loading of the dropdown layout items.*/
    infiniteScroll?: boolean;
    /** A callback called when more items are requested to be rendered. */
    loadMore?: (page: number) => void;
    /** Whether there are more items to be loaded. */
    hasMore?: boolean;
    /** Sets the default hover behavior when:
     *  1. `false` means no default
     *  2. `true` means to hover the first selectable option
     *  3. Any number/string represents the id of option to hover
     */
    markedOption?: boolean | string | number;
    /** Set overflow of container */
    overflow?: Overflow;
    /** Marks (not selects) and scrolls view to the option on opening the dropdown by option id */
    focusOnOption?: string | number;
    /** Scrolls to the specified option when dropdown is opened without marking it */
    scrollToOption?: string | number;
    /** Defines type of behavior applied in list */
    listType?: ListType;
    /** Specifies whether first list item should be focused */
    autoFocus?: boolean;
    /** Controls which type of scrollbar to render */
    scrollbar?: 'overlay' | 'fixed';
    /** Defines the id for the listbox */
    listboxId?: string;
}
export type Overflow = 'visible' | 'hidden' | 'scroll' | 'auto';
export type ListType = 'action' | 'select';
export type DropdownLayoutBuilderOption = ReturnType<typeof listItemActionBuilder> | ReturnType<typeof listItemSectionBuilder> | ReturnType<typeof listItemSelectBuilder> | ReturnType<typeof listItemEditableBuilder>;
export type DropdownLayoutOption = DropdownLayoutValueOption | DropdownLayoutDividerOption | DropdownLayoutBuilderOption;
export type DropdownLayoutValueOption = {
    id: string | number;
    value: React.ReactNode | RenderOptionFn;
    disabledDescription?: string;
    disabled?: boolean;
    /** @deprecated Please use `listItemSectionBuilder` for rendering a title */
    title?: React.ReactNode;
    /** @deprecated Please use `listItemActionBuilder` */
    optionTitle?: string;
    /** @deprecated Please use `listItemActionBuilder` */
    onClick?: () => void;
    linkTo?: string;
    /** @deprecated Please use `overrideOptionStyle` to override option styles */
    overrideStyle?: boolean;
    overrideOptionStyle?: boolean;
    label?: string;
    prefix?: React.ReactNode;
};
export type RenderOptionFn = (options: {
    selected: boolean;
    hovered: boolean;
    disabled: boolean;
}) => React.ReactNode;
export type DropdownLayoutDividerOption = {
    value: typeof DIVIDER_OPTION_VALUE;
    id?: string | number;
    prefix?: undefined;
    label?: undefined;
};
export type DropdownLayoutItemHeight = 'small' | 'big';
//# sourceMappingURL=DropdownLayout.types.d.ts.map