@fluentui/react/lib-commonjs/components/pickers/BasePicker.d.ts

Reusable React components for building web experiences.

import * as React from 'react';
import { KeyCodes, IStyleFunctionOrObject } from '../../Utilities';
import { Selection } from '../../utilities/selection/index';
import { Suggestions } from './Suggestions/Suggestions';
import { SuggestionsController } from './Suggestions/SuggestionsController';
import { Autofill } from '../Autofill/index';
import type { ISuggestions, ISuggestionsProps } from './Suggestions/Suggestions.types';
import type { IBasePicker, IBasePickerProps } from './BasePicker.types';
import type { IAutofill } from '../Autofill/index';
import type { ILabelStyleProps, ILabelStyles } from '../../Label';
import type { ICalloutContentStyleProps, ICalloutContentStyles } from '../../Callout';
import type { JSXElement } from '@fluentui/utilities';
export interface IBasePickerState<T> {
    items?: any;
    suggestedDisplayValue?: string;
    moreSuggestionsAvailable?: boolean;
    isFocused?: boolean;
    isSearching?: boolean;
    isMostRecentlyUsedVisible?: boolean;
    suggestionsVisible?: boolean;
    suggestionsLoading?: boolean;
    suggestionsExtendedLoading?: boolean;
    isResultsFooterVisible?: boolean;
    selectedIndices?: number[];
    selectionRemoved?: T;
    errorMessage?: string | JSXElement;
}
/**
 * Aria id's for internal picker components
 * {@docCategory Pickers}
 */
export type IPickerAriaIds = {
    /**
     * Aria id for selected suggestion alert component
     */
    selectedSuggestionAlert: string;
    /**
     * Aria id for selected items container component
     */
    selectedItems: string;
    /**
     * Aria id for suggestions list component
     */
    suggestionList: string;
    /**
     * Aria id for element with role=combobox
     */
    combobox: string;
    /**
     * Aria id for error message component
     */
    error: string;
};
/**
 * {@docCategory Pickers}
 */
export declare class BasePicker<T extends {}, P extends IBasePickerProps<T>> extends React.Component<P, IBasePickerState<T>> implements IBasePicker<T> {
    static contextType: React.Context<import("@fluentui/react-window-provider").WindowProviderProps>;
    context: any;
    protected root: React.RefObject<HTMLDivElement | null>;
    protected input: React.RefObject<IAutofill | null>;
    protected suggestionElement: React.RefObject<ISuggestions<T> | null>;
    protected selection: Selection;
    protected suggestionStore: SuggestionsController<T>;
    /**
     * @deprecated this is no longer necessary as typescript now supports generic elements
     */
    protected SuggestionOfProperType: new (props: ISuggestionsProps<T>) => Suggestions<T>;
    protected currentPromise: PromiseLike<any> | undefined;
    protected _ariaMap: IPickerAriaIds;
    private _styledSuggestions;
    private _id;
    private _async;
    private _isMounted;
    private _onResolveSuggestionsDebounced;
    private _overrideScrollDismiss;
    private _overrideScrollDimissTimeout;
    static getDerivedStateFromProps(newProps: IBasePickerProps<any>): IBasePickerState<any> | null;
    constructor(basePickerProps: P);
    get items(): T[];
    componentDidMount(): void;
    componentDidUpdate(oldProps: P, oldState: IBasePickerState<T>): void;
    componentWillUnmount(): void;
    focus(): void;
    focusInput(): void;
    dismissSuggestions: (ev?: any) => void;
    completeSuggestion(forceComplete?: boolean): void;
    refocusSuggestions: (keyCode: KeyCodes) => void;
    render(): JSXElement;
    protected _getDescribedBy: (items: T[], hasError: boolean) => string;
    protected canAddItems(): boolean;
    protected renderLabel(inputId: string, styles: IStyleFunctionOrObject<ILabelStyleProps, ILabelStyles> | undefined): JSXElement | null;
    protected renderError(className?: string): JSXElement | null;
    protected renderSuggestions(styles: IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles> | undefined): JSXElement | null;
    protected renderItems(): JSXElement[];
    protected resetFocus(index?: number): void;
    protected onSuggestionSelect(): void;
    protected onSelectionChange(): void;
    protected updateSuggestions(suggestions: any[]): void;
    /**
     * Only to be called when there is nothing in the input. Checks to see if the consumer has
     * provided a function to resolve suggestions
     */
    protected onEmptyInputFocus(): void;
    protected updateValue(updatedValue: string): void;
    protected updateSuggestionsList(suggestions: T[] | PromiseLike<T[]>, updatedValue?: string): void;
    protected resolveNewValue(updatedValue: string, suggestions: T[]): void;
    protected onChange(items?: T[]): void;
    protected onInputChange: (value: string) => void;
    protected onSuggestionClick: (ev: React.MouseEvent<HTMLElement>, item: any, index: number) => void;
    protected onSuggestionRemove: (ev: React.MouseEvent<HTMLElement>, item: T, index: number) => void;
    protected onInputFocus: (ev: React.FocusEvent<HTMLInputElement | Autofill>) => void;
    protected onInputBlur: (ev: React.FocusEvent<HTMLInputElement | Autofill>) => void;
    protected onBlur: (ev: React.FocusEvent<HTMLElement | Autofill>) => void;
    /**
     * Resets focus to last element in wrapper div if clicking back into Picker that has hit item limit
     */
    protected onWrapperClick: (ev: React.MouseEvent<HTMLInputElement>) => void;
    /**
     * Reveals suggestions any time the user clicks on the input element
     * without shifting focus.
     */
    protected onClick: (ev: React.MouseEvent<HTMLInputElement>) => void;
    protected onFocus: () => void;
    protected onKeyDown: (ev: React.KeyboardEvent<HTMLElement>) => void;
    protected onItemChange: (changedItem: T, index: number) => void;
    protected onGetMoreResults: () => void;
    protected completeSelection: (item: T) => void;
    protected addItemByIndex: (index: number) => void;
    protected addItem: (item: T) => void;
    protected removeItem: (item: T) => void;
    protected removeItems: (itemsToRemove: any[]) => void;
    protected onBackspace(ev: React.KeyboardEvent<HTMLElement>): void;
    /**
     * @deprecated this is no longer necessary as focuszone has been removed
     */
    protected _shouldFocusZoneEnterInnerZone: (ev: React.KeyboardEvent<HTMLElement>) => boolean;
    protected getActiveDescendant(): string | undefined;
    /** @deprecated use renderCustomAlert instead */
    protected getSuggestionsAlert(suggestionAlertClassName?: string): JSXElement | undefined;
    protected renderCustomAlert(alertClassName?: string): JSXElement;
    private _preventDismissOnScrollOrResize;
    /** If suggestions are still loading after a predefined amount of time, set state to show user alert */
    private _startLoadTimer;
    /**
     * Takes in the current updated value and either resolves it with the new suggestions
     * or if updated value is undefined then it clears out currently suggested items
     */
    private _updateAndResolveValue;
    private _getErrorMessage;
    private _updateErrorMessage;
    /**
     * Controls what happens whenever there is an action that impacts the selected items.
     * If `selectedItems` is provided, this will act as a controlled component and it will not update its own state.
     */
    private _updateSelectedItems;
    private _onSelectedItemsUpdated;
    /**
     * Suggestions are normally shown after the user updates text and the text
     * is non-empty, but also when the user clicks on the input element.
     * @returns True if suggestions should be shown.
     */
    private _getShowSuggestions;
    private _onResolveSuggestions;
    private _completeGenericSuggestion;
    private _getTextFromItem;
    /**
     * This should be called when the user does something other than use text entry to trigger suggestions.
     *
     */
    private _userTriggeredSuggestions;
}
export declare class BasePickerListBelow<T extends {}, P extends IBasePickerProps<T>> extends BasePicker<T, P> {
    render(): JSXElement;
    protected onBackspace(ev: React.KeyboardEvent<HTMLElement>): void;
}