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

@wix/design-system

import PropTypes from 'prop-types';
import React, { KeyboardEvent, PureComponent, RefObject } from 'react';
import { DATA_OPTION } from './DataAttr';
import { listItemSectionBuilder } from '../ListItemSection';
import { listItemSelectBuilder } from '../ListItemSelect';
import { listItemActionBuilder } from '../ListItemAction';
import { WithOverlayScrollbarProps } from './withOverlayScrollbar';
import { DropdownLayoutBuilderOption, DropdownLayoutDividerOption, DropdownLayoutOption, DropdownLayoutProps, DropdownLayoutValueOption } from './DropdownLayout.types';
type FocusedItemId = string | number | null;
type SelectedOption = HTMLDivElement | null;
type OnClickEvent = {
    id: FocusedItemId;
};
type State = {
    hovered: number;
    selectedId: DropdownLayoutProps['selectedId'];
    scrollElement: HTMLElement | null;
    focusedItemId: FocusedItemId;
};
type DropdownLayoutChildren = {
    [key: string | number]: {
        focus?: () => void;
        wrappedComponentRef?: {
            innerComponentRef: {
                focus: () => void;
            };
        };
    } | null;
};
type ConvertedCustomOption = Pick<DropdownLayoutValueOption, 'id' | 'disabled' | 'disabledDescription' | 'overrideStyle' | 'overrideOptionStyle'> & Pick<DropdownLayoutBuilderOption, 'value'>;
type ConvertedOption = ConvertedCustomOption | DropdownLayoutBuilderOption | undefined;
export declare class DropdownLayout extends PureComponent<DropdownLayoutProps & WithOverlayScrollbarProps, State> {
    static propTypes: {
        className: PropTypes.Requireable<any>;
        dropDirectionUp: PropTypes.Requireable<any>;
        focusOnSelectedOption: PropTypes.Requireable<any>;
        onClose: PropTypes.Requireable<any>;
        onSelect: PropTypes.Requireable<any>;
        onOptionMarked: PropTypes.Requireable<any>;
        onOptionsNavigate: PropTypes.Requireable<any>;
        overflow: PropTypes.Requireable<any>;
        visible: PropTypes.Requireable<any>;
        options: PropTypes.Requireable<any>;
        selectedId: PropTypes.Requireable<any>;
        tabIndex: PropTypes.Requireable<any>;
        onClickOutside: PropTypes.Requireable<any>;
        fixedHeader: PropTypes.Requireable<any>;
        fixedFooter: PropTypes.Requireable<any>;
        maxHeightPixels: PropTypes.Requireable<any>;
        minWidthPixels: PropTypes.Requireable<any>;
        withArrow: PropTypes.Requireable<any>;
        closeOnSelect: PropTypes.Requireable<any>;
        onMouseEnter: PropTypes.Requireable<any>;
        onMouseLeave: PropTypes.Requireable<any>;
        itemHeight: PropTypes.Requireable<any>;
        selectedHighlight: PropTypes.Requireable<any>;
        inContainer: PropTypes.Requireable<any>;
        infiniteScroll: PropTypes.Requireable<any>;
        loadMore: PropTypes.Requireable<any>;
        hasMore: PropTypes.Requireable<any>;
        markedOption: PropTypes.Requireable<any>;
        focusOnOption: PropTypes.Requireable<any>;
        scrollToOption: PropTypes.Requireable<any>;
        listType: PropTypes.Requireable<any>;
        autoFocus: PropTypes.Requireable<any>;
        scrollbar: PropTypes.Requireable<any>;
    };
    static defaultProps: DropdownLayoutProps;
    static displayName: string;
    static NONE_SELECTED_ID: -1;
    constructor(props: DropdownLayoutProps);
    setScrollElement: (node: HTMLElement | null) => void;
    containerRef: React.RefObject<HTMLDivElement>;
    optionsRef: RefObject<HTMLDivElement>;
    loadedWithUndefinedOptions: boolean;
    _boundEvents: string[];
    focusableItemsIdsList: (string | number)[];
    savedOnClicks: {
        id?: string | number;
        onClick: (e: OnClickEvent) => void;
    }[];
    children: DropdownLayoutChildren;
    selectedOption: SelectedOption;
    componentDidMount(): void;
    componentWillUnmount(): void;
    componentDidUpdate(prevProps: DropdownLayoutProps): void;
    UNSAFE_componentWillReceiveProps(nextProps: DropdownLayoutProps): void;
    _getOptionElementId(optionIndex: number): string;
    _focusFirstOption(): void;
    _checkIfEventOnElements(e: any, elem: any): boolean;
    _onMouseEventsHandler: (e: any) => void;
    _renderTopArrow(): React.JSX.Element | null;
    _convertOptionToListItemSectionBuilder({ option, idx, }: {
        option: DropdownLayoutDividerOption | DropdownLayoutValueOption;
        idx: number;
    }): ReturnType<typeof listItemSectionBuilder> | undefined;
    _convertOptionToListItemActionBuilder({ option, idx, }: {
        option: DropdownLayoutValueOption;
        idx: number;
    }): ReturnType<typeof listItemActionBuilder>;
    _isControlled(): boolean;
    _focusOnSelectedOption(): void;
    _setSelectedOptionNode(optionNode: HTMLDivElement | null, option: DropdownLayoutBuilderOption | ConvertedCustomOption): void;
    _onClickOutside: (event: TouchEvent | MouseEvent) => void;
    _markOption(index: number, options?: DropdownLayoutOption[]): void;
    _onSelect: (index: number, e: React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>) => false | DropdownLayoutOption | undefined;
    _onActionClick: (e: OnClickEvent) => void;
    _saveOnClicks: () => void;
    _onMouseEnter: (index: number) => void;
    _onMouseLeave: () => void;
    _onContainerMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => void;
    _getMarkedIndex(): number;
    getActiveDescendentElementId(): string | undefined;
    _markNextStep(step: number): void;
    _focusOnOption: () => void;
    _scrollToOption(): void;
    _markOptionAtIndex: (markedIndex: number) => void;
    _scrollIntoViewByIndex: (index: number) => void;
    /**
     * Handle keydown events for the DropdownLayout, mostly for accessibility
     *
     * @param event - The keydown event triggered by React
     * @returns Whether the event was handled by the component
     */
    _onSelectListKeyDown: (event: KeyboardEvent<Element>) => boolean | DropdownLayoutOption | undefined;
    _focus: (focusedItemId: FocusedItemId, e?: React.SyntheticEvent) => void;
    _handleActionListNavigation: (event: React.KeyboardEvent, id: string | number) => void;
    _onActionListKeyDown: (event: React.KeyboardEvent<HTMLDivElement>, id: string | number) => void;
    _onClose: () => void;
    _renderNode(node: React.ReactNode): React.JSX.Element | null;
    _wrapWithInfiniteScroll: (scrollableElement: React.ReactNode) => React.JSX.Element;
    /** for testing purposes only */
    _getDataAttributes: () => Partial<{
        'data-hook': string;
        "data-shown": boolean | undefined;
        "data-selected-option-id": string | number | undefined;
        "data-direction": string;
    }>;
    _convertCustomOptionToBuilder({ option, }: {
        option: DropdownLayoutValueOption;
    }): ConvertedCustomOption | undefined;
    _convertOptionToListItemSelectBuilder({ option, }: {
        option: DropdownLayoutValueOption;
    }): ReturnType<typeof listItemSelectBuilder>;
    _isBuilderOption(option: DropdownLayoutOption): option is DropdownLayoutBuilderOption;
    _isCustomOption(option: DropdownLayoutValueOption): boolean | undefined;
    _isActionOption(option: DropdownLayoutOption): option is DropdownLayoutValueOption;
    _isItemSection(option: DropdownLayoutOption): option is DropdownLayoutDividerOption | DropdownLayoutValueOption;
    _isDivider(opt: DropdownLayoutOption): opt is DropdownLayoutDividerOption;
    _convertOptionToBuilder(option: DropdownLayoutOption, idx: number): ConvertedOption;
    _renderOption({ option, idx, }: {
        option: DropdownLayoutOption;
        idx: number;
    }): React.ReactElement | undefined;
    _getItemDataAttr: ({ hovered, selected, disabled, }: {
        hovered: boolean;
        selected: boolean;
        disabled?: boolean;
    }) => Partial<{
        [DATA_OPTION.DISABLED]: boolean | undefined;
        [DATA_OPTION.SELECTED]: boolean | undefined;
        [DATA_OPTION.HOVERED]: boolean;
        [DATA_OPTION.SIZE]: import("./DropdownLayout.types").DropdownLayoutItemHeight | undefined;
    }>;
    _renderOptionContent({ option, idx, hasLink, }: {
        option: ConvertedOption;
        idx: number;
        hasLink: boolean;
    }): React.ReactElement | undefined;
    _markOptionByProperty(props: DropdownLayoutProps): void;
    _findIndex(arr: DropdownLayoutOption[], predicate: (item: DropdownLayoutOption) => boolean): number;
    _isSelectableOption: (option: DropdownLayoutOption) => boolean;
    _renderOptions(): (React.ReactElement | undefined)[];
    render(): React.JSX.Element;
}
declare const _default: React.ForwardRefExoticComponent<Omit<DropdownLayoutProps & WithOverlayScrollbarProps, "ref"> & React.RefAttributes<DropdownLayout>>;
export default _default;
//# sourceMappingURL=DropdownLayout.d.ts.map