office-ui-fabric-react/dist/office-ui-fabric-react.d.ts

Reusable React components for building experiences for Microsoft 365.

import { CommunicationColors } from '@fluentui/theme';
import { ComponentsStyles } from '@fluentui/theme';
import { ComponentStyles } from '@fluentui/theme';
import { DateRangeType } from '@fluentui/date-time-utilities/lib/dateValues/dateValues';
import { DayOfWeek } from '@fluentui/date-time-utilities/lib/dateValues/dateValues';
import { DefaultSpacing } from '@fluentui/theme';
import { Depths } from '@fluentui/theme';
import { EventGroup } from '@uifabric/utilities';
import { FirstWeekOfYear } from '@fluentui/date-time-utilities/lib/dateValues/dateValues';
import { FluentTheme } from '@fluentui/theme';
import { IBaseProps } from '@uifabric/utilities';
import { IComponent } from '@uifabric/foundation';
import { IComponentAs } from '@uifabric/utilities';
import { IComponentStyles } from '@uifabric/foundation';
import { ICSSPixelUnitRule } from '@uifabric/merge-styles/lib/IRawStyleBase';
import { ICSSRule } from '@uifabric/merge-styles/lib/IRawStyleBase';
import { IFocusZone } from '@fluentui/react-focus';
import { IFocusZoneProps } from '@fluentui/react-focus';
import { IFontStyles } from '@uifabric/styling';
import { IHTMLSlot } from '@uifabric/foundation';
import { IObjectWithKey } from '@uifabric/utilities';
import { IPoint } from '@uifabric/utilities';
import { IProcessedStyleSet } from '@uifabric/styling';
import { IRawStyle } from '@uifabric/styling';
import { IRectangle } from '@uifabric/utilities';
import { IRefObject } from '@uifabric/utilities';
import { IRenderComponent } from '@uifabric/utilities';
import { IRenderFunction } from '@uifabric/utilities';
import { ISelection } from '@uifabric/utilities';
import { ISelectionOptions } from '@uifabric/utilities';
import { ISlotProp } from '@uifabric/foundation';
import { ISlottableProps } from '@uifabric/foundation';
import { IStyle } from '@uifabric/styling';
import { IStyleableComponentProps } from '@uifabric/foundation';
import { IStyleFunction } from '@uifabric/utilities';
import { IStyleFunctionOrObject } from '@uifabric/utilities';
import { ITheme } from '@uifabric/styling';
import { KeyCodes } from '@uifabric/utilities';
import { LocalizedFontFamilies } from '@fluentui/theme';
import { LocalizedFontNames } from '@fluentui/theme';
import { makeStyles } from '@fluentui/react-theme-provider';
import { mergeThemes } from '@fluentui/theme';
import { MotionAnimations } from '@fluentui/theme';
import { MotionDurations } from '@fluentui/theme';
import { MotionTimings } from '@fluentui/theme';
import { NeutralColors } from '@fluentui/theme';
import { Omit } from '@uifabric/utilities';
import { PartialTheme } from '@fluentui/theme';
import { Point } from '@uifabric/utilities';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { Rectangle } from '@uifabric/utilities';
import { Selection } from '@uifabric/utilities';
import { SELECTION_CHANGE } from '@uifabric/utilities';
import { SelectionDirection } from '@uifabric/utilities';
import { SelectionMode } from '@uifabric/utilities';
import { SharedColors } from '@fluentui/theme';
import { Target } from '@uifabric/react-hooks';
import { Theme } from '@fluentui/theme';
import { ThemeContext } from '@fluentui/react-theme-provider';
import { ThemeProvider } from '@fluentui/react-theme-provider';
import { ThemeProviderProps } from '@fluentui/react-theme-provider';
import { UseStylesOptions } from '@fluentui/react-theme-provider';
import { useTheme } from '@fluentui/react-theme-provider';

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

/**
 * {@docCategory ActivityItem}
 */
export declare class ActivityItem extends React.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';

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

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

/**
 * {@docCategory Autofill}
 */
export declare class Autofill extends React.Component<IAutofillProps, IAutofillState> implements IAutofill {
    static defaultProps: {
        enableAutofillOnKeyPress: number[];
    };
    private _inputElement;
    private _autoFillEnabled;
    private _value;
    private _isComposing;
    private _async;
    constructor(props: IAutofillProps);
    readonly cursorLocation: number | null;
    readonly isValueSelected: boolean;
    readonly value: string;
    readonly selectionStart: number | null;
    readonly selectionEnd: number | null;
    readonly inputElement: HTMLInputElement | null;
    UNSAFE_componentWillReceiveProps(nextProps: IAutofillProps): void;
    componentDidUpdate(): void;
    componentWillUnmount(): void;
    render(): JSX.Element;
    focus(): void;
    clear(): void;
    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;
    private _notifyInputChange;
    /**
     * Updates the current input value as well as getting a new display value.
     * @param newValue - The new value from the input
     */
    private _updateValue;
    /**
     * Returns a string that should be used as the display value.
     * It evaluates this based on whether or not the suggested value starts with the input value
     * and whether or not autofill is enabled.
     * @param inputValue - the value that the input currently has.
     * @param suggestedDisplayValue - the possible full value
     */
    private _getDisplayValue;
    private _doesTextStartWith;
}

/**
 *  @deprecated do not use.
 * {@docCategory Autofill}
 */
export declare class BaseAutoFill extends Autofill {
}

/**
 * {@docCategory Button}
 */
export declare class BaseButton extends React.Component<IBaseButtonProps, IBaseButtonState> implements IButton {
    private readonly _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 _getMenuProps;
    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.Component<P, IBaseExtendedPickerState<T>> implements IBaseExtendedPicker<T> {
    floatingPicker: React.RefObject<BaseFloatingPicker<T, IBaseFloatingPickerProps<T>>>;
    selectedItemsList: React.RefObject<BaseSelectedItemsList<T, IBaseSelectedItemsListProps<T>>>;
    protected root: React.RefObject<HTMLDivElement>;
    protected input: React.RefObject<Autofill>;
    protected selection: Selection;
    protected floatingPickerProps: IBaseFloatingPickerProps<T>;
    protected selectedItemsListProps: IBaseSelectedItemsListProps<T>;
    constructor(basePickerProps: P);
    readonly items: any;
    componentDidMount(): void;
    UNSAFE_componentWillReceiveProps(newProps: P): void;
    focus(): void;
    clearInput(): void;
    readonly inputElement: HTMLInputElement | null;
    readonly highlightedItems: T[];
    render(): JSX.Element;
    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.FocusEvent<HTMLInputElement | Autofill>) => void;
    protected onInputClick: (ev: React.MouseEvent<HTMLInputElement | Autofill, MouseEvent>) => void;
    protected onBackspace: (ev: React.KeyboardEvent<HTMLElement>) => void;
    protected onCopy: (ev: React.ClipboardEvent<HTMLElement>) => void;
    protected onPaste: (ev: React.ClipboardEvent<HTMLInputElement | Autofill>) => 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.Component<P, IBaseFloatingPickerState> implements IBaseFloatingPicker {
    protected selection: Selection;
    protected root: React.RefObject<HTMLDivElement>;
    protected suggestionStore: SuggestionsStore<T>;
    protected suggestionsControl: React.RefObject<SuggestionsControl<T>>;
    protected SuggestionsControlOfProperType: new (props: ISuggestionsControlProps<T>) => SuggestionsControl<T>;
    protected currentPromise: PromiseLike<T[]>;
    protected isComponentMounted: boolean;
    private _async;
    constructor(basePickerProps: P);
    readonly inputText: string;
    readonly suggestions: any[];
    forceResolveSuggestion(): void;
    readonly currentSelectedSuggestionIndex: number;
    readonly isSuggestionsShown: boolean;
    onQueryStringChanged: (queryString: string) => void;
    hidePicker: () => void;
    showPicker: (updateValue?: boolean) => void;
    componentDidMount(): void;
    componentDidUpdate(): void;
    componentWillUnmount(): void;
    UNSAFE_componentWillReceiveProps(newProps: IBaseFloatingPickerProps<T>): 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.MouseEvent<HTMLElement, MouseEvent>, item: T, index: number) => void;
    protected onSuggestionRemove: (ev: React.MouseEvent<HTMLElement, MouseEvent>, 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.Component<P, IBasePickerState> implements IBasePicker<T> {
    protected root: React.RefObject<HTMLDivElement>;
    protected input: React.RefObject<IAutofill>;
    protected focusZone: React.RefObject<IFocusZone>;
    protected suggestionElement: React.RefObject<ISuggestions<T>>;
    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;
    static getDerivedStateFromProps(newProps: IBasePickerProps<any>): {
        items: any[];
    } | null;
    constructor(basePickerProps: P);
    readonly 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: number) => 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.MouseEvent<HTMLElement, MouseEvent>, item: any, index: number) => void;
    protected onSuggestionRemove: (ev: React.MouseEvent<HTMLElement, MouseEvent>, 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;
    /**
     * Reveals suggestions any time the user clicks on the input element
     * without shifting focus.
     */
    protected onClick: (ev: React.MouseEvent<HTMLInputElement, MouseEvent>) => 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: IPickerItemProps<T>, focusNextItem?: boolean | undefined) => void;
    protected removeItems: (itemsToRemove: any[]) => void;
    protected onBackspace(ev: React.KeyboardEvent<HTMLElement>): void;
    protected _shouldFocusZoneEnterInnerZone: (ev: React.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.KeyboardEvent<HTMLElement>): void;
}

export declare class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>> extends React.Component<P, IBaseSelectedItemsListState<T>> implements IBaseSelectedItemsList<T> {
    protected root: HTMLElement;
    protected selection: Selection;
    constructor(basePickerProps: P);
    readonly 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.ClipboardEvent<HTMLElement>) => void;
    hasSelectedItems(): boolean;
    unselectAll(): void;
    highlightedItems(): T[];
    UNSAFE_componentWillUpdate(newProps: P, newState: IBaseSelectedItemsListState): void;
    componentDidMount(): void;
    UNSAFE_componentWillReceiveProps(newProps: P): void;
    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.FunctionComponent<IBreadcrumbProps>;

/**
 * {@docCategory Breadcrumb}
 */
export declare class BreadcrumbBase extends React.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.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.Component<IButtonProps, {}> {
    constructor(props: IButtonProps);
    render(): JSX.Element;
}

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

export declare class ButtonGridCell<T, P extends IButtonGridCellProps<T>> extends React.Component<P, {}> {
    static defaultProps: {
        disabled: boolean;
    };
    render(): JSX.Element;
    private _onClick;
    private _onMouseEnter;
    private _onMouseMove;
    private _onMouseLeave;
    private _onFocus;
}

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

export declare class Calendar extends React.Component<ICalendarProps, ICalendarState> implements ICalendar {
    static defaultProps: ICalendarProps;
    private _dayPicker;
    private _monthPicker;
    private _hasFocus;
    private _focusOnUpdate;
    constructor(props: ICalendarProps);
    UNSAFE_componentWillReceiveProps(nextProps: ICalendarProps): void;
    componentDidUpdate(): void;
    render(): JSX.Element;
    focus(): void;
    private _onBlur;
    private _onFocus;
    private _navigateDayPickerDay;
    private _navigateMonthPickerDay;
    private _onNavigateDayDate;
    private _onNavigateMonthDate;
    private _onSelectDate;
    private _onHeaderSelect;
    private _onGotoToday;
    private _onGotoTodayClick;
    private _onGotoTodayKeyDown;
    private _onDatePickerPopupKeyDown;
    private _handleEscKey;
}

export declare class Callout extends React.Component<ICalloutProps, ICalloutState> {
    render(): JSX.Element;
}

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

export declare class CalloutContentBase extends React.Component<ICalloutProps, ICalloutState> {
    static defaultProps: {
        preventDismissOnLostFocus: boolean;
        preventDismissOnScroll: boolean;
        preventDismissOnResize: boolean;
        isBeakVisible: boolean;
        beakWidth: number;
        gapSpace: number;
        minPagePadding: number;
        directionalHint: 7;
    };
    private _classNames;
    private _didSetInitialFocus;
    private _hostElement;
    private _calloutElement;
    private _targetWindow;
    private _bounds;
    private _positionAttempts;
    private _target;
    private _setHeightOffsetTimer;
    private _hasListeners;
    private _maxHeight;
    private _blockResetHeight;
    private _isMouseDownOnPopup;
    private _async;
    private _disposables;
    constructor(props: ICalloutProps);
    componentDidUpdate(): void;
    shouldComponentUpdate(newProps: ICalloutProps, newState: ICalloutState): boolean;
    UNSAFE_componentWillMount(): void;
    componentWillUnmount(): void;
    UNSAFE_componentWillUpdate(newProps: ICalloutProps): void;
    componentDidMount(): void;
    render(): JSX.Element | null;
    dismiss: (ev?: Event | React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined) => void;
    protected _dismissOnScroll: (ev: Event) => void;
    protected _dismissOnResize: (ev: Event) => void;
    protected _dismissOnLostFocus: (ev: Event) => void;
    protected _setInitialFocus: () => void;
    protected _onComponentDidMount: () => void;
    private _dismissOnClickOrScroll;
    private _dismissOnTargetWindowBlur;
    private _addListeners;
    private _removeListeners;
    private _updateAsyncPosition;
    private _getBeakPosition;
    private _updatePosition;
    private _getBounds;
    private _getMaxHeight;
    private _arePositionsEqual;
    private _comparePositions;
    private _setTargetWindowAndElement;
    private _setHeightOffsetEveryFrame;
    private _didPositionPropsChange;
    private _getTarget;
    private _mouseDownOnPopup;
    private _mouseUpOnPopup;
}

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

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

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

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

export declare class CheckboxBase extends React.Component<ICheckboxProps, ICheckboxState> implements ICheckbox {
    static defaultProps: ICheckboxProps;
    private _checkBox;
    private _id;
    private _classNames;
    static getDerivedStateFromProps(nextProps: Readonly<ICheckboxProps>, prevState: Readonly<ICheckboxState>): ICheckboxState | null;
    /**
     * Initialize a new instance of the Checkbox
     * @param props - Props for the component
     * @param context - Context or initial state for the base component.
     */
    constructor(props: ICheckboxProps, context?: any);
    /**
     * Render the Checkbox based on passed props
     */
    render(): JSX.Element;
    readonly indeterminate: boolean;
    readonly checked: boolean;
    focus(): void;
    private _renderContent;
    private _onFocus;
    private _onBlur;
    private _onChange;
    private _onRenderLabel;
}

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

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

/**
 * {@docCategory ChoiceGroup}
 */
export declare class ChoiceGroupBase extends React.Component<IChoiceGroupProps, IChoiceGroupState> implements IChoiceGroup {
    private _id;
    private _labelId;
    private _focusCallbacks;
    private _changeCallbacks;
    constructor(props: IChoiceGroupProps);
    /**
     * Gets the current checked option.
     */
    readonly checkedOption: IChoiceGroupOption | undefined;
    componentDidUpdate(prevProps: IChoiceGroupProps, prevState: IChoiceGroupState): void;
    render(): JSX.Element;
    focus(): void;
    private _onFocus;
    private _onBlur;
    private _onChange;
    /**
     * Returns `selectedKey` if provided, or the key of the first option with the `checked` prop set.
     */
    private _getKeyChecked;
    private _getOptionId;
    private _getOptionLabelId;
}

export declare const ChoiceGroupOption: React.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.FunctionComponent<ICoachmarkProps>;

export declare const COACHMARK_ATTRIBUTE_NAME = "data-coachmarkid";

export declare class CoachmarkBase extends React.Component<ICoachmarkProps, ICoachmarkState> implements ICoachmark {
    static defaultProps: Partial<ICoachmarkProps>;
    private _async;
    private _events;
    /**
     * The cached HTMLElement reference to the Entity Inner Host
     * element.
     */
    private _entityHost;
    private _entityInnerHostElement;
    private _translateAnimationContainer;
    private _ariaAlertContainer;
    private _childrenContainer;
    private _positioningContainer;
    /**
     * The target element the mouse would be in
     * proximity to
     */
    private _targetElementRect;
    constructor(props: ICoachmarkProps);
    private readonly _beakDirection;
    render(): JSX.Element;
    UNSAFE_componentWillReceiveProps(newProps: ICoachmarkProps): void;
    shouldComponentUpdate(newProps: ICoachmarkProps, newState: ICoachmarkState): boolean;
    componentDidUpdate(prevProps: ICoachmarkProps, prevState: ICoachmarkState): void;
    componentDidMount(): void;
    componentWillUnmount(): void;
    dismiss: (ev?: Event | React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined) => void;
    private _addListeners;
    private _dismissOnLostFocus;
    private _onKeyDown;
    private _onFocusHandler;
    private _onPositioned;
    private _getBounds;
    private _setBeakPosition;
    private _openCoachmark;
    private _addProximityHandler;
    private _setTargetElementRect;
    private _isInsideElement;
}

/**
 * {@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.FunctionComponent<IColorPickerProps>;

/**
 * {@docCategory ColorPicker}
 */
export declare class ColorPickerBase extends React.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);
    readonly 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.FunctionComponent<IColorPickerGridCellProps>;

export declare class ColorPickerGridCellBase extends React.PureComponent<IColorPickerGridCellProps, {}> {
    static defaultProps: Partial<IColorPickerGridCellProps>;
    private _classNames;
    render(): JSX.Element;
    /**
     * Render the core of a color cell
     * @returns - Element representing the core of the item
     */
    private _onRenderColorOption;
    /**
     * Validate if the cell's color is white or not to apply whiteCell style
     * @param inputColor - The color of the current cell
     * @returns - Whether the cell's color is white or not.
     */
    private _isWhiteCell;
}

/**
 * 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 class ComboBox extends React.Component<IComboBoxProps, IComboBoxState> {
    static defaultProps: IComboBoxProps;
    private _root;
    /** The input aspect of the comboBox */
    private _autofill;
    /** The wrapping div of the input and button */
    private _comboBoxWrapper;
    /** The callout element */
    private _comboBoxMenu;
    /** The menu item element that is currently selected */
    private _selectedElement;
    /** The base id for the ComboBox */
    private _id;
    /**
     * After a character is inserted when autocomplete is true and allowFreeform is false,
     * remember the task that will clear the pending string of characters.
     */
    private _lastReadOnlyAutoCompleteChangeTimeoutId;
    /** Promise used when resolving the comboBox options */
    private _currentPromise;
    /** The current visible value sent to the auto fill on render */
    private _currentVisibleValue;
    private _classNames;
    private _isScrollIdle;
    private _hasPendingValue;
    private _scrollIdleTimeoutId;
    private _processingTouch;
    private _lastTouchTimeoutId;
    /** True if the most recent keydown event was for alt (option) or meta (command). */
    private _lastKeyDownWasAltOrMeta;
    /**
     * Determines if we should be setting focus back to the input when the menu closes.
     * The general rule of thumb is if the menu was launched via the keyboard focus should go back
     * to the input, if it was dropped via the mouse focus should not be forced back to the input.
     */
    private _focusInputAfterClose;
    /** Flag for when we get the first mouseMove */
    private _gotMouseMove;
    private _processingClearPendingInfo;
    private _async;
    private _events;
    constructor(props: IComboBoxProps);
    /**
     * All selected options
     */
    readonly selectedOptions: IComboBoxOption[];
    componentDidMount(): void;
    UNSAFE_componentWillReceiveProps(newProps: IComboBoxProps): void;
    componentDidUpdate(prevProps: IComboBoxProps, prevState: IComboBoxState): void;
    componentWillUnmount(): void;
    render(): JSX.Element;
    /**
     * {@inheritdoc}
     */
    focus: (shouldOpenOnFocus?: boolean | undefined, useFocusAsync?: boolean | undefined) => void;
    /**
     * Close menu callout if it is open
     */
    dismissMenu: () => void;
    /**
     * componentWillReceiveProps handler for the auto fill component
     * Checks/updates the iput value to set, if needed
     * @param defaultVisibleValue - the defaultVisibleValue that got passed
     *  in to the auto fill's componentWillReceiveProps
     * @returns - the updated value to set, if needed
     */
    private _onUpdateValueInAutofillWillReceiveProps;
    private _renderComboBoxWrapper;
    /**
     * componentDidUpdate handler for the auto fill component
     *
     * @param defaultVisibleValue - the current defaultVisibleValue in the auto fill's componentDidUpdate
     * @param suggestedDisplayValue - the current suggestedDisplayValue in the auto fill's componentDidUpdate
     * @returns - should the full value of the input be selected?
     * True if the defaultVisibleValue equals the suggestedDisplayValue, false otherwise
     */
    private _onShouldSelectFullInputValueInAutofillComponentDidUpdate;
    /**
     * Get the correct value to pass to the input
     * to show to the user based off of the current props and state
     * @returns the value to pass to the input
     */
    private _getVisibleValue;
    private _getPendingString;
    /**
     * Returns a string that concatenates all of the selected values
     * for multiselect combobox.
     */
    private _getMultiselectDisplayString;
    /**
     * Is the index within the bounds of the array?
     * @param options - options to check if the index is valid for
     * @param index - the index to check
     * @returns - true if the index is valid for the given options, false otherwise
     */
    private _indexWithinBounds;
    /**
     * Handler for typing changes on the input
     * @param updatedValue - the newly changed value
     */
    private _onInputChange;
    /**
     * Process the new input's new value when the comboBox
     * allows freeform entry
     * @param updatedValue - the input's newly changed value
     */
    private _processInputChangeWithFreeform;
    /**
     * Process the new input's new value when the comboBox
     * does not allow freeform entry
     * @param updatedValue - the input's newly changed value
     */
    private _processInputChangeWithoutFreeform;
    private _getFirstSelectedIndex;
    /**
     * Walk along the options starting at the index, stepping by the delta (positive or negative)
     * looking for the next valid selectable index (e.g. skipping headings and dividers)
     * @param index - the index to get the next selectable index from
     * @param delta - optional delta to step by when finding the next index, defaults to 0
     * @returns - the next valid selectable index. If the new index is outside of the bounds,
     * it will snap to the edge of the options array. If delta == 0 and the given index is not selectable
     */
    private _getNextSelectableIndex;
    /**
     * Set the selected index. Note, this is
     * the "real" selected index, not the pending selected index
     * @param index - the index to set (or the index to set from if a search direction is provided)
     * @param searchDirection - the direction to search along the options from the given index
     */
    private _setSelectedIndex;
    /**
     * Focus (and select) the content of the input
     * and set the focused state
     */
    private _onFocus;
    /**
     * Callback issued when the options should be resolved, if they have been updated or
     * if they need to be passed in the first time. This only does work if an onResolveOptions
     * callback was passed in
     */
    private _onResolveOptions;
    /**
     * OnBlur handler. Set the focused state to false
     * and submit any pending value
     */
    private _onBlur;
    /**
     * Submit a pending value if there is one
     */
    private _submitPendingValue;
    private _onRenderContainer;
    private _onCalloutLayerMounted;
    private _onLayerMounted;
    private _onRenderLabel;
    private _onRenderList;
    private _onRenderItem;
    private _onRenderLowerContent;
    private _onRenderUpperContent;
    private _renderSeparator;
    private _renderHeader;
    private _renderOption;
    /**
     * If we are coming from a mouseOut:
     * there is no visible selected option.
     *
     * Else if We are hovering over an item:
     * that gets the selected look.
     *
     * Else:
     * Use the current valid pending index if it exists OR
     * we do not have a valid index and we currently have a pending input value,
     * otherwise use the selected index
     * */
    private _isOptionSelected;
    private _isOptionChecked;
    /**
     * Gets the pending selected index taking into account hover, valueValidIndex, and selectedIndex
     * @param includeCurrentPendingValue - Should we include the currentPendingValue when
     * finding the index
     */
    private _getPendingSelectedIndex;
    /**
     * Mouse clicks to headers, dividers and scrollbar should not make input lose focus
     */
    private _onCalloutMouseDown;
    /**
     * Scroll handler for the callout to make sure the mouse events
     * for updating focus are not interacting during scroll
     */
    private _onScroll;
    /**
     * Scroll the selected element into view
     */
    private _scrollIntoView;
    private _onRenderOptionContent;
    /**
     * Click handler for the menu items
     * to select the item and also close the menu
     * @param index - the index of the item that was clicked
     */
    private _onItemClick;
    /**
     * Handles dismissing (cancelling) the menu
     */
    private _onDismiss;
    /**
     * Get the indices of the options that are marked as selected
     * @param options - the comboBox options
     * @param selectedKeys - the known selected keys to find
     * @returns - an array of the indices of the selected options, empty array if nothing is selected
     */
    private _getSelectedIndices;
    /**
     * Reset the selected index by clearing the
     * input (of any pending text), clearing the pending state,
     * and setting the suggested display value to the last
     * selected state text
     */
    private _resetSelectedIndex;
    /**
     * Clears the pending info state
     */
    private _clearPendingInfo;
    private _onAfterClearPendingInfo;
    /**
     * Set the pending info
     * @param currentPendingValue - new pending value to set
     * @param currentPendingValueValidIndex - new pending value index to set
     * @param suggestedDisplayValue - new suggest display value to set
     */
    private _setPendingInfo;
    /**
     * Set the pending info from the given index
     * @param index - the index to set the pending info from
     */
    private _setPendingInfoFromIndex;
    /**
     * Sets the pending info for the comboBox
     * @param index - the index to search from
     * @param searchDirection - the direction to search
     */
    private _setPendingInfoFromIndexAndDirection;
    private _notifyPendingValueChanged;
    /**
     * Sets the isOpen state and updates focusInputAfterClose
     */
    private _setOpenStateAndFocusOnClose;
    /**
     * Handle keydown on the input
     * @param ev - The keyboard event that was fired
     */
    private _onInputKeyDown;
    /**
     * Returns true if the key for the event is alt (Mac option) or meta (Mac command).
     */
    private _isAltOrMeta;
    /**
     * Handle keyup on the input
     * @param ev - the keyboard event that was fired
     */
    private _onInputKeyUp;
    private _onOptionMouseEnter;
    private _onOptionMouseMove;
    private _onOptionMouseLeave;
    private _shouldIgnoreMouseEvent;
    /**
     * Handle dismissing the menu and
     * eating the required key event when disabled
     * @param ev - the keyboard event that was fired
     */
    private _handleInputWhenDisabled;
    /**
     * Click handler for the button of the comboBox
     * and the input when not allowing freeform. This
     * toggles the expand/collapse state of the comboBox (if enbled)
     */
    private _onComboBoxClick;
    /**
     * Click handler for the autofill.
     */
    private _onAutofillClick;
    private _onTouchStart;
    private _onPointerDown;
    private _handleTouchAndPointerEvent;
    /**
     * Get the styles for the current option.
     * @param item - Item props for the current option
     */
    private _getCaretButtonStyles;
    /**
     * Get the styles for the current option.
     * @param item - Item props for the current option
     */
    private _getCurrentOptionStyles;
    /**
     * Get the aria-activedescendant value for the comboxbox.
     * @returns the id of the current focused combo item, otherwise the id of the currently selected element,
     * null otherwise
     */
    private _getAriaActiveDescendantValue;
    /**
     * Get the aria autocomplete value for the Combobox
     * @returns 'inline' if auto-complete automatically dynamic, 'both' if we have a list of possible values to pick from
     * and can dynamically populate input, and 'none' if auto-complete is not enabled as we can't give user inputs.
     */
    private _getAriaAutoCompleteValue;
    private _isPendingOption;
    /**
     * Given default selected key(s) and selected key(s), return the selected keys(s).
     * When default selected key(s) are available, they take precedence and return them instead of selected key(s).
     *
     * @returns No matter what specific types the input parameters are, always return an array of
     *  either strings or numbers instead of premitive type.  This normlization makes caller's logic easier.
     */
    private _buildDefaultSelectedKeys;
    private _buildSelectedKeys;
    private _getPreviewText;
    private _normalizeToString;
    /**
     * Returns true if the component has some kind of focus. If it's either focusing or if it's focused
     */
    private _hasFocus;
}

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

export declare class CommandBarBase extends React.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.Component<IButtonProps, {}> {
    render(): JSX.Element;
}

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

export declare const CompactPeoplePicker: React.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;
    };
}
export { ComponentsStyles }
export { ComponentStyles }

/**
 * {@docCategory Button}
 */
export declare class CompoundButton extends React.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.FunctionComponent<IContextualMenuProps>;

export declare class ContextualMenuBase extends React.Component<IContextualMenuProps, IContextualMenuState> {
    static defaultProps: IContextualMenuProps;
    private _async;
    private _events;
    private _id;
    private _host;
    private _previousActiveElement;
    private _enterTimerId;
    private _targetWindow;
    private _target;
    private _isScrollIdle;
    private _scrollIdleTimeoutId;
    /** True if the most recent keydown event was for alt (option) or meta (command). */
    private _lastKeyDownWasAltOrMeta;
    private _shouldUpdateFocusOnMouseEvent;
    private _gotMouseMove;
    private _mounted;
    private _focusingPreviousElement;
    private _adjustedFocusZoneProps;
    private _classNames;
    constructor(props: IContextualMenuProps);
    dismiss: (ev?: any, dismissAll?: boolean | undefined) => void;
    shouldComponentUpdate(newProps: IContextualMenuProps, newState: IContextualMenuState): boolean;
    UNSAFE_componentWillUpdate(newProps: IContextualMenuProps): void;
    UNSAFE_componentWillMount(): void;
    componentDidMount(): void;
    componentWillUnmount(): vo