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

A UI component library from Xandr.

import React from 'react';
import PropTypes from 'prop-types';
import { StandardProps } from '../../util/component-types';
import * as reducers from './SingleSelect.reducers';
import { IDropMenuProps, IDropMenuState, IDropMenuOptionProps, IDropMenuOptionGroupProps, IOptionsData } from '../DropMenu/DropMenu';
/** Placeholder Child Component */
export interface ISingleSelectPlaceholderProps extends StandardProps {
    description?: string;
}
/** Option Child Component */
export interface ISingleSelectOptionProps extends IDropMenuOptionProps {
    description?: string;
    name?: string;
    /** Custom Option component (alias for `SingleSelect.Option.Selected`)  */
    Selected?: React.ReactNode;
}
declare type ISingleSelectDropMenuProps = Partial<IDropMenuProps>;
/** Single Select Component */
export interface ISingleSelectProps extends StandardProps {
    /** Custom Placeholder component (alias for `SingleSelect.Placeholder`)  */
    Placeholder?: React.ReactNode;
    /** Custom Option component (alias for `SingleSelect.Option`)  */
    Option?: React.ReactNode;
    /** Custom Option component (alias for `SingleSelect.Option.Selected`)  */
    Selected?: React.ReactNode;
    /** Custom OptionGroup component (alias for `SingleSelect.OptionGroup`)  */
    OptionGroup?: IDropMenuOptionGroupProps;
    hasReset: boolean;
    isSelectionHighlighted: boolean;
    isDisabled: boolean;
    isInvisible: boolean;
    selectedIndex: number | null;
    DropMenu: ISingleSelectDropMenuProps;
    maxMenuHeight?: number | string;
    showIcon?: boolean;
    onSelect?: (optionIndex: number | null, { props, event, }: {
        props: ISingleSelectOptionProps | undefined;
        event: React.MouseEvent | React.KeyboardEvent;
    }) => void;
    Title?: string | null;
}
export interface ISingleSelectState {
    selectedIndex: number | null;
    optionGroups: IDropMenuOptionGroupProps[];
    flattenedOptionsData: IOptionsData[];
    ungroupedOptionData: IOptionsData[];
    optionGroupDataLookup: {
        [key: number]: IOptionsData[];
    };
    DropMenu: IDropMenuState;
    Title: string | null;
}
declare class SingleSelect extends React.Component<ISingleSelectProps, ISingleSelectState> {
    static displayName: string;
    static peek: {
        description: string;
        notes: {
            overview: string;
            intendedUse: string;
            technicalRecommendations: string;
        };
        categories: string[];
        madeFrom: string[];
    };
    static defaultProps: {
        hasReset: boolean;
        isSelectionHighlighted: boolean;
        isDisabled: boolean;
        isInvisible: boolean;
        selectedIndex: null;
        showIcon: boolean;
        DropMenu: {
            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;
            };
        };
    };
    static reducers: typeof reducers;
    static Placeholder: {
        (_props: ISingleSelectPlaceholderProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
    };
    static Option: {
        (_props: ISingleSelectOptionProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        Selected: {
            (_props: {
                children?: React.ReactNode;
            }): null;
            displayName: string;
            peek: {
                description: string;
            };
            propName: string;
            propTypes: {};
        };
        propName: string;
        propTypes: {
            isDisabled: PropTypes.Requireable<boolean>;
            isHidden: PropTypes.Requireable<boolean>;
            isWrapped: PropTypes.Requireable<boolean>;
            /**
                Customizes the rendering of the Option when it is selected and is
                displayed instead of the Placeholder.
            */
            Selected: PropTypes.Requireable<any>;
        };
        defaultProps: {
            isDisabled: boolean;
            isHidden: boolean;
            isWrapped: boolean;
        };
    };
    static Selected: {
        (_props: {
            children?: React.ReactNode;
        }): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
        propTypes: {};
    };
    static OptionGroup: {
        (_props: IDropMenuOptionGroupProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
        propTypes: {
            isHidden: PropTypes.Requireable<boolean>;
        };
        defaultProps: {
            isHidden: boolean;
        };
    };
    static NullOption: {
        (_props: import("../DropMenu/DropMenu").IDropMenuNullOptionProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
        propTypes: {};
    };
    static FixedOption: {
        (_props: import("../DropMenu/DropMenu").IDropMenuFixedOptionProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
        propTypes: {
            isDisabled: PropTypes.Requireable<boolean>;
            isHidden: PropTypes.Requireable<boolean>;
            isWrapped: PropTypes.Requireable<boolean>;
        };
        defaultProps: {
            isDisabled: boolean;
            isHidden: boolean;
            isWrapped: boolean;
        };
    };
    static propTypes: {
        /**
            Should be instances of: \`SingleSelect.Placeholder\`,
            \`SingleSelect.Option\`, \`SingleSelect.OptionGroup\`. 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>;
        /**
            Applies primary color styling to the control when an item is selected.
        */
        isSelectionHighlighted: PropTypes.Requireable<boolean>;
        /**
            Allows user to reset the \`optionIndex\` to \`null\` if they select the
            placeholder at the top of the options list.  If \`false\`, it will not
            render the placeholder in the menu.
        */
        hasReset: PropTypes.Requireable<boolean>;
        /**
            Disables the \`SingleSelect\` from being clicked or focused.
        */
        isDisabled: PropTypes.Requireable<boolean>;
        /**
            Gives the effect of an 'invisible button'. Essentially, there is no grey border,
            but there is still a blue border on a selection.
        */
        isInvisible: PropTypes.Requireable<boolean>;
        /**
            The currently selected \`SingleSelect.Option\` index or \`null\` if
            nothing is selected.
        */
        selectedIndex: PropTypes.Requireable<number>;
        /**
            The max height of the fly-out menu.
        */
        maxMenuHeight: PropTypes.Requireable<string | number>;
        /**
                        Show or hide the dropndown icon
                */
        showIcon: PropTypes.Requireable<boolean>;
        /**
            Object of \`DropMenu\` props which are passed thru to the underlying \`DropMenu\`
            component.
        */
        DropMenu: PropTypes.Requireable<PropTypes.InferProps<{
            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
            className: PropTypes.Requireable<string>;
            style: PropTypes.Requireable<object>;
            isDisabled: PropTypes.Requireable<boolean>;
            isExpanded: PropTypes.Requireable<boolean>;
            direction: PropTypes.Requireable<string>;
            alignment: PropTypes.Requireable<string>;
            selectedIndices: PropTypes.Requireable<(number | null | undefined)[]>;
            focusedIndex: PropTypes.Requireable<number>;
            portalId: PropTypes.Requireable<string>;
            flyOutStyle: PropTypes.Requireable<object>;
            optionContainerStyle: PropTypes.Requireable<object>;
            onExpand: PropTypes.Requireable<(...args: any[]) => any>;
            onCollapse: PropTypes.Requireable<(...args: any[]) => any>;
            onSelect: PropTypes.Requireable<(...args: any[]) => any>;
            onFocusNext: PropTypes.Requireable<(...args: any[]) => any>;
            onFocusPrev: PropTypes.Requireable<(...args: any[]) => any>;
            onFocusOption: PropTypes.Requireable<(...args: any[]) => any>;
            Control: PropTypes.Requireable<any>;
            Option: PropTypes.Requireable<any>;
            OptionGroup: PropTypes.Requireable<any>;
            NullOption: PropTypes.Requireable<any>;
            Header: PropTypes.Requireable<any>;
            ContextMenu: PropTypes.Requireable<any>;
            FixedOption: PropTypes.Requireable<any>;
        }>>;
        /**
            Called when an option is selected.  Has the signature \`(optionIndex,
            {props, event}) => {}\` where \`optionIndex\` is the new
            \`selectedIndex\` or \`null\` and \`props\` are the \`props\` for the
            selected \`Option\`.
        */
        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
        Placeholder: PropTypes.Requireable<any>; /**
            *Child Element* - The content rendered in the control when there is no
            option is selected. Also rendered in the option list to remove current
            selection.
        */
        Option: PropTypes.Requireable<any>; /**
            *Child Element* - A drop menu option. 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.
        */
        /**
            Optional Title.
        */
        Title: PropTypes.Requireable<string>;
    };
    UNSAFE_componentWillMount(): void;
    UNSAFE_componentWillReceiveProps(nextProps: ISingleSelectProps): void;
    render(): React.ReactNode;
}
declare const _default: typeof SingleSelect & import("../../util/state-management").IHybridComponent<ISingleSelectProps, ISingleSelectState>;
export default _default;
export { SingleSelect as SingleSelectDumb };
//# sourceMappingURL=SingleSelect.d.ts.map