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

A UI component library from Xandr.

import React from 'react';
import PropTypes from 'prop-types';
import { propsSearch } from '../../util/text-manipulation';
import { StandardProps, Overwrite } from '../../util/component-types';
import { ISearchFieldProps } from '../SearchField/SearchField';
import { IDropMenuProps, IDropMenuState, IDropMenuOptionProps, IOptionsData, IDropMenuOptionGroupProps, DropMenuDumb as DropMenu } from '../DropMenu/DropMenu';
import * as reducers from './SearchableSingleSelect.reducers';
/** Option */
export interface ISearchableSingleSelectOptionProps extends IDropMenuOptionProps {
    description?: string;
    name?: string;
    Selected?: React.ReactNode;
}
/** Searchable Single Select */
export interface ISearchableSingleSelectPropsRaw extends StandardProps {
    hasReset?: boolean;
    hasSelections?: boolean;
    isDisabled: boolean;
    isLoading: boolean;
    maxMenuHeight?: string;
    selectedIndex: number | null;
    searchText: string;
    SearchField: React.ReactNode;
    DropMenu: IDropMenuProps;
    Option?: React.ReactNode;
    OptionGroup?: IDropMenuOptionGroupProps;
    Error: React.ReactNode;
    /** Called when an option is clicked, or when an option has focus and the
        Enter key is pressed. */
    onSelect: (optionIndex: number | null, { props, event, }: {
        props: IDropMenuOptionProps | undefined;
        event: React.KeyboardEvent | React.MouseEvent;
    }) => void;
    onSearch: (searchText: string, firstVisibleIndex: number | null, { props, event, }: {
        props: IDropMenuOptionProps;
        event: React.KeyboardEvent | React.MouseEvent;
    }) => void;
    optionFilter: (searchValue: string, props: any) => boolean;
}
export declare type ISearchableSingleSelectProps = Overwrite<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ISearchableSingleSelectPropsRaw>;
export interface ISearchableSingleSelectState {
    DropMenu: IDropMenuState;
    selectedIndex: number | null;
    searchText: string | null;
    optionGroups: IDropMenuOptionGroupProps[];
    flattenedOptionsData: IOptionsData[];
    ungroupedOptionData: IOptionsData[];
    optionGroupDataLookup: {
        [key: number]: IOptionsData[];
    };
}
declare class SearchableSingleSelect extends React.Component<ISearchableSingleSelectProps, ISearchableSingleSelectState> {
    static displayName: string;
    static peek: {
        description: string;
        categories: string[];
        madeFrom: string[];
    };
    static defaultProps: {
        isDisabled: boolean;
        isLoading: boolean;
        optionFilter: typeof propsSearch;
        searchText: string;
        selectedIndex: null;
        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;
            };
        };
        Error: null;
        onSearch: (...args: any[]) => void;
        onSelect: (...args: any[]) => void;
        SearchField: {
            isDisabled: boolean;
            onChange: (...args: any[]) => void;
            onChangeDebounced: (...args: any[]) => void;
            debounceLevel: number;
            onSubmit: (...args: any[]) => void;
            value: string;
        };
    };
    static reducers: typeof reducers;
    static Option: {
        (_props: ISearchableSingleSelectOptionProps): 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>;
            value: PropTypes.Requireable<string>;
            filterText: PropTypes.Requireable<string>;
        };
        defaultProps: {
            isDisabled: boolean;
            isHidden: boolean;
            isWrapped: boolean;
        };
    };
    static OptionGroup: {
        (_props: IDropMenuOptionGroupProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
        propTypes: {
            isHidden: PropTypes.Requireable<boolean>;
        };
        defaultProps: {
            isHidden: boolean;
        };
    };
    static SearchField: {
        (_props: ISearchFieldProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
        propTypes: {
            onChange: PropTypes.Requireable<(...args: any[]) => any>;
            onChangeDebounced: PropTypes.Requireable<(...args: any[]) => any>;
            debounceLevel: PropTypes.Requireable<number>;
            onSubmit: PropTypes.Requireable<(...args: any[]) => any>;
            value: PropTypes.Requireable<string | number>;
            isValid: PropTypes.Requireable<boolean>;
            isDisabled: PropTypes.Requireable<boolean>;
            placeholder: PropTypes.Requireable<string>;
            className: PropTypes.Requireable<string>;
            Icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
            TextField: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        };
        defaultProps: {
            isDisabled: boolean;
            onChange: (...args: any[]) => void;
            onChangeDebounced: (...args: any[]) => void;
            debounceLevel: number;
            onSubmit: (...args: any[]) => void;
            value: string;
        };
    };
    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 DropMenu: typeof DropMenu;
    static propTypes: {
        /**
            Should be instances of {\`SearchableSingleSelect.Option\`}. Other direct
            child elements will not render.
        */
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
            Appended to the component-specific class names set on the root element.
        */
        className: PropTypes.Requireable<string>;
        /**
            Disables the control from being clicked or focused.
        */
        isDisabled: PropTypes.Requireable<boolean>;
        /**
            Displays a LoadingIcon to allow for asynchronous loading of options.
        */
        isLoading: PropTypes.Requireable<boolean>;
        /**
            The max height of the fly-out menu.
        */
        maxMenuHeight: PropTypes.Requireable<string | number>;
        onSearch: PropTypes.Requireable<(...args: any[]) => any>; /**
            Called when the user enters a value to search for; the set of visible
            Options will be filtered using the value.  Signature: \`(searchText,
            firstVisibleIndex, {props, event}) => {}\` \`searchText\` is the value
            from the \`SearchField\` and \`firstVisibleIndex\` is the index of the
            first option that will be visible after filtering.
        */
        /**
            Called when an option is selected.  Signature: \`(optionIndex, {props,
            event}) => {}\` \`optionIndex\` is the new \`selectedIndex\` or \`null\`.
        */
        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            The function that will be run against each Option's props to determine
            whether it should be visible or not. The default behavior of the function
            is to match, ignoring case, against any text node descendant of the
            \`Option\`.  Signature: \`(searchText, optionProps) => {}\` If \`true\`
            is returned, the option will be visible. If \`false\`, the option will
            not be visible.
        */
        optionFilter: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            The current search text to filter the list of options by.
        */
        searchText: PropTypes.Requireable<string>;
        /**
            Currently selected \`SearchableSingleSelect.Option\` index
            or \`null\` if nothing is selected.
        */
        selectedIndex: PropTypes.Requireable<number>;
        /**
            Object of DropMenu props which are passed through 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>;
        }>>;
        Option: PropTypes.Requireable<any>; /**
            *Child Element* - These are menu options. 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.  It also support the \`Selection\` prop that can be used to
            forward along props to the underlying \`Selection\` component.
        */
        /**
            In most cases this will be a string, but it also accepts any valid React
            element. If this is a falsey value, then no error message will be
            displayed.  If this is the literal \`true\`, it will add the
            \`-is-error\` class to the wrapper div, but not render the
            \`-error-content\` \`div\`.
        */
        Error: PropTypes.Requireable<any>;
        FixedOption: PropTypes.Requireable<any>; /**
            *Child Element* - A special kind of \`Option\` that is always rendered at the top of
            the menu.
        */
        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.
        */
        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.
        */
        /**
         *Child Element* - Passes props through to the \`SearchField\` component.
         */
        SearchField: PropTypes.Requireable<any>;
    };
    UNSAFE_componentWillMount(): void;
    UNSAFE_componentWillReceiveProps(nextProps: ISearchableSingleSelectProps): void;
    handleSearch: (searchText: string, { event, }: {
        event: React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>;
    }) => void;
    renderUnderlinedChildren: (childText: string, searchText: string) => any[];
    renderOptionContent: (optionProps: ISearchableSingleSelectOptionProps, searchText: string) => any;
    renderOption: ({ optionProps, optionIndex, }: {
        optionProps: ISearchableSingleSelectOptionProps;
        optionIndex: number | null;
    }) => any;
    renderOptions: () => any;
    removeSelection: ({ event, props, }: {
        event: React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>;
        props: ISearchableSingleSelectOptionProps;
    }) => void;
    render: () => JSX.Element;
}
declare const _default: typeof SearchableSingleSelect & import("../../util/state-management").IHybridComponent<ISearchableSingleSelectProps, ISearchableSingleSelectState>;
export default _default;
export { SearchableSingleSelect as SearchableSingleSelectDumb };
//# sourceMappingURL=SearchableSingleSelect.d.ts.map