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

A UI component library from Xandr.

import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
import { StandardProps, Overwrite } from '../../util/component-types';
import * as reducers from './DropMenu.reducers';
/** Header */
export interface IDropMenuHeaderProps extends StandardProps {
    description?: string;
}
/** Control */
export interface IDropMenuControlProps extends StandardProps {
    description?: string;
}
/** Option Group */
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: {
        /**
            hides the \`OptionGroup\` from the list.
        */
        isHidden: PropTypes.Requireable<boolean>;
    };
    defaultProps: {
        isHidden: boolean;
    };
};
/** Option */
export interface IDropMenuOptionProps extends StandardProps {
    isDisabled?: boolean;
    isHidden?: boolean;
    isWrapped?: boolean;
    Selected?: any;
}
/** Null Option */
export interface IDropMenuNullOptionProps extends StandardProps {
    description?: string;
}
declare const NullOption: {
    (_props: IDropMenuNullOptionProps): null;
    displayName: string;
    peek: {
        description: string;
    };
    propName: string;
    propTypes: {};
};
/** Fixed Option */
export interface IDropMenuFixedOptionProps extends StandardProps {
    description?: string;
    isDisabled: boolean;
    isHidden: boolean;
    isWrapped: boolean;
}
/** Context Menu */
export interface IDropMenuContextMenuProps extends StandardProps {
    description?: string;
}
/** Drop Menu */
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.DOMAttributes<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: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        };
    };
    static FixedOption: {
        (_props: IDropMenuFixedOptionProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
        propTypes: {
            /**
                disables selection of the \`Option\`.
            */
            isDisabled: PropTypes.Requireable<boolean>;
            /**
                hides the \`Option\` from the list.
            */
            isHidden: PropTypes.Requireable<boolean>;
            /**
                controls wrapping of the text.
            */
            isWrapped: PropTypes.Requireable<boolean>;
        };
        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: {
            /**
                disables selection of the \`Option\`.
            */
            isDisabled: PropTypes.Requireable<boolean>;
            /**
                hides the \`Option\` from the list.
            */
            isHidden: PropTypes.Requireable<boolean>;
            /**
                controls wrapping of the text.
            */
            isWrapped: PropTypes.Requireable<boolean>;
        };
        defaultProps: {
            isDisabled: boolean;
            isHidden: boolean;
            isWrapped: boolean;
        };
    };
    static OptionGroup: {
        (_props: IDropMenuOptionGroupProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
        propTypes: {
            /**
                hides the \`OptionGroup\` from the list.
            */
            isHidden: PropTypes.Requireable<boolean>;
        };
        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: PropTypes.Requireable<PropTypes.ReactNodeLike>;
            };
        };
        description: string;
        categories: string[];
        madeFrom: string[];
    };
    static reducers: typeof reducers;
    static propTypes: {
        /**
            Should be instances of: \`DropMenu.Control\`, \`DropMenu.Option\`,
            \`DropMenu.OptionGroup\`, \`DropMenu.Nulloption\`. Other direct child
            elements will not render.
        */
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        className: PropTypes.Requireable<string>; /**
            Appended to the component-specific class names set on the root elements.
            Applies to *both* the control and the flyout menu.
        */
        /**
            Styles that are passed through to root element.
        */
        style: PropTypes.Requireable<object>;
        /**
            Disables the DropMenu from being clicked or focused.
        */
        isDisabled: PropTypes.Requireable<boolean>;
        /**
            Renders the flyout menu adjacent to the control.
        */
        isExpanded: PropTypes.Requireable<boolean>;
        /**
            Sets the direction the flyout menu will render relative to the control.
        */
        direction: PropTypes.Requireable<string>;
        /**
            Sets the alignment the flyout menu will render relative to the control.
        */
        alignment: PropTypes.Requireable<string>;
        /**
            An array of currently selected \`DropMenu.Option\` indices.
        */
        selectedIndices: PropTypes.Requireable<(number | null | undefined)[]>;
        /**
            The currently focused index of \`DropMenu.Option\`. Can also be \`null\`.
        */
        focusedIndex: PropTypes.Requireable<number>;
        /**
            The \`id\` of the flyout menu portal element that is appended to
            \`document.body\`. Defaults to a generated id.
        */
        portalId: PropTypes.Requireable<string>;
        /**
            Styles that are passed through to the ContextMenu FlyOut element.
        */
        flyOutStyle: PropTypes.Requireable<object>;
        /**
            Styles that are passed through to the option container element.
        */
        optionContainerStyle: PropTypes.Requireable<object>;
        /**
            Called when collapsed and the control is clicked, or when the control has
            focus and the Down Arrow is pressed.  Has the signature
            \`({ props, event }) => {}\`
        */
        onExpand: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            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 Has the
            signature \`({ props, event }) => {}\`
        */
        onCollapse: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            Called when an option is clicked, or when an option has focus and the
            Enter key is pressed.  Has the signature
            \`(optionIndex, {props, event}) => {}\`
            where optionIndex can be a number or \`null\`.
        */
        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            Called when expanded and the the Down Arrow key is pressed. Not called
            when focus is on the last option.  Has the signature
            \`({ props, event }) => {}\`
        */
        onFocusNext: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            Called when expanded and the the Up Arrow key is pressed. Not called when
            focus is on the first option.  Has the signature
            \`({ props, event }) => {}\`
        */
        onFocusPrev: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            Called when the mouse moves over an option.  Has the signature
            \`(optionIndex) => {}\` where optionIndex can be a number or \`null\`.
        */
        onFocusOption: PropTypes.Requireable<(...args: any[]) => any>;
        Control: PropTypes.Requireable<any>; /**
            *Child Element* - The control target which the flyout menu is anchored
            to. Only one \`Control\` is used.
        */
        Option: PropTypes.Requireable<any>; /**
            *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.
        */
        OptionGroup: PropTypes.Requireable<any>; /**
            *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.
        */
        NullOption: PropTypes.Requireable<any>; /**
            *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.
        */
        Header: PropTypes.Requireable<any>; /**
            *Child Element* - An optional header to be displayed within the expanded
            Flyout, above all \`Option\`s.
        */
        ContextMenu: PropTypes.Requireable<any>; /**
            *Child Element* - props pass through to the underlying ContextMenu
            component
        */
        FixedOption: PropTypes.Requireable<any>; /**
            *Child Element* - A special kind of \`Option\` that is always rendered at the top of
            the menu.
        */
    };
    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<IDropMenuPropsWithPassThroughs, IDropMenuState>;
export default _default;
export { DropMenu as DropMenuDumb, NullOption, OptionGroup };
//# sourceMappingURL=DropMenu.d.ts.map