lucid-ui/dist/components/DropMenu/DropMenu.d.ts

A UI component library from AppNexus.

import React from 'react';
import _ from 'lodash';
import { StandardProps, Overwrite } from '../../util/component-types';
import * as reducers from './DropMenu.reducers';
interface IDropMenuHeaderProps extends StandardProps {
    description?: string;
}
interface IDropMenuControlProps extends StandardProps {
    description?: string;
}
export interface IDropMenuOptionGroupProps extends StandardProps {
    description?: string;
    isHidden?: boolean;
}
export declare type OptionGroupFC = (props: IDropMenuOptionGroupProps) => null;
declare const OptionGroup: {
    (_props: IDropMenuOptionGroupProps): null;
    displayName: string;
    peek: {
        description: string;
    };
    propName: string;
    propTypes: {
        isHidden: any;
    };
    defaultProps: {
        isHidden: boolean;
    };
};
export interface IDropMenuOptionProps extends StandardProps {
    isDisabled?: boolean;
    isHidden?: boolean;
    isWrapped?: boolean;
    Selected?: any;
}
export interface IDropMenuNullOptionProps extends StandardProps {
    description?: string;
}
declare const NullOption: {
    (_props: IDropMenuNullOptionProps): null;
    displayName: string;
    peek: {
        description: string;
    };
    propName: string;
    propTypes: {};
};
export interface IDropMenuFixedOptionProps extends StandardProps {
    description?: string;
    isDisabled: boolean;
    isHidden: boolean;
    isWrapped: boolean;
}
interface IDropMenuContextMenuProps extends StandardProps {
    description?: string;
}
export interface IDropMenuProps extends StandardProps {
    /** Disables the DropMenu from being clicked or focused. */
    isDisabled?: boolean;
    /** Renders the flyout menu adjacent to the control. */
    isExpanded?: boolean;
    /** Sets the direction the flyout menu will render relative to the control. */
    direction?: 'down' | 'up';
    /** Sets the alignment the flyout menu will render relative to the control. */
    alignment?: 'start' | 'center' | 'end';
    /** An array of currently selected \`DropMenu.Option\` indices. */
    selectedIndices?: number[] | null;
    /** The currently focused index of \`DropMenu.Option\`. Can also be \`null\`. */
    focusedIndex?: number | null;
    /** The \`id\` of the flyout menu portal element that is appended to
            \`document.body\`. Defaults to a generated id. */
    portalId?: string;
    /** Styles that are passed through to the ContextMenu FlyOut element. */
    flyOutStyle?: object;
    /** Styles that are passed through to the option container element. */
    optionContainerStyle?: object;
    /** Called when collapsed and the control is clicked, or when the control has
            focus and the Down Arrow is pressed. */
    onExpand?: ({ props, event, }: {
        props: IDropMenuPropsWithPassThroughs;
        event: React.KeyboardEvent | React.MouseEvent;
    }) => void;
    /** Called when expanded and the user clicks the control or outside of the
            menu, or when the control has focus and the Escape key is pressed */
    onCollapse?: ({ props, event, }: {
        props: IDropMenuPropsWithPassThroughs;
        event: React.KeyboardEvent | React.MouseEvent;
    }) => void;
    /** Called when an option is clicked, or when an option has focus and the
            Enter key is pressed. */
    onSelect?: (optionIndex: any, { props, event, }: {
        props: IDropMenuOptionProps | undefined;
        event: React.KeyboardEvent | React.MouseEvent;
    }) => void;
    /** Called when expanded and the the Down Arrow key is pressed. Not called
            when focus is on the last option. */
    onFocusNext?: ({ props, event, }: {
        props: IDropMenuPropsWithPassThroughs;
        event: React.KeyboardEvent;
    }) => void;
    /** Called when expanded and the the Up Arrow key is pressed. Not called when
            focus is on the first option. */
    onFocusPrev?: ({ props, event, }: {
        props: IDropMenuPropsWithPassThroughs;
        event: React.KeyboardEvent;
    }) => void;
    onFocusOption?: (optionIndex: number | null, { props, event, }: {
        props: IDropMenuPropsWithPassThroughs;
        event: React.KeyboardEvent | React.MouseEvent;
    }) => void;
    /** *Child Element* - The control target which the flyout menu is anchored
            to. Only one \`Control\` is used. */
    Control?: React.ReactNode;
    /** *Child Element* - These are menu options. The \`optionIndex\` is in-order
            of rendering regardless of group nesting, starting with index \`0\`.
            Each \`Option\` may be passed a prop called \`isDisabled\` to disable
            selection of that \`Option\`.  Any other props pass to Option will be
            available from the \`onSelect\` handler. */
    Option?: React.ReactNode;
    /** *Child Element* - Used to group \`Option\`s within the menu. Any
            non-\`Option\`s passed in will be rendered as a label for the group. */
    OptionGroup?: React.ReactNode;
    /** *Child Element* - A special kind of \`Option\` that is always rendered at
            the top of the menu and has an \`optionIndex\` of \`null\`. Useful for
            unselect. */
    NullOption?: React.ReactNode;
    /** *Child Element* - An optional header to be displayed within the expanded
            Flyout, above all \`Option\`s. */
    Header?: React.ReactNode;
    /** *Child Element* - props pass through to the underlying ContextMenu
            component */
    ContextMenu?: React.ReactNode;
    /** *Child Element* - A special kind of \`Option\` that is always rendered at the top of
            the menu. */
    FixedOption?: React.ReactNode;
}
declare type IDropMenuPropsWithPassThroughs = Overwrite<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IDropMenuProps>;
export interface IOptionsData {
    localOptionIndex: number;
    optionIndex: number;
    optionGroupIndex: number | null;
    optionProps: IDropMenuOptionProps;
}
export interface IHasOptionChildren<OptionGroupProps, OptionProps, NullOptionProps, FixedOptionProps> {
    OptionGroup: (_props: OptionGroupProps) => null;
    Option: (_props: OptionProps) => null;
    NullOption: (_props: NullOptionProps) => null;
    FixedOption: (_props: FixedOptionProps) => null;
}
export interface IDropMenuState {
    isMouseTriggered: boolean;
    optionGroups: IDropMenuOptionGroupProps[];
    flattenedOptionsData: IOptionsData[];
    ungroupedOptionData: IOptionsData[];
    optionGroupDataLookup: {
        [key: number]: IOptionsData[];
    };
    fixedOptionData: IOptionsData[];
    portalId: string;
    isExpanded: boolean;
    focusedIndex: number | null;
    selectedIndices: number[];
    nullOptions: IDropMenuNullOptionProps[];
    optionGroupIndex: number | null;
    optionProps: [];
}
declare class DropMenu extends React.Component<IDropMenuPropsWithPassThroughs, IDropMenuState> {
    private _header;
    constructor(props: IDropMenuPropsWithPassThroughs);
    static displayName: string;
    static ContextMenu: {
        (_props: IDropMenuContextMenuProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
        propTypes: {
            children: any;
        };
    };
    static FixedOption: {
        (_props: IDropMenuFixedOptionProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
        propTypes: {
            isDisabled: any;
            isHidden: any;
            isWrapped: any;
        };
        defaultProps: {
            isDisabled: boolean;
            isHidden: boolean;
            isWrapped: boolean;
        };
    };
    static NullOption: {
        (_props: IDropMenuNullOptionProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
        propTypes: {};
    };
    static Option: {
        (_props: IDropMenuOptionProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
        propTypes: {
            isDisabled: any;
            isHidden: any;
            isWrapped: any;
        };
        defaultProps: {
            isDisabled: boolean;
            isHidden: boolean;
            isWrapped: boolean;
        };
    };
    static OptionGroup: {
        (_props: IDropMenuOptionGroupProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
        propTypes: {
            isHidden: any;
        };
        defaultProps: {
            isHidden: boolean;
        };
    };
    static Control: {
        (_props: IDropMenuControlProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
        propTypes: {};
    };
    static Header: {
        (_props: IDropMenuHeaderProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
        propTypes: {};
    };
    static peek: {
        ContextMenu: {
            (_props: IDropMenuContextMenuProps): null;
            displayName: string;
            peek: {
                description: string;
            };
            propName: string;
            propTypes: {
                children: any;
            };
        };
        description: string;
        categories: string[];
        madeFrom: string[];
    };
    static reducers: typeof reducers;
    static propTypes: {
        children: any;
        className: any;
        style: any;
        isDisabled: any;
        isExpanded: any;
        direction: any;
        alignment: any;
        selectedIndices: any;
        focusedIndex: any;
        portalId: any;
        flyOutStyle: any;
        optionContainerStyle: any;
        onExpand: any;
        onCollapse: any;
        onSelect: any;
        onFocusNext: any;
        onFocusPrev: any;
        onFocusOption: any;
        Control: any;
        Option: any;
        OptionGroup: any;
        NullOption: any;
        Header: any;
        ContextMenu: any;
        FixedOption: any;
    };
    static defaultProps: {
        isDisabled: boolean;
        isExpanded: boolean;
        direction: "down";
        alignment: "start";
        selectedIndices: never[];
        focusedIndex: null;
        flyOutStyle: {
            maxHeight: string;
        };
        onExpand: (...args: any[]) => void;
        onCollapse: (...args: any[]) => void;
        onSelect: (...args: any[]) => void;
        onFocusNext: (...args: any[]) => void;
        onFocusPrev: (...args: any[]) => void;
        onFocusOption: (...args: any[]) => void;
        portalId: string;
        optionContainerStyle: {};
        ContextMenu: {
            direction: string;
            directonOffset: number;
            minWidthOffset: number;
            alignment: string;
            getAlignmentOffset: () => number;
            isExpanded: boolean;
            onClickOut: null;
            portalId: null;
        };
    };
    getPreprocessedOptionData: (props: IDropMenuPropsWithPassThroughs) => {
        optionGroups: any[];
        optionGroupDataLookup: _.Dictionary<IOptionsData[]>;
        fixedOptionData: IOptionsData[];
        ungroupedOptionData: IOptionsData[];
        flattenedOptionsData: IOptionsData[];
        nullOptions: any[];
    };
    static preprocessOptionData: <OptionGroupProps extends IDropMenuOptionGroupProps, OptionProps extends IDropMenuOptionProps, NullOptionProps extends IDropMenuNullOptionProps, FixedOptionProps extends IDropMenuFixedOptionProps>(props: StandardProps, ParentType: IHasOptionChildren<OptionGroupProps, OptionProps, NullOptionProps, FixedOptionProps>) => {
        optionGroups: any[];
        optionGroupDataLookup: _.Dictionary<IOptionsData[]>;
        fixedOptionData: IOptionsData[];
        ungroupedOptionData: IOptionsData[];
        flattenedOptionsData: IOptionsData[];
        nullOptions: any[];
    };
    handleKeydown: (event: React.KeyboardEvent) => void;
    handleClick: (event: React.MouseEvent) => void;
    handleMouseFocusOption: (optionIndex: number | null, optionProps: IDropMenuOptionProps, event: React.MouseEvent) => void;
    handleSelectOption: (optionIndex: number | null, optionProps: IDropMenuOptionProps, event: React.KeyboardEvent | React.MouseEvent) => void;
    renderOption: (optionProps: IDropMenuOptionProps, optionIndex: number | null, isGrouped?: boolean) => JSX.Element | null;
    UNSAFE_componentWillReceiveProps: (nextProps: IDropMenuPropsWithPassThroughs) => void;
    render(): JSX.Element;
}
declare const _default: typeof DropMenu & import("../../util/state-management").IHybridComponent<Overwrite<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IDropMenuProps>, IDropMenuState>;
export default _default;
export { DropMenu as DropMenuDumb, NullOption, OptionGroup };