/// <reference types="react" />
import { Observable } from '../../Core/Observable';
import { IFocusZoneProps } from '../../FocusZone';
import { IIconProps } from '../../Icon';
import { IListSelection } from '../../List';
import { ITableColumn } from '../../Table';
import { IItemProvider } from '../../Utilities/Provider';
import { ISelectionRange } from '../../Utilities/Selection';
export interface IListBoxProps<T = {}> extends IListBoxSharedProps<T> {
    /**
     * className to pass to the listbox.
     */
    className?: string;
    /**
     * Set to true to exclude all listbox rows from focus zones.
     */
    excludeFocusZone?: boolean;
    /**
     * Set to true to remove tab stops from the listbox rows.
     */
    excludeTabStop?: boolean;
    /**
     * focuszoneProps allows the caller to manage the how the list box rows are focused.
     */
    focuszoneProps?: IFocusZoneProps | null;
    /**
     * onActivate is called when the row is activated. Activation occurs on
     * the Enter keystroke or double click.
     *
     * @param event - This is the event that is causing the activation.
     * @param tableRow - Details about the table row being activated.
     */
    onActivate?: (event: React.SyntheticEvent<HTMLElement>, item: IListBoxItem<T>) => void;
}
export interface IListBoxSharedProps<T = {}> {
    /**
     * className to pass to the listbox's container.
     */
    containerClassName?: string;
    /**
     * This is called when updates are made to the listBox items to update the unselectbale items in the selection.
     */
    getUnselectableRanges?: (items: IListBoxItem<T>[]) => ISelectionRange[];
    /**
     * The caller may supply the set of items to be shown through the ItemProvider or array.
     * The IItemProvider allows the caller to store their items in the form that
     * bests suits their needs but gives the listbox a well defined interface for
     * requesting the items. This can include async fetching of items through
     * observables.  Use an IItemProvider or something that implements it like ObservableArray
     * If the items will be changing.
     */
    items: IItemProvider<IListBoxItem<T>> | IListBoxItem<T>[] | string[];
    /**
     * Set to true to show a loading indicator in place of the list.
     */
    loading?: boolean | Observable<boolean>;
    /**
     * onSelect is called when the row is selected. Selection occurs on the
     * Space keystroke or click.
     *
     * @param event - This is the event that is causing the selection.
     * @param listRow - Details about the list row being selected.
     */
    onSelect?: (event: React.SyntheticEvent<HTMLElement>, item: IListBoxItem<T>) => void;
    /**
     * If provided, this will be called on each item to determine how it's rendered.
     */
    renderItem?: (rowIndex: number, columnIndex: number, tableColumn: ITableColumn<IListBoxItem<T>>, tableItem: IListBoxItem<T>) => JSX.Element;
    /**
     * Set to true to show a searching indicator in place of the list.
     */
    searching?: boolean | Observable<boolean>;
    /**
     * The selection maintains the selected state and defines the selection behavior of the list box.  Defaults to a ListSelection
     * with selectOnFocus set to false if not provided.  Selection should be specified on mount and not updated to a new object
     * during the Listbox's lifecycle.
     */
    selection?: IListSelection;
    /**
     * The width of the listbox.
     * @default 100%
     */
    width?: number;
}
export interface IListBoxItem<T = {}> {
    /**
     * className to pass to the item's cell.
     */
    className?: string;
    /**
     * Optional item data to be used in custom render function.
     */
    data?: T;
    /**
     * Provide to indicate this item belongs to a group.  Use a GroupedItemProvider to arrange grouped items.
     */
    groupId?: string;
    /**
     * Props specifying the icon to render beside the item text.
     */
    iconProps?: IIconProps;
    /**
     * Unique identifier of the item.
     */
    id: string;
    /**
     * Text to render in the item's row.
     */
    text?: string;
    /**
     * A function to render custom item content.
     */
    render?: (rowIndex: number, columnIndex: number, tableColumn: ITableColumn<IListBoxItem<T>>, tableItem: IListBoxItem<T>) => JSX.Element;
    /**
     * The type of list item.  Headers and Separators ignore focus and selection.
     */
    type?: ListBoxItemType;
}
export interface IListBoxGroup {
    /**
     * Unique identifier for the group.
     */
    id: string;
    /**
     * Set to true to indicate this group is loading.  The GroupedItemProvider will check this value and add a loading cell if true.
     */
    loading?: boolean;
    /**
     * Display name for the group.  Not needed if you are supplying your own header items.
     */
    name?: string;
}
export declare const enum ListBoxItemType {
    Row = 1,
    Header = 2,
    Divider = 3,
    Loading = 4
}
export interface ILoadingCellProps<T> {
    /**
     * The index of the column this cell is being rendered in.
     */
    columnIndex: number;
    /**
     * The column this cell is being rendered in.
     */
    tableColumn: ITableColumn<IListBoxItem<T>>;
    /**
     * The listbox item associated with this cell.
     */
    tableItem: IListBoxItem<T>;
    /**
     * Function to call after the row has finished rendering.  Use this to trigger data fetching.
     */
    onMount?: () => void;
}