@fluentui/react/dist/react.d.ts

Reusable React components for building web experiences.

import { DateRangeType } from '@fluentui/date-time-utilities';
import { DayOfWeek } from '@fluentui/date-time-utilities';
import { EventGroup } from '@fluentui/utilities';
import { FirstWeekOfYear } from '@fluentui/date-time-utilities';
import { IBaseProps } from '@fluentui/utilities';
import { ICalendarStrings } from '@fluentui/date-time-utilities';
import { IComponent } from '@fluentui/foundation-legacy';
import { IComponentAs } from '@fluentui/utilities';
import { IComponentStyles } from '@fluentui/foundation-legacy';
import { ICSSPixelUnitRule } from '@fluentui/merge-styles/lib/IRawStyleBase';
import { ICSSRule } from '@fluentui/merge-styles/lib/IRawStyleBase';
import { IDateFormatting } from '@fluentui/date-time-utilities';
import { IDayGridOptions } from '@fluentui/date-time-utilities';
import { IFocusZoneProps } from '@fluentui/react-focus';
import { IFontStyles } from '@fluentui/style-utilities';
import { IHTMLSlot } from '@fluentui/foundation-legacy';
import { IObjectWithKey } from '@fluentui/utilities';
import { IPoint } from '@fluentui/utilities';
import { IProcessedStyleSet } from '@fluentui/style-utilities';
import { IRawStyle } from '@fluentui/style-utilities';
import { IRectangle } from '@fluentui/utilities';
import { IRefObject } from '@fluentui/utilities';
import { IRenderComponent } from '@fluentui/utilities';
import { IRenderFunction } from '@fluentui/utilities';
import { ISelection } from '@fluentui/utilities';
import { ISelectionOptions } from '@fluentui/utilities';
import { ISlotProp } from '@fluentui/foundation-legacy';
import { ISlottableProps } from '@fluentui/foundation-legacy';
import { IStyle } from '@fluentui/style-utilities';
import { IStyleableComponentProps } from '@fluentui/foundation-legacy';
import { IStyleFunction } from '@fluentui/utilities';
import { IStyleFunctionOrObject } from '@fluentui/utilities';
import { ITheme } from '@fluentui/style-utilities';
import { KeyCodes } from '@fluentui/utilities';
import { PartialTheme } from '@fluentui/theme';
import { Point } from '@fluentui/utilities';
import * as React_2 from 'react';
import { ReactNode } from 'react';
import { Rectangle } from '@fluentui/utilities';
import { Selection as Selection_2 } from '@fluentui/utilities';
import { SELECTION_CHANGE } from '@fluentui/utilities';
import { SelectionDirection } from '@fluentui/utilities';
import { SelectionMode as SelectionMode_2 } from '@fluentui/utilities';
import { Target } from '@fluentui/react-hooks';
import { Theme } from '@fluentui/theme';

/**
 * {@docCategory Button}
 */
export declare class ActionButton extends React_2.Component<IButtonProps, {}> {
    render(): JSX.Element;
}

/**
 * {@docCategory ActivityItem}
 */
export declare class ActivityItem extends React_2.Component<IActivityItemProps, {}> {
    constructor(props: IActivityItemProps);
    render(): JSX.Element;
    private _onRenderIcon;
    private _onRenderActivityDescription;
    private _onRenderComments;
    private _onRenderTimeStamp;
    private _onRenderPersonaArray;
    private _getClassNames;
}

/**
 * Defines a type made by the union of the different values that the align-items and justify-content flexbox
 * properties can take.
 * {@docCategory Stack}
 */
export declare type Alignment = 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'baseline' | 'stretch';

/**
 * {@docCategory Calendar}
 */
export declare enum AnimationDirection {
    /**
     * Grid will transition out and in horizontally
     */
    Horizontal = 0,
    /**
     * Grid will transition out and in vertically
     */
    Vertical = 1
}

export declare const Announced: React_2.FunctionComponent<IAnnouncedProps>;

/**
 * {@docCategory Announced}
 */
export declare class AnnouncedBase extends React_2.Component<IAnnouncedProps> {
    static defaultProps: Partial<IAnnouncedProps>;
    render(): JSX.Element;
}

/**
 * {@docCategory Autofill}
 */
export declare class Autofill extends React_2.Component<IAutofillProps, IAutofillState> implements IAutofill {
    static defaultProps: {
        enableAutofillOnKeyPress: number[];
    };
    private _inputElement;
    private _autoFillEnabled;
    private _isComposing;
    private _async;
    static getDerivedStateFromProps(props: IAutofillProps, state: IAutofillState): IAutofillState | null;
    constructor(props: IAutofillProps);
    get cursorLocation(): number | null;
    get isValueSelected(): boolean;
    get value(): string;
    get selectionStart(): number | null;
    get selectionEnd(): number | null;
    get inputElement(): HTMLInputElement | null;
    componentDidUpdate(_: any, _1: any, cursor: ICursorLocation | null): void;
    componentWillUnmount(): void;
    render(): JSX.Element;
    focus(): void;
    clear(): void;
    getSnapshotBeforeUpdate(): ICursorLocation | null;
    private _onCompositionStart;
    private _onCompositionUpdate;
    private _onCompositionEnd;
    private _onClick;
    private _onKeyDown;
    private _onInputChanged;
    private _onChanged;
    private _getCurrentInputValue;
    /**
     * Attempts to enable autofill. Whether or not autofill is enabled depends on the input value,
     * whether or not any text is selected, and only if the new input value is longer than the old input value.
     * Autofill should never be set to true if the value is composing. Once compositionEnd is called, then
     * it should be completed.
     * See https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent for more information on composition.
     * @param newValue - new input value
     * @param oldValue - old input value
     * @param isComposing - if true then the text is actively being composed and it has not completed.
     * @param isComposed - if the text is a composed text value.
     */
    private _tryEnableAutofill;
    /**
     * Updates the current input value as well as getting a new display value.
     * @param newValue - The new value from the input
     */
    private _updateValue;
    private _getDisplayValue;
    private _getControlledValue;
}

/**
 * {@docCategory Button}
 */
export declare class BaseButton extends React_2.Component<IBaseButtonProps, IBaseButtonState> implements IButton {
    private get _isSplitButton();
    static defaultProps: Partial<IBaseButtonProps>;
    private _async;
    private _events;
    private _buttonElement;
    private _splitButtonContainer;
    private _mergedRef;
    private _labelId;
    private _descriptionId;
    private _ariaDescriptionId;
    private _classNames;
    private _processingTouch;
    private _lastTouchTimeoutId;
    private _renderedVisibleMenu;
    private _menuShouldFocusOnContainer;
    private _menuShouldFocusOnMount;
    private _getMemoizedMenuButtonKeytipProps;
    constructor(props: IBaseButtonProps);
    render(): JSX.Element;
    componentDidMount(): void;
    componentDidUpdate(prevProps: IBaseButtonProps, prevState: IBaseButtonState): void;
    componentWillUnmount(): void;
    focus(): void;
    dismissMenu(): void;
    openMenu(shouldFocusOnContainer?: boolean, shouldFocusOnMount?: boolean): void;
    private _onRenderContent;
    /**
     * Method to help determine if the menu's component tree should
     * be rendered. It takes into account whether the menu is expanded,
     * whether it is a persisted menu and whether it has been shown to the user.
     */
    private _shouldRenderMenu;
    private _onRenderIcon;
    private _onRenderTextContents;
    private _onRenderText;
    private _hasText;
    private _onRenderChildren;
    private _onRenderDescription;
    private _onRenderAriaDescription;
    private _onRenderMenuIcon;
    private _onRenderMenu;
    private _onDismissMenu;
    private _dismissMenu;
    private _openMenu;
    private _onToggleMenu;
    private _onRenderSplitButtonContent;
    private _onSplitContainerFocusCapture;
    private _onSplitButtonPrimaryClick;
    private _onRenderSplitButtonDivider;
    private _onRenderSplitButtonMenuButton;
    private _onKeyDown;
    private _onKeyUp;
    private _onKeyPress;
    private _onMouseUp;
    private _onMouseDown;
    private _onClick;
    private _onSplitButtonContainerKeyDown;
    private _onMenuKeyDown;
    private _onTouchStart;
    private _onPointerDown;
    private _handleTouchAndPointerEvent;
    /**
     * Returns if the user hits a valid keyboard key to open the menu
     * @param ev - the keyboard event
     * @returns True if user clicks on custom trigger key if enabled or alt + down arrow if not. False otherwise.
     */
    private _isValidMenuOpenKey;
    private _onMenuClick;
}

/**
 * {@docCategory ExtendedPeoplePicker}
 */
export declare class BaseExtendedPeoplePicker extends BaseExtendedPicker<IPersonaProps, IExtendedPeoplePickerProps> {
}

export declare class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extends React_2.Component<P, IBaseExtendedPickerState<T>> implements IBaseExtendedPicker<T> {
    floatingPicker: React_2.RefObject<BaseFloatingPicker<T, IBaseFloatingPickerProps<T>>>;
    selectedItemsList: React_2.RefObject<BaseSelectedItemsList<T, IBaseSelectedItemsListProps<T>>>;
    protected root: React_2.RefObject<HTMLDivElement>;
    protected input: React_2.RefObject<Autofill>;
    protected selection: Selection_2;
    constructor(basePickerProps: P);
    get items(): any;
    componentDidMount(): void;
    focus(): void;
    clearInput(): void;
    get inputElement(): HTMLInputElement | null;
    get highlightedItems(): T[];
    render(): JSX.Element;
    protected get floatingPickerProps(): IBaseFloatingPickerProps<T>;
    protected get selectedItemsListProps(): IBaseSelectedItemsListProps<T>;
    protected onSelectionChange: () => void;
    protected canAddItems(): boolean;
    protected renderFloatingPicker(): JSX.Element;
    protected renderSelectedItemsList(): JSX.Element;
    protected onInputChange: (value: string, composing?: boolean | undefined) => void;
    protected onInputFocus: (ev: React_2.FocusEvent<HTMLInputElement | Autofill>) => void;
    protected onInputClick: (ev: React_2.MouseEvent<HTMLInputElement | Autofill>) => void;
    protected onBackspace: (ev: React_2.KeyboardEvent<HTMLElement>) => void;
    protected onCopy: (ev: React_2.ClipboardEvent<HTMLElement>) => void;
    protected onPaste: (ev: React_2.ClipboardEvent<Autofill | HTMLInputElement>) => void;
    protected _onSuggestionSelected: (item: T) => void;
    protected _onSelectedItemsChanged: () => void;
    /**
     * The floating picker is the source of truth for if the menu has been opened or not.
     *
     * Because this isn't tracked inside the state of this component, we need to
     * force an update here to keep the rendered output that depends on the picker being open
     * in sync with the state
     *
     * Called when the suggestions is shown or closed
     */
    private _onSuggestionsShownOrHidden;
    private _addProcessedItem;
}

/**
 * {@docCategory FloatingPeoplePicker}
 */
export declare class BaseFloatingPeoplePicker extends BaseFloatingPicker<IPersonaProps, IPeopleFloatingPickerProps> {
}

export declare class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extends React_2.Component<P, IBaseFloatingPickerState> implements IBaseFloatingPicker {
    protected selection: Selection;
    protected root: React_2.RefObject<HTMLDivElement>;
    protected suggestionStore: SuggestionsStore<T>;
    protected suggestionsControl: React_2.RefObject<SuggestionsControl<T>>;
    protected SuggestionsControlOfProperType: new (props: ISuggestionsControlProps<T>) => SuggestionsControl<T>;
    protected currentPromise: PromiseLike<T[]>;
    protected isComponentMounted: boolean;
    private _async;
    constructor(basePickerProps: P);
    get inputText(): string;
    get suggestions(): any[];
    forceResolveSuggestion(): void;
    get currentSelectedSuggestionIndex(): number;
    get isSuggestionsShown(): boolean;
    onQueryStringChanged: (queryString: string) => void;
    hidePicker: () => void;
    showPicker: (updateValue?: boolean) => void;
    componentDidMount(): void;
    componentDidUpdate(): void;
    componentWillUnmount(): void;
    completeSuggestion: () => void;
    updateSuggestions(suggestions: T[], forceUpdate?: boolean): void;
    render(): JSX.Element;
    protected renderSuggestions(): JSX.Element | null;
    protected onSelectionChange(): void;
    protected updateValue(updatedValue: string): void;
    protected updateSuggestionWithZeroState(): void;
    protected updateSuggestionsList(suggestions: T[] | PromiseLike<T[]>): void;
    protected onChange(item: T): void;
    protected onSuggestionClick: (ev: React_2.MouseEvent<HTMLElement>, item: T, index: number) => void;
    protected onSuggestionRemove: (ev: React_2.MouseEvent<HTMLElement>, item: T, index: number) => void;
    protected onKeyDown: (ev: MouseEvent) => void;
    private _updateActiveDescendant;
    private _onResolveSuggestions;
    private _onValidateInput;
    private _updateSuggestionsVisible;
    private _bindToInputElement;
    private _unbindFromInputElement;
}

/**
 * {@docCategory PeoplePicker}
 */
export declare class BasePeoplePicker extends BasePicker<IPersonaProps, IPeoplePickerProps> {
}

/**
 * {@docCategory SelectedPeopleList}
 */
export declare class BasePeopleSelectedItemsList extends BaseSelectedItemsList<IExtendedPersonaProps, ISelectedPeopleProps> {
}

/**
 * {@docCategory Pickers}
 */
export declare class BasePicker<T, P extends IBasePickerProps<T>> extends React_2.Component<P, IBasePickerState> implements IBasePicker<T> {
    protected root: React_2.RefObject<HTMLDivElement>;
    protected input: React_2.RefObject<IAutofill>;
    protected suggestionElement: React_2.RefObject<ISuggestions<T>>;
    protected selection: Selection_2;
    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;
    static getDerivedStateFromProps(newProps: IBasePickerProps<any>): {
        items: any[];
    } | null;
    constructor(basePickerProps: P);
    get items(): T[];
    componentDidMount(): void;
    componentDidUpdate(oldProps: P, oldState: IBasePickerState): void;
    componentWillUnmount(): void;
    focus(): void;
    focusInput(): void;
    dismissSuggestions: (ev?: any) => void;
    completeSuggestion(forceComplete?: boolean): void;
    refocusSuggestions: (keyCode: KeyCodes) => void;
    render(): JSX.Element;
    protected canAddItems(): boolean;
    protected renderSuggestions(): JSX.Element | null;
    protected renderItems(): JSX.Element[];
    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_2.MouseEvent<HTMLElement>, item: any, index: number) => void;
    protected onSuggestionRemove: (ev: React_2.MouseEvent<HTMLElement>, item: T, index: number) => void;
    protected onInputFocus: (ev: React_2.FocusEvent<HTMLInputElement | Autofill>) => void;
    protected onInputBlur: (ev: React_2.FocusEvent<HTMLInputElement | Autofill>) => void;
    protected onBlur: (ev: React_2.FocusEvent<HTMLElement | Autofill>) => void;
    /**
     * Reveals suggestions any time the user clicks on the input element
     * without shifting focus.
     */
    protected onClick: (ev: React_2.MouseEvent<HTMLInputElement>) => void;
    protected onFocus: () => void;
    protected onKeyDown: (ev: React_2.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: IPickerItemProps<T>, focusNextItem?: boolean | undefined) => void;
    protected removeItems: (itemsToRemove: any[]) => void;
    protected onBackspace(ev: React_2.KeyboardEvent<HTMLElement>): void;
    /**
     * @deprecated this is no longer necessary as focuszone has been removed
     */
    protected _shouldFocusZoneEnterInnerZone: (ev: React_2.KeyboardEvent<HTMLElement>) => boolean;
    protected getActiveDescendant(): string | undefined;
    protected getSuggestionsAlert(suggestionAlertClassName?: string): JSX.Element | undefined;
    /**
     * 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;
    /**
     * 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, P extends IBasePickerProps<T>> extends BasePicker<T, P> {
    render(): JSX.Element;
    protected onBackspace(ev: React_2.KeyboardEvent<HTMLElement>): void;
}

export declare class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>> extends React_2.Component<P, IBaseSelectedItemsListState<T>> implements IBaseSelectedItemsList<T> {
    protected root: HTMLElement;
    private _defaultSelection;
    static getDerivedStateFromProps(newProps: IBaseSelectedItemsListProps<any>): {
        items: any[];
    } | null;
    constructor(basePickerProps: P);
    get items(): T[];
    addItems: (items: T[]) => void;
    removeItemAt: (index: number) => void;
    removeItem: (item: T) => void;
    replaceItem: (itemToReplace: T, itemsToReplaceWith: T[]) => void;
    removeItems: (itemsToRemove: any[]) => void;
    removeSelectedItems(): void;
    /**
     * 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 will not update its own state.
     */
    updateItems(items: T[], focusIndex?: number): void;
    onCopy: (ev: React_2.ClipboardEvent<HTMLElement>) => void;
    hasSelectedItems(): boolean;
    componentDidUpdate(oldProps: P, oldState: IBaseSelectedItemsListState<IObjectWithKey>): void;
    unselectAll(): void;
    highlightedItems(): T[];
    componentDidMount(): void;
    protected get selection(): Selection_2;
    render(): any;
    protected renderItems: () => JSX.Element[];
    protected onSelectionChanged: () => void;
    protected onChange(items?: T[]): void;
    protected onItemChange: (changedItem: T, index: number) => void;
    protected copyItems(items: T[]): void;
    private _onSelectedItemsUpdated;
    private _canRemoveItem;
}

export declare enum BaseSlots {
    primaryColor = 0,
    backgroundColor = 1,
    foregroundColor = 2
}

export declare const Breadcrumb: React_2.FunctionComponent<IBreadcrumbProps>;

/**
 * {@docCategory Breadcrumb}
 */
export declare class BreadcrumbBase extends React_2.Component<IBreadcrumbProps, any> {
    static defaultProps: IBreadcrumbProps;
    private _classNames;
    private _focusZone;
    constructor(props: IBreadcrumbProps);
    /**
     * Sets focus to the first breadcrumb link.
     */
    focus(): void;
    render(): JSX.Element;
    /**
     * Remove the first rendered item past the overlow point and put it and the end the overflow set.
     */
    private _onReduceData;
    /**
     * Remove the last item of the overflow set and insert the item as the start of the rendered set past the overflow
     * point.
     */
    private _onGrowData;
    private _onRenderBreadcrumb;
    private _onRenderItem;
    private _onBreadcrumbClicked;
    /**
     * Validate incoming props
     * @param props - Props to validate
     */
    private _validateProps;
}

export declare function buildColumns(items: any[], canResizeColumns?: boolean, onColumnClick?: (ev: React_2.MouseEvent<HTMLElement>, column: IColumn) => void, sortedColumnKey?: string, isSortedDescending?: boolean, groupedColumnKey?: string, isMultiline?: boolean): IColumn[];

/**
 * Builds a map of ID to IKeytipProps
 *
 * @param config - IKeytipConfig object
 * @returns Config map
 */
export declare function buildKeytipConfigMap(config: IKeytipConfig): IKeytipConfigMap;

/**
 * This class is deprecated. Use the individual *Button components instead.
 * @deprecated Use the individual *Button components instead.
 * {@docCategory Button}
 */
export declare class Button extends React_2.Component<IButtonProps, {}> {
    constructor(props: IButtonProps);
    render(): JSX.Element;
}

export declare const ButtonGrid: React_2.FunctionComponent<IButtonGridProps>;

export declare const ButtonGridCell: <T, P extends IButtonGridCellProps<T>>(props: IButtonGridCellProps<T>) => JSX.Element;

/**
 * {@docCategory Button}
 */
export declare enum ButtonType {
    normal = 0,
    primary = 1,
    hero = 2,
    compound = 3,
    command = 4,
    icon = 5,
    default = 6
}

export declare const Calendar: React_2.FunctionComponent<ICalendarProps>;

export declare const Callout: React_2.FunctionComponent<ICalloutProps>;

export declare const CalloutContent: React_2.FunctionComponent<ICalloutProps>;

export declare const CalloutContentBase: React_2.FunctionComponent<ICalloutProps>;

/**
 * Returns true if a list of menu items can contain a checkbox
 */
export declare function canAnyMenuItemsCheck(items: IContextualMenuItem[]): boolean;

export declare const Check: React_2.FunctionComponent<ICheckProps>;

export declare const CheckBase: React_2.FunctionComponent<ICheckProps>;

export declare const Checkbox: React_2.FunctionComponent<ICheckboxProps>;

export declare const CheckboxBase: React_2.FunctionComponent<ICheckboxProps>;

/**
 * {@docCategory DetailsList}
 */
export declare enum CheckboxVisibility {
    /** Visible on hover. */
    onHover = 0,
    /** Visible always. */
    always = 1,
    /** Hide checkboxes. */
    hidden = 2
}

export declare const ChoiceGroup: React_2.FunctionComponent<IChoiceGroupProps>;

export declare const ChoiceGroupBase: React_2.FunctionComponent<IChoiceGroupProps>;

export declare const ChoiceGroupOption: React_2.FunctionComponent<IChoiceGroupOptionProps>;

/** Clamp a value to ensure it falls within a given range. */
export declare function clamp(value: number, max: number, min?: number): number;

export declare const Coachmark: React_2.FunctionComponent<ICoachmarkProps>;

export declare const COACHMARK_ATTRIBUTE_NAME = "data-coachmarkid";

export declare const CoachmarkBase: React_2.FunctionComponent<ICoachmarkProps>;

/**
 * {@docCategory GroupedList}
 */
export declare enum CollapseAllVisibility {
    hidden = 0,
    visible = 1
}

declare type ColorComponent = keyof Pick<IColor, 'r' | 'g' | 'b' | 'a' | 't' | 'hex'>;

export declare const ColorPicker: React_2.FunctionComponent<IColorPickerProps>;

/**
 * {@docCategory ColorPicker}
 */
export declare class ColorPickerBase extends React_2.Component<IColorPickerProps, IColorPickerState> implements IColorPicker {
    static defaultProps: Partial<IColorPickerProps>;
    private _textChangeHandlers;
    /**
     * Strings displayed in the UI as text field labels (these are in a separate object for convenient
     * indexing by short color component name).
     */
    private _textLabels;
    /** Strings besides red/green/blue/alpha/hex, with defaults for all values except the deprecated `hue` */
    private _strings;
    constructor(props: IColorPickerProps);
    get color(): IColor;
    componentDidUpdate(prevProps: Readonly<IColorPickerProps>, prevState: Readonly<IColorPickerState>): void;
    render(): JSX.Element;
    private _getDisplayValue;
    private _onSVChanged;
    private _onHChanged;
    /** Callback for when the alpha/transparency slider changes */
    private _onATChanged;
    private _onTextChange;
    private _onBlur;
    /**
     * Update the displayed color and call change handlers if appropriate.
     * @param ev - Event if call was triggered by an event (undefined if triggered by props change)
     * @param newColor - Updated color
     */
    private _updateColor;
}

export declare const ColorPickerGridCell: React_2.FunctionComponent<IColorPickerGridCellProps>;

export declare const ColorPickerGridCellBase: React_2.FunctionComponent<IColorPickerGridCellProps>;

/**
 * Enum to describe how a particular column header behaves.
 * This is used to to specify the property `IColumn.columnActionsMode`.
 * If `IColumn.columnActionsMode` is undefined, it's equivalent to `ColumnActionsMode.clickable`.
 * {@docCategory DetailsList}
 */
export declare enum ColumnActionsMode {
    /** Renders the column header as disabled. */
    disabled = 0,
    /** Renders the column header as clickable. Default value. */
    clickable = 1,
    /** Renders the column header as clickable and displays the dropdown chevron. */
    hasDropdown = 2
}

/**
 * Enum to describe where the column has been dropped, after starting the drag
 * {@docCategory DetailsList}
 */
export declare enum ColumnDragEndLocation {
    /** Drag ended outside of current list */
    outside = 0,
    /** Drag ended within current list */
    surface = 1,
    /** Drag ended on header */
    header = 2
}

export declare const ComboBox: React_2.FunctionComponent<IComboBoxProps>;

export declare const CommandBar: React_2.FunctionComponent<ICommandBarProps>;

export declare class CommandBarBase extends React_2.Component<ICommandBarProps, {}> implements ICommandBar {
    static defaultProps: ICommandBarProps;
    private _overflowSet;
    private _resizeGroup;
    private _classNames;
    constructor(props: ICommandBarProps);
    render(): JSX.Element;
    focus(): void;
    remeasure(): void;
    private _onRenderData;
    private _onRenderItem;
    private _commandButton;
    private _onButtonClick;
    private _onRenderOverflowButton;
    private _computeCacheKey;
    private _onReduceData;
    private _onGrowData;
}

/**
 * {@docCategory Button}
 */
export declare class CommandBarButton extends React_2.Component<IButtonProps, {}> {
    render(): JSX.Element;
}

/**
 * {@docCategory Button}
 */
export declare const CommandButton: typeof ActionButton;

export declare const CompactPeoplePicker: React_2.FunctionComponent<IPeoplePickerProps>;

/**
 * Compact layout. It uses personas without secondary text when displaying search results.
 * {@docCategory PeoplePicker}
 */
export declare class CompactPeoplePickerBase extends BasePeoplePicker {
    /** Default props for CompactPeoplePicker. */
    static defaultProps: {
        onRenderItem: (props: IPeoplePickerItemSelectedProps) => JSX.Element;
        onRenderSuggestionsItem: (personaProps: IPersonaProps, suggestionsProps?: IBasePickerSuggestionsProps<any> | undefined) => JSX.Element;
        createGenericItem: typeof createGenericItem;
    };
}

/**
 * {@docCategory Button}
 */
export declare class CompoundButton extends React_2.Component<IButtonProps, {}> {
    render(): JSX.Element;
}

/**
 * {@docCategory DetailsList}
 */
export declare enum ConstrainMode {
    /** Lets the content grow which allows the page to manage scrolling. */
    unconstrained = 0,
    /** Constrains the list to the given layout space. */
    horizontalConstrained = 1
}

/**
 * Constructs a keytip from an IKeytipConfigItem and puts it in the configMap
 *
 * @param configMap - IKeytipConfigMap to store the keytip in
 * @param parentSequence - string of the parent keytip
 * @param keytip - IKeytipConfigItem data
 */
export declare function constructKeytip(configMap: IKeytipConfigMap, parentSequence: string[], keytip: IKeytipConfigItem): void;

/**
 * ContextualMenu description
 */
export declare const ContextualMenu: React_2.FunctionComponent<IContextualMenuProps>;

export declare const ContextualMenuBase: React_2.FunctionComponent<IContextualMenuProps>;

/**
 * ContextualMenuItem description
 */
export declare const ContextualMenuItem: React_2.FunctionComponent<IContextualMenuItemProps>;

export declare class ContextualMenuItemBase extends React_2.Component<IContextualMenuItemProps, {}> {
    constructor(props: IContextualMenuItemProps);
    render(): JSX.Element;
    openSubMenu: () => void;
    dismissSubMenu: () => void;
    dismissMenu: (dismissAll?: boolean | undefined) => void;
    private _renderLayout;
}

/**
 * {@docCategory ContextualMenu}
 */
export declare enum ContextualMenuItemType {
    Normal = 0,
    Divider = 1,
    Header = 2,
    Section = 3
}

/**
 * Corrects a hex color to have length 3 or 6. Defaults to white if too short.
 * Does NOT check anything besides the length (such as valid characters) and does NOT handle
 * hex values starting with # sign.
 */
export declare function correctHex(hex: string): string;

/** Corrects an HSV color to fall within the valid range. */
export declare function correctHSV(color: IHSV): IHSV;

/** Corrects an RGB color to fall within the valid range.  */
export declare function correctRGB(color: IRGB): IRGB;

/**
 * {@docCategory PeoplePicker}
 */
export declare function createGenericItem(name: string, currentValidationState: ValidationState): IGenericItem & {
    key: React_2.Key;
};

export declare function createItem(name: string, isValid: boolean): ISuggestionModel<IPersonaProps>;

/**
 * Converts a valid CSS color string to an RGB color.
 * Note that hex colors *must* be prefixed with # to be considered valid.
 * Alpha in returned color defaults to 100.
 * Four and eight digit hex values (with alpha) are supported if the current browser supports them.
 */
export declare function cssColor(color?: string): IRGB | undefined;

export declare const DATAKTP_ARIA_TARGET = "data-ktp-aria-target";

export declare const DATAKTP_EXECUTE_TARGET = "data-ktp-execute-target";

export declare const DATAKTP_TARGET = "data-ktp-target";

export declare const DatePicker: React_2.FunctionComponent<IDatePickerProps>;

export declare const DatePickerBase: React_2.FunctionComponent<IDatePickerProps>;
export { DateRangeType }
export { DayOfWeek }

export declare const DEFAULT_CELL_STYLE_PROPS: ICellStyleProps;

export declare const DEFAULT_MASK_CHAR = "_";

export declare const DEFAULT_ROW_HEIGHTS: {
    rowHeight: number;
    compactRowHeight: number;
};

/**
 * {@docCategory Button}
 */
export declare class DefaultButton extends React_2.Component<IButtonProps, {}> {
    render(): JSX.Element;
}

export declare const defaultCalendarNavigationIcons: ICalendarNavigationIcons;

export declare const defaultCalendarStrings: ICalendarStrings;

export declare const defaultDatePickerStrings: IDatePickerStrings;

/**
 * @deprecated Use `defaultCalendarStrings`
 */
export declare const defaultDayPickerStrings: ICalendarStrings;

export declare const defaultWeeklyDayPickerNavigationIcons: IWeeklyDayPickerNavigationIcons;

export declare const defaultWeeklyDayPickerStrings: IWeeklyDayPickerStrings;

/**
 * Component for rendering columns in a `DetailsList`.
 *
 * {@docCategory DetailsList}
 */
export declare class DetailsColumnBase extends React_2.Component<IDetailsColumnProps> {
    private _async;
    private _events;
    private _root;
    private _dragDropSubscription?;
    private _classNames;
    constructor(props: IDetailsColumnProps);
    render(): JSX.Element;
    componentDidMount(): void;
    componentWillUnmount(): void;
    componentDidUpdate(): void;
    private _onRenderColumnHeaderTooltip;
    private _onColumnClick;
    private _getColumnDragDropOptions;
    private _hasAccessibleLabel;
    private _renderAccessibleLabel;
    private _onDragStart;
    private _onDragEnd;
    private _updateHeaderDragInfo;
    private _onColumnContextMenu;
    private _onRootMouseDown;
    private _addDragDropHandling;
}

export declare const DetailsHeader: React_2.FunctionComponent<IDetailsHeaderBaseProps>;

export declare class DetailsHeaderBase extends React_2.Component<IDetailsHeaderBaseProps, IDetailsHeaderState> implements IDetailsHeader {
    static defaultProps: {
        selectAllVisibility: SelectAllVisibility;
        collapseAllVisibility: CollapseAllVisibility;
        useFastIcons: boolean;
    };
    private _classNames;
    private _rootElement;
    private _events;
    private _rootComponent;
    private _id;
    private _draggedColumnIndex;
    private _dropHintDetails;
    private _dragDropHelper;
    private _currentDropHintIndex;
    private _subscriptionObject?;
    private _onDropIndexInfo;
    constructor(props: IDetailsHeaderBaseProps);
    componentDidMount(): void;
    componentDidUpdate(prevProps: IDetailsHeaderBaseProps): void;
    componentWillUnmount(): void;
    render(): JSX.Element;
    /** Set focus to the active thing in the focus area. */
    focus(): boolean;
    /**
     * Gets column reorder props from this.props. If the calling code is part of setting up or
     * handling drag/drop events, it's safe to assume that this method's return value is defined
     * (because drag/drop handling will only be set up if reorder props are given).
     */
    private _getColumnReorderProps;
    private _getHeaderDragDropOptions;
    private _updateDroppingState;
    private _isValidCurrentDropHintIndex;
    private _onDragOver;
    private _onDrop;
    /**
     * @returns whether or not the "Select All" checkbox column is hidden.
     */
    private _isCheckboxColumnHidden;
    private _updateDragInfo;
    private _resetDropHints;
    private _updateDropHintElement;
    private _getDropHintPositions;
    /**
     * Based on the given cursor position, finds the nearest drop hint and updates the state to make it visible
     */
    private _computeDropHintToBeShown;
    private _isEventOnHeader;
    private _renderColumnSizer;
    private _renderColumnDivider;
    private _renderDropHint;
    private _onRenderColumnHeaderTooltip;
    /**
     * double click on the column sizer will auto ajust column width
     * to fit the longest content among current rendered rows.
     *
     * @param columnIndex - index of the column user double clicked
     * @param ev - mouse double click event
     */
    private _onSizerDoubleClick;
    /**
     * Called when the select all toggle is clicked.
     */
    private _onSelectAllClicked;
    private _onRootMouseDown;
    private _onRootMouseMove;
    private _onRootKeyDown;
    /**
     * mouse move event handler in the header
     * it will set isSizing state to true when user clicked on the sizer and move the mouse.
     *
     * @param ev - mouse move event
     */
    private _onSizerMouseMove;
    private _onSizerBlur;
    /**
     * mouse up event handler in the header
     * clear the resize related state.
     * This is to ensure we can catch double click event
     *
     * @param ev - mouse up event
     */
    private _onSizerMouseUp;
    private _onSelectionChanged;
    private _onToggleCollapseAll;
}

export declare const DetailsList: React_2.FunctionComponent<IDetailsListProps>;

export declare class DetailsListBase extends React_2.Component<IDetailsListProps, IDetailsListState> implements IDetailsList {
    static defaultProps: {
        layoutMode: DetailsListLayoutMode;
        selectionMode: SelectionMode_2;
        constrainMode: ConstrainMode;
        checkboxVisibility: CheckboxVisibility;
        isHeaderVisible: boolean;
        compact: boolean;
        useFastIcons: boolean;
    };
    private _async;
    private _root;
    private _header;
    private _groupedList;
    private _list;
    private _focusZone;
    private _selectionZone;
    private _selection;
    private _activeRows;
    private _dragDropHelper;
    private _initialFocusedIndex;
    private _columnOverrides;
    static getDerivedStateFromProps(nextProps: IDetailsListProps, previousState: IDetailsListState): IDetailsListState;
    constructor(props: IDetailsListProps);
    scrollToIndex(index: number, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode): void;
    focusIndex(index: number, forceIntoFirstElement?: boolean, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode): void;
    getStartItemIndexInView(): number;
    componentWillUnmount(): void;
    componentDidUpdate(prevProps: IDetailsListProps, prevState: IDetailsListState): void;
    render(): JSX.Element;
    forceUpdate(): void;
    protected _onRenderRow: (props: IDetailsRowProps, defaultRender?: IRenderFunction<IDetailsRowProps> | undefined) => JSX.Element;
    private _getDerivedStateFromProps;
    private _onGroupExpandStateChanged;
    private _onColumnIsSizingChanged;
    private _getGroupNestingDepth;
    private _onRowDidMount;
    private _setFocusToRowIfPending;
    private _setFocusToRow;
    private _onRowWillUnmount;
    private _onToggleCollapse;
    private _forceListUpdates;
    private _notifyColumnsResized;
    private _adjustColumns;
    /** Returns adjusted columns, given the viewport size and layout mode. */
    private _getAdjustedColumns;
    /** Builds a set of columns based on the given columns mixed with the current overrides. */
    private _getFixedColumns;
    /** Builds a set of columns to fix within the viewport width. */
    private _getJustifiedColumns;
    private _onColumnResized;
    private _rememberCalculatedWidth;
    private _getColumnOverride;
    /**
     * Callback function when double clicked on the details header column resizer
     * which will measure the column cells of all the active rows and resize the
     * column to the max cell width.
     *
     * @param column - double clicked column definition
     * @param columnIndex - double clicked column index
     * TODO: min width 100 should be changed to const value and should be consistent with the
     * value used on _onSizerMove method in DetailsHeader
     */
    private _onColumnAutoResized;
    /**
     * Call back function when an element in FocusZone becomes active. It will translate it into item
     * and call onActiveItemChanged callback if specified.
     *
     * @param row - element that became active in Focus Zone
     * @param focus - event from Focus Zone
     */
    private _onActiveRowChanged;
    private _onBlur;
    private _getItemKey;
}

/**
 * {@docCategory DetailsList}
 */
export declare enum DetailsListLayoutMode {
    /**
     * Lets the user resize columns and makes not attempt to fit them.
     */
    fixedColumns = 0,
    /**
     * Manages which columns are visible, tries to size them according to their min/max rules and drops
     * off columns that can't fit and have isCollapsible set.
     */
    justified = 1
}

export declare const DetailsRow: React_2.FunctionComponent<IDetailsRowBaseProps>;

export declare class DetailsRowBase extends React_2.Component<IDetailsRowBaseProps, IDetailsRowState> {
    private _events;
    private _root;
    private _cellMeasurer;
    private _focusZone;
    private _droppingClassNames;
    /** Whether this.props.onDidMount has been called */
    private _onDidMountCalled;
    private _dragDropSubscription?;
    private _classNames;
    private _rowClassNames;
    static getDerivedStateFromProps(nextProps: IDetailsRowBaseProps, previousState: IDetailsRowState): IDetailsRowState;
    constructor(props: IDetailsRowBaseProps);
    componentDidMount(): void;
    componentDidUpdate(previousProps: IDetailsRowBaseProps): void;
    componentWillUnmount(): void;
    shouldComponentUpdate(nextProps: IDetailsRowBaseProps, nextState: IDetailsRowState): boolean;
    render(): JSX.Element;
    /**
     * measure cell at index. and call the call back with the measured cell width when finish measure
     *
     * @param index - The cell index
     * @param onMeasureDone - The call back function when finish measure
     */
    measureCell(index: number, onMeasureDone: (width: number) => void): void;
    focus(forceIntoFirstElement?: boolean): boolean;
    protected _onRenderCheck(props: IDetailsRowCheckProps): JSX.Element;
    private _onSelectionChanged;
    private _getRowDragDropOptions;
    /**
     * update isDropping state based on the input value, which is used to change style during drag and drop
     *
     * when change to true, that means drag enter. we will add default dropping class name
     * or the custom dropping class name (return result from onDragEnter) to the root elemet.
     *
     * when change to false, that means drag leave. we will remove the dropping class name from root element.
     *
     * @param newValue - New isDropping state value
     * @param event - The event trigger dropping state change which can be dragenter, dragleave etc
     */
    private _updateDroppingState;
}

export declare const DetailsRowCheck: React_2.FunctionComponent<IDetailsRowCheckProps>;

/**
 * Component for rendering a row's cells in a `DetailsList`.
 *
 * {@docCategory DetailsList}
 */
export declare const DetailsRowFields: React_2.FunctionComponent<IDetailsRowFieldsProps>;

export declare const DetailsRowGlobalClassNames: {
    root: string;
    compact: string;
    cell: string;
    cellAnimation: string;
    cellCheck: string;
    check: string;
    cellMeasurer: string;
    listCellFirstChild: string;
    isContentUnselectable: string;
    isSelected: string;
    isCheckVisible: string;
    isRowHeader: string;
    fields: string;
};

export declare const Dialog: React_2.FunctionComponent<IDialogProps>;

export declare class DialogBase extends React_2.Component<IDialogProps, {}> {
    static defaultProps: IDialogProps;
    private _id;
    private _defaultTitleTextId;
    private _defaultSubTextId;
    constructor(props: IDialogProps);
    render(): JSX.Element;
    private _getSubTextId;
    private _getTitleTextId;
}

export declare const DialogContent: React_2.FunctionComponent<IDialogContentProps>;

export declare class DialogContentBase extends React_2.Component<IDialogContentProps, {}> {
    static defaultProps: IDialogContentProps;
    constructor(props: IDialogContentProps);
    render(): JSX.Element;
    private _groupChildren;
}

export declare const DialogFooter: React_2.FunctionComponent<IDialogFooterProps>;

export declare class DialogFooterBase extends React_2.Component<IDialogFooterProps, {}> {
    private _classNames;
    constructor(props: IDialogFooterProps);
    render(): JSX.Element;
    private _renderChildrenAsActions;
}

/**
 * {@docCategory Dialog}
 */
export declare enum DialogType {
    /** Standard dialog */
    normal = 0,
    /** Dialog with large header banner */
    largeHeader = 1,
    /** Dialog with an 'x' close button in the upper-right corner */
    close = 2
}

export declare const DirectionalHint: {
    /**
     * Appear above the target element, with the left edges of the callout and target aligning.
     */
    topLeftEdge: 0;
    /**
     * Appear above the target element, with the centers of the callout and target aligning.
     */
    topCenter: 1;
    /**
     * Appear above the target element, with the right edges of the callout and target aligning.
     */
    topRightEdge: 2;
    /**
     * Appear above the target element, aligning with the target element such that the callout tends toward
     * the center of the screen.
     */
    topAutoEdge: 3;
    /**
     * Appear below the target element, with the left edges of the callout and target aligning.
     */
    bottomLeftEdge: 4;
    /**
     * Appear below the target element, with the centers of the callout and target aligning.
     */
    bottomCenter: 5;
    /**
     * Appear below the target element, with the right edges of the callout and target aligning.
     */
    bottomRightEdge: 6;
    /**
     * Appear below the target element, aligning with the target element such that the callout tends toward
     * the center of the screen.
     */
    bottomAutoEdge: 7;
    /**
     * Appear to the left of the target element, with the top edges of the callout and target aligning.
     */
    leftTopEdge: 8;
    /**
     * Appear to the left of the target element, with the centers of the callout and target aligning.
     */
    leftCenter: 9;
    /**
     * Appear to the left of the target element, with the bottom edges of the callout and target aligning.
     */
    leftBottomEdge: 10;
    /**
     * Appear to the right of the target element, with the top edges of the callout and target aligning.
     */
    rightTopEdge: 11;
    /**
     * Appear to the right of the target element, with the centers of the callout and target aligning.
     */
    rightCenter: 12;
    /**
     * Appear to the right of the target element, with the bottom edges of the callout and target aligning.
     */
    rightBottomEdge: 13;
};

export declare type DirectionalHint = typeof DirectionalHint[keyof typeof DirectionalHint];

export declare const DocumentCard: React_2.FunctionComponent<IDocumentCardProps>;

export declare const DocumentCardActions: React_2.FunctionComponent<IDocumentCardActionsProps>;

/**
 * {@docCategory DocumentCard}
 */
declare class DocumentCardActionsBase extends React_2.Component<IDocumentCardActionsProps, any> {
    private _classNames;
    constructor(props: IDocumentCardActionsProps);
    render(): JSX.Element;
}

export declare const DocumentCardActivity: React_2.FunctionComponent<IDocumentCardActivityProps>;

/**
 * {@docCategory DocumentCard}
 */
declare class DocumentCardActivityBase extends React_2.Component<IDocumentCardActivityProps, any> {
    private _classNames;
    constructor(props: IDocumentCardActivityProps);
    render(): JSX.Element | null;
    private _renderAvatars;
    private _renderAvatar;
    private _getNameString;
}

export declare const DocumentCardDetails: React_2.FunctionComponent<IDocumentCardDetailsProps>;

/**
 * {@docCategory DocumentCard}
 */
declare class DocumentCardDetailsBase extends React_2.Component<IDocumentCardDetailsProps, any> {
    private _classNames;
    constructor(props: IDocumentCardDetailsProps);
    render(): JSX.Element;
}

export declare const DocumentCardImage: React_2.FunctionComponent<IDocumentCardImageProps>;

export declare const DocumentCardLocation: React_2.FunctionComponent<IDocumentCardLocationProps>;

/**
 * {@docCategory DocumentCard}
 */
declare class DocumentCardLocationBase extends React_2.Component<IDocumentCardLocationProps, any> {
    private _classNames;
    constructor(props: IDocumentCardLocationProps);
    render(): JSX.Element;
}

export declare const DocumentCardLogo: React_2.FunctionComponent<IDocumentCardLogoProps>;

/**
 * {@docCategory DocumentCard}
 */
declare class DocumentCardLogoBase extends React_2.Component<IDocumentCardLogoProps, any> {
    private _classNames;
    constructor(props: IDocumentCardLogoProps);
    render(): JSX.Element;
}

export declare const DocumentCardPreview: React_2.FunctionComponent<IDocumentCardPreviewProps>;

export declare const DocumentCardStatus: React_2.FunctionComponent<IDocumentCardStatusProps>;

/**
 * {@docCategory DocumentCard}
 */
declare class DocumentCardStatusBase extends React_2.Component<IDocumentCardStatusProps, any> {
    private _classNames;
    constructor(props: IDocumentCardStatusProps);
    render(): JSX.Element;
}

export declare const DocumentCardTitle: React_2.FunctionComponent<IDocumentCardTitleProps>;

/**
 * {@docCategory DocumentCard}
 */
declare class DocumentCardTitleBase extends React_2.Component<IDocumentCardTitleProps, IDocumentCardTitleState> {
    private _titleElement;
    private _classNames;
    private _async;
    private _events;
    private _clientWidth;
    private _timerId;
    constructor(props: IDocumentCardTitleProps);
    componentDidUpdate(prevProps: IDocumentCardTitleProps): void;
    componentDidMount(): void;
    componentWillUnmount(): void;
    render(): JSX.Element;
    /**
     * In measuring, it will render a same style text with whiteSpace: 'nowrap', to get overflow rate.
     * So that the logic can predict truncated text well.
     */
    private get _needMeasurement();
    private _truncateTitle;
    private _truncateWhenInAnimation;
    private _shrinkTitle;
    private _updateTruncation;
}

/**
 * {@docCategory DocumentCard}
 */
export declare enum DocumentCardType {
    /**
     * Standard DocumentCard.
     */
    normal = 0,
    /**
     * Compact layout. Displays the preview beside the details, rather than above.
     */
    compact = 1
}

export declare class DragDropHelper implements IDragDropHelper {
    private _dragEnterCounts;
    private _isDragging;
    private _dragData;
    private _selection;
    private _activeTargets;
    private _events;
    private _lastId;
    private _initialized;
    constructor(params: IDragDropHelperParams);
    dispose(): void;
    subscribe(root: HTMLElement, events: Eve