import { BaseSlots } from '@fluentui/react-compose';
import { ComposePreparedOptions } from '@fluentui/react-compose';
import { IBaseFloatingPickerProps } from 'office-ui-fabric-react/lib/FloatingPicker';
import { IBaseProps } from 'office-ui-fabric-react/lib/Utilities';
import { IButtonProps } from '@fluentui/react-next/lib/compat/Button';
import { IButtonProps as IButtonProps_2 } from 'office-ui-fabric-react/lib/components/Button/Button.types';
import { IButtonStyles } from '@fluentui/react-next/lib/compat/Button';
import { ICalloutPositionedInfo } from 'office-ui-fabric-react/lib/utilities/positioning';
import { IComponentAs } from 'office-ui-fabric-react/lib/Utilities';
import { IContextualMenuProps } from 'office-ui-fabric-react/lib/ContextualMenu';
import { IFocusZoneProps } from '@fluentui/react-focus';
import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
import { IKeytipProps } from 'office-ui-fabric-react/lib/Keytip';
import { ILayerProps } from 'office-ui-fabric-react/lib/Layer';
import { IObjectWithKey } from 'office-ui-fabric-react/lib/Utilities';
import { IOverlayProps } from 'office-ui-fabric-react/lib/Overlay';
import { IPickerItemProps } from 'office-ui-fabric-react/lib/Pickers';
import { IPositionedData } from 'office-ui-fabric-react/lib/utilities/positioning';
import { IRectangle } from 'office-ui-fabric-react/lib/Utilities';
import { IRefObject } from 'office-ui-fabric-react/lib/Utilities';
import { IRenderFunction } from 'office-ui-fabric-react/lib/Utilities';
import { IStyle } from 'office-ui-fabric-react/lib/Styling';
import { IStyleFunctionOrObject } from 'office-ui-fabric-react/lib/Utilities';
import { IStyleSet } from 'office-ui-fabric-react/lib/Styling';
import { ISuggestionModel } from 'office-ui-fabric-react/lib/Pickers';
import { ISvgIconProps } from '@fluentui/react-icons';
import { ITeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';
import { ITheme } from 'office-ui-fabric-react/lib/Styling';
import { IWithResponsiveModeState } from 'office-ui-fabric-react/lib/utilities/decorators/withResponsiveMode';
import { Point } from 'office-ui-fabric-react/lib/Utilities';
import { Position } from 'office-ui-fabric-react/lib/utilities/positioning';
import * as React from 'react';
import { ReactNode } from 'react';
import { Selection } from 'office-ui-fabric-react/lib/Selection';
import { SlotProp } from '@fluentui/react-compose';
import { SlotProps } from '@fluentui/react-compose';
import { ValidationState } from 'office-ui-fabric-react/lib/Pickers';

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

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<IObjectWithKey>): 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 const Callout: React.ForwardRefExoticComponent<ICalloutProps & React.RefAttributes<HTMLDivElement>>;

export declare const Checkbox: import("@fluentui/react-compose").ComponentWithAs<"div", ICheckboxProps>;

export declare const CheckboxBase: import("@fluentui/react-compose").ComponentWithAs<"div", ICheckboxProps>;

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

export declare const COACHMARK_ATTRIBUTE_NAME = "data-coachmarkid";

export declare const CoachmarkBase: React.ForwardRefExoticComponent<ICoachmarkProps & React.RefAttributes<HTMLDivElement>>;

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;
}

export declare const DEFAULT_MASK_CHAR = "_";

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;
};

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

export declare class ExtendedSelectedItem extends React.Component<ISelectedPeopleItemProps, IPeoplePickerItemState> {
    protected persona: React.RefObject<HTMLDivElement>;
    constructor(props: ISelectedPeopleItemProps);
    render(): JSX.Element;
    private _onClickIconButton;
}

export declare const Fabric: React.FunctionComponent<IFabricProps>;

export declare const FabricBase: React.ForwardRefExoticComponent<IFabricProps & React.RefAttributes<HTMLDivElement>>;

/**
 * A special Callout that uses FocusTrapZone to trap focus
 * @param props - Props for the component
 */
export declare const FocusTrapCallout: React.FunctionComponent<IFocusTrapCalloutProps>;

export declare class FocusTrapZone extends React.Component<IFocusTrapZoneProps, {}> implements IFocusTrapZone {
    private static _focusStack;
    private _root;
    private _firstBumper;
    private _lastBumper;
    private _hasFocus;
    private _previouslyFocusedElementOutsideTrapZone;
    private _previouslyFocusedElementInTrapZone?;
    private _disposeFocusHandler;
    private _disposeClickHandler;
    constructor(props: IFocusTrapZoneProps);
    componentDidMount(): void;
    UNSAFE_componentWillReceiveProps(nextProps: IFocusTrapZoneProps): void;
    componentDidUpdate(prevProps: IFocusTrapZoneProps): void;
    componentWillUnmount(): void;
    render(): JSX.Element;
    focus(): void;
    private _focusAsync;
    private _onRootFocus;
    private _onRootBlur;
    private _onFirstBumperFocus;
    private _onLastBumperFocus;
    private _onBumperFocus;
    private _bringFocusIntoZone;
    private _returnFocusToInitiator;
    private _updateEventHandlers;
    private _onFocusCapture;
    private _isBumper;
    private _forceFocusInTrap;
    private _forceClickInTrap;
    private _getDocument;
}

/**
 * Returns a simple object is able to store measurements with a given key.
 */
export declare const getMeasurementCache: () => {
    /**
     * Checks if the provided data has a cacheKey. If it has a cacheKey and there is a
     * corresponding entry in the measurementsCache, then it will return that value.
     * Returns undefined otherwise.
     */
    getCachedMeasurement: (data: any) => number | undefined;
    /**
     * Should be called whenever there is a new measurement associated with a given data object.
     * If the data has a cacheKey, store that measurement in the measurementsCache.
     */
    addMeasurementToCache: (data: any, measurement: number) => void;
};

/**
 * Returns a function that is able to compute the next state for the ResizeGroup given the current
 * state and any measurement updates.
 */
export declare const getNextResizeGroupStateProvider: (measurementCache?: {
    /**
     * Checks if the provided data has a cacheKey. If it has a cacheKey and there is a
     * corresponding entry in the measurementsCache, then it will return that value.
     * Returns undefined otherwise.
     */
    getCachedMeasurement: (data: any) => number | undefined;
    /**
     * Should be called whenever there is a new measurement associated with a given data object.
     * If the data has a cacheKey, store that measurement in the measurementsCache.
     */
    addMeasurementToCache: (data: any, measurement: number) => void;
}) => {
    getNextState: (props: IResizeGroupProps, currentState: IResizeGroupState, getElementToMeasureDimension: () => number, newContainerDimension?: number | undefined) => IResizeGroupState | undefined;
    shouldRenderDataForMeasurement: (dataToMeasure: any) => boolean;
    getInitialResizeGroupState: (data: any) => IResizeGroupState;
};

/**
 * Gets the hex color string (prefixed with #) for the given persona props.
 * This is the logic used internally by the Persona control.
 * @param props - Current persona props
 * @returns Hex color string prefixed with #
 */
export declare function getPersonaInitialsColor(props: Pick<IPersonaProps, 'primaryText' | 'text' | 'initialsColor'>): string;

/**
 * {@docCategory IAccessiblePopupProps}
 */
export declare interface IAccessiblePopupProps {
    /**
     * Sets the element to focus on when exiting the control's FocusTrapZone.
     * @defaultvalue The `element.target` that triggered the control opening.
     */
    elementToFocusOnDismiss?: HTMLElement;
    /**
     * If false (the default), the control's FocusTrapZone will restore focus to the element which
     * activated it once the trap zone is unmounted or disabled. Set to true to disable this behavior.
     * @defaultvalue false
     */
    ignoreExternalFocusing?: boolean;
    /**
     * Whether control should force focus inside its focus trap zone.
     * @defaultvalue true
     */
    forceFocusInsideTrap?: boolean;
    /**
     * Class name (not actual selector) for first focusable item. Do not append a dot.
     */
    firstFocusableSelector?: string | (() => string);
    /**
     * Aria label on close button.
     */
    closeButtonAriaLabel?: string;
    /**
     * Whether this control will allow clicks outside its FocusTrapZone.
     * @defaultvalue false
     */
    isClickableOutsideFocusTrap?: boolean;
}

export declare interface IBaseSelectedItemsList<T> {
    /** Gets the current value of the input. */
    items: T[] | undefined;
    addItems: (items: T[]) => void;
}

export declare interface IBaseSelectedItemsListProps<T> extends React.ClassAttributes<any> {
    componentRef?: IRefObject<IBaseSelectedItemsList<T>>;
    /**
     * The selection
     */
    selection?: Selection;
    /**
     * A callback for when items are copied
     */
    onCopyItems?: (items: T[]) => string;
    /**
     * Function that specifies how the selected item will appear.
     */
    onRenderItem?: (props: ISelectedItemProps<T>) => JSX.Element;
    /**
     * Initial items that have already been selected and should appear in the people picker.
     */
    defaultSelectedItems?: T[];
    /**
     * A callback for when the selected list of items changes.
     */
    onChange?: (items?: T[]) => void;
    /**
     * Function that specifies how arbitrary text entered into the well is handled.
     */
    createGenericItem?: (input: string, ValidationState: ValidationState) => ISuggestionModel<T>;
    /**
     * A callback to process a selection after the user selects something from the picker.
     */
    onItemSelected?: (selectedItem?: T | T[]) => T | PromiseLike<T> | T[] | PromiseLike<T[]>;
    /**
     * The items that the base picker should currently display as selected.
     * If this is provided then the picker will act as a controlled component.
     */
    selectedItems?: T[];
    /**
     * Aria label for the 'X' button in the selected item component.
     * @defaultvalue ''
     */
    removeButtonAriaLabel?: string;
    /**
     * A callback when an item is deleted
     * @deprecated Use `onItemsDeleted` instead.
     */
    onItemDeleted?: (deletedItem: T) => void;
    /**
     * A callback when and item or items are deleted
     */
    onItemsDeleted?: (deletedItems: T[]) => void;
    /**
     * A callback on whether this item can be deleted
     */
    canRemoveItem?: (item: T) => boolean;
}

export declare interface IBaseSelectedItemsListState<T> {
    items: T[];
}

/**
 * {@docCategory Callout}
 */
export declare interface ICalloutContentStyleProps {
    /**
     * Theme to apply to the calloutContent.
     */
    theme: ITheme;
    /**
     * Width for callout including borders.
     */
    calloutWidth?: number;
    /**
     * CSS class to apply to the callout.
     */
    className?: string;
    /**
     * Callout positioning data
     */
    positions?: ICalloutPositionedInfo;
    /**
     * Whether or not to clip content of the callout,
     * if it overflows vertically.
     */
    overflowYHidden?: boolean;
    /**
     * Background color for the beak and callout.
     */
    backgroundColor?: string;
    /**
     * Width of Callout beak
     */
    beakWidth?: number;
    /**
     * Max width for callout including borders.
     */
    calloutMaxWidth?: number;
}

/**
 * {@docCategory Callout}
 */
export declare interface ICalloutContentStyles {
    /**
     * Style for wrapper of Callout component.
     */
    container: IStyle;
    /**
     * Style for callout container root element.
     */
    root: IStyle;
    /**
     * Style for callout beak.
     */
    beak: IStyle;
    /**
     * Style for callout beak curtain.
     */
    beakCurtain: IStyle;
    /**
     * Style for content component of the callout.
     */
    calloutMain: IStyle;
}

/**
 * {@docCategory Callout}
 */
export declare interface ICalloutProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * The target that the Callout should try to position itself based on.
     * It can be either an Element a querySelector string of a valid Element
     * or a MouseEvent. If MouseEvent is given then the origin point of the event will be used.
     */
    target?: Target;
    /**
     * How the element should be positioned
     * @defaultvalue DirectionalHint.BottomAutoEdge
     */
    directionalHint?: DirectionalHint;
    /**
     * How the element should be positioned in RTL layouts.
     * If not specified, a mirror of the `directionalHint` alignment edge will be used instead.
     * This means that `DirectionalHint.BottomLeft` will change to `DirectionalHint.BottomRight` but
     * `DirectionalHint.LeftAuto` will not change.
     */
    directionalHintForRTL?: DirectionalHint;
    /**
     * The gap between the Callout and the target
     * @defaultvalue 0
     */
    gapSpace?: number;
    /**
     * The width of the beak.
     * @defaultvalue 16
     */
    beakWidth?: number;
    /**
     * Custom width for callout including borders. If value is 0, no width is applied.
     * @defaultvalue 0
     */
    calloutWidth?: number;
    /**
     * Custom width for callout including borders. If value is 0, no width is applied.
     * @defaultvalue 0
     */
    calloutMaxWidth?: number;
    /**
     * The background color of the Callout in hex format ie. #ffffff.
     * @defaultvalue $ms-color-white
     */
    backgroundColor?: string;
    /**
     * The bounding rectangle (or callback that returns a rectangle) for which  the contextual menu can appear in.
     */
    bounds?: IRectangle | ((target?: Target, targetWindow?: Window) => IRectangle | undefined);
    /**
     * The minimum distance the callout will be away from the edge of the screen.
     *  @defaultvalue 8
     */
    minPagePadding?: number;
    /**
     * If true then the beak is visible. If false it will not be shown.
     * @defaultvalue true
     */
    isBeakVisible?: boolean;
    /**
     * If true then the callout will not dismiss on scroll
     * @defaultvalue false
     */
    preventDismissOnScroll?: boolean;
    /**
     * If true then the callout will not dismiss on resize
     * @defaultvalue false
     */
    preventDismissOnResize?: boolean;
    /**
     * If true then the callout will not dismiss when it loses focus
     * @defaultvalue false
     */
    preventDismissOnLostFocus?: boolean;
    /**
     * If true the position returned will have the menu element cover the target.
     * If false then it will position next to the target;
     * @defaultvalue false
     */
    coverTarget?: boolean;
    /**
     * If true the positioning logic will prefer to flip edges rather than to nudge the rectangle to fit within bounds,
     * thus making sure the element aligns perfectly with target's alignment edge
     */
    alignTargetEdge?: boolean;
    /**
     * Aria role assigned to the callout (Eg. dialog, alertdialog).
     */
    role?: string;
    /**
     * Accessible label text for callout.
     */
    ariaLabel?: string;
    /**
     *  Defines the element id referencing the element containing label text for callout.
     */
    ariaLabelledBy?: string;
    /**
     * Defines the element id referencing the element containing the description for the callout.
     */
    ariaDescribedBy?: string;
    /**
     * CSS class to apply to the callout.
     * @defaultvalue null
     */
    className?: string;
    /**
     * CSS style to apply to the callout.
     *
     * If you set `overflowY` in this object, it provides a performance optimization by preventing
     * Popup (underlying component of Callout) from calculating whether it needs a scroll bar.
     */
    style?: React.CSSProperties;
    /**
     * Optional callback when the layer content has mounted.
     */
    onLayerMounted?: () => void;
    /**
     * Optional props to pass to the Layer component hosting the panel.
     */
    layerProps?: ILayerProps;
    /**
     * Optional callback that is called once the callout has been correctly positioned.
     * @param positions - Gives the user information about how the callout is positioned such as the
     * final edge of the target that it positioned against, the beak position, and the beaks relationship to the
     * edges of the callout.
     */
    onPositioned?: (positions?: ICalloutPositionedInfo) => void;
    /**
     * Callback when the Callout tries to close.
     */
    onDismiss?: (ev?: Event | React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
    /**
     * If true do not render on a new layer. If false render on a new layer.
     */
    doNotLayer?: boolean;
    /**
     * If true the position will not change sides in an attempt to fit the callout within bounds.
     * It will still attempt to align it to whatever bounds are given.
     * @defaultvalue false
     */
    directionalHintFixed?: boolean;
    /**
     * Specify the final height of the content.
     * To be used when expanding the content dynamically so that callout can adjust its position.
     */
    finalHeight?: number;
    /**
     * Manually set OverflowYHidden style prop to true on calloutMain element
     * A variety of callout load animations will need this to hide the scollbar that can appear
     */
    hideOverflow?: boolean;
    /**
     * If true then the callout will attempt to focus the first focusable element that it contains.
     * If it doesn't find an element, no focus will be set and the method will return false.
     * This means that it's the contents responsibility to either set focus or have
     * focusable items.
     * @returns True if focus was set, false if it was not.
     */
    setInitialFocus?: boolean;
    /**
     * Set max height of callout
     * When not set the callout will expand with contents up to the bottom of the screen
     */
    calloutMaxHeight?: number;
    /**
     * Callback when the Callout body is scrolled.
     */
    onScroll?: () => void;
    /**
     * Optional theme for component
     */
    theme?: ITheme;
    /**
     * Optional styles for the component.
     */
    styles?: IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles>;
    /**
     * If specified, renders the Callout in a hidden state.
     * Use this flag, rather than rendering a callout conditionally based on visibility,
     * to improve rendering performance when it becomes visible.
     * Note: When callout is hidden its content will not be rendered. It will only render
     * once the callout is visible.
     */
    hidden?: boolean;
    /**
     * If true, the component will be updated even when hidden=true.
     * Note that this would consume resources to update even though
     * nothing is being shown to the user.
     * This might be helpful though if your updates are small and you want the
     * callout to be revealed fast to the user when hidden is set to false.
     */
    shouldUpdateWhenHidden?: boolean;
    /**
     * If true, when this component is unmounted, focus will be restored to the element that had focus when the component
     * first mounted.
     * @defaultvalue true
     * @deprecated use onRestoreFocus callback instead
     */
    shouldRestoreFocus?: boolean;
    /**
     * Called when the component is unmounting, and focus needs to be restored.
     * Argument passed down contains two variables, the element that the underlying
     * popup believes focus should go to * and whether or not the popup currently
     * contains focus. If this is provided, focus will not be restored automatically,
     * you'll need to call originalElement.focus()
     */
    onRestoreFocus?: (options: {
        originalElement?: HTMLElement | Window;
        containsFocus: boolean;
    }) => void;
}

/**
 * Checkbox class interface.
 * {@docCategory Checkbox}
 */
export declare interface ICheckbox {
    /** Gets the current indeterminate state. */
    indeterminate: boolean;
    /** Gets the current checked state. */
    checked: boolean;
    /** Sets focus to the checkbox. */
    focus: () => void;
}

/**
 * {@docCategory Checkbox}
 */
export declare type ICheckboxClasses = {
    [key in keyof ICheckboxSlots]: string;
};

/**
 * Checkbox properties.
 * {@docCategory Checkbox}
 */
export declare interface ICheckboxProps extends React.ButtonHTMLAttributes<HTMLElement | HTMLInputElement> {
    /**
     * Render the root element as another type.
     */
    as?: React.ElementType;
    /**
     * Optional callback to access the ICheckbox interface. Use this instead of ref for accessing
     * the public methods and properties of the component.
     */
    componentRef?: IRefObject<ICheckbox>;
    /**
     * Label to display next to the checkbox.
     */
    label?: SlotProp<React.HTMLAttributes<HTMLSpanElement>>;
    /**
     * Checkmark Icon to display when checkbox is checked.
     */
    checkmark?: SlotProp<ISvgIconProps>;
    /**
     * Additional class name to provide on the root element, in addition to the ms-Checkbox class.
     */
    className?: string;
    /**
     * Checked state. Mutually exclusive to "defaultChecked". Use this if you control the checked state at a higher
     * level and plan to pass in the correct value based on handling onChange events and re-rendering.
     */
    checked?: boolean;
    /**
     * Default checked state. Mutually exclusive to "checked". Use this if you want an uncontrolled component, and
     * want the Checkbox instance to maintain its own state.
     */
    defaultChecked?: boolean;
    /**
     * Disabled state of the checkbox.
     */
    disabled?: boolean;
    /**
     * Callback that is called when the checked value has changed.
     */
    onChange?: (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean) => void;
    /**
     * Optional input props that will be mixed into the input element, *before* other props are applied. This allows
     * you to extend the input element with additional attributes, such as data-automation-id needed for automation.
     * Note that if you provide, for example, "disabled" as well as "inputProps.disabled", the former will take
     * precedence over the later.
     */
    inputProps?: React.ButtonHTMLAttributes<HTMLElement | HTMLButtonElement>;
    /**
     * Allows you to set the checkbox to be at the before (start) or after (end) the label.
     * @defaultvalue 'start'
     */
    boxSide?: 'start' | 'end';
    /**
     * Theme provided by HOC.
     */
    theme?: ITheme;
    /**
     * Accessible label for the checkbox.
     */
    ariaLabel?: string;
    /**
     * ID for element that contains label information for the checkbox.
     */
    ariaLabelledBy?: string;
    /**
     * ID for element that provides extended information for the checkbox.
     */
    ariaDescribedBy?: string;
    /**
     * The position in the parent set (if in a set) for aria-posinset.
     */
    ariaPositionInSet?: number;
    /**
     * The total size of the parent set (if in a set) for aria-setsize.
     */
    ariaSetSize?: number;
    /**
     * Call to provide customized styling that will layer on top of the variant rules.
     *
     * @deprecated This no longer works. TODO: fix use cases with tokens prop.
     */
    styles?: IStyleFunctionOrObject<ICheckboxStyleProps, ICheckboxStyles>;
    /**
     * Custom render function for the label.
     *
     * @deprecated Use label prop instead.
     */
    onRenderLabel?: IRenderFunction<ICheckboxProps>;
    /**
     * Optional keytip.
     *
     * @deprecated This no longer works. Use `useKeytipData` hook instead.
     */
    keytipProps?: IKeytipProps;
    /**
     * Optional controlled indeterminate visual state for checkbox. Setting indeterminate state takes visual precedence
     * over checked or defaultChecked props given but does not affect checked state.
     * This should not be a toggleable state. On load the checkbox will receive indeterminate visual state
     * and after the first user click it should be removed by your supplied onChange callback
     * function exposing the true state of the checkbox.
     */
    indeterminate?: boolean;
    /**
     * Optional uncontrolled indeterminate visual state for checkbox. Setting indeterminate state takes visual precedence
     * over checked or defaultChecked props given but does not affect checked state.
     * This is not a toggleable state. On load the checkbox will receive indeterminate visual state
     * and after the user's first click it will be removed exposing the true state of the checkbox.
     */
    defaultIndeterminate?: boolean;
}

/**
 * {@docCategory Checkbox}
 */
export declare type ICheckboxSlotProps = SlotProps<ICheckboxSlots, ICheckboxProps, React.HTMLAttributes<HTMLDivElement>>;

/**
 * {@docCategory Checkbox}
 */
export declare interface ICheckboxSlots extends BaseSlots {
    input: React.ElementType;
    container: React.ElementType;
    checkbox: React.ElementType;
    checkmark: React.ElementType;
    label: React.ElementType;
}

export declare interface ICheckboxState extends Omit<ICheckboxProps, keyof ICheckboxSlotProps>, Partial<ICheckboxSlotProps> {
    ref: React.Ref<HTMLElement>;
}

/**
 * {@docCategory Checkbox}
 */
export declare interface ICheckboxStyleProps {
    theme: ITheme;
    className?: string;
    disabled?: boolean;
    checked?: boolean;
    reversed?: boolean;
    indeterminate?: boolean;
    isUsingCustomLabelRender: boolean;
}

/**
 * {@docCategory Checkbox}
 */
export declare interface ICheckboxStyles {
    /**
     * Style for the root element (a button) of the checkbox component in the default enabled/unchecked state.
     */
    root?: IStyle;
    /**
     * INTERNAL: This is mostly an internal implementation detail which you should avoid styling.
     * This refers to the <input type="checkbox"> element that is typically hidden and not rendered on screen.
     */
    input?: IStyle;
    /**
     * Style for the label part (contains the customized checkbox + text) when enabled.
     */
    label?: IStyle;
    /**
     * Style for checkbox in its default unchecked/enabled state.
     */
    checkbox?: IStyle;
    /**
     * Style for the checkmark in the default enabled/unchecked state.
     */
    checkmark?: IStyle;
    /**
     * Style for text appearing with the checkbox in its default enabled state.
     */
    text?: IStyle;
}

/**
 * {@docCategory Coachmark}
 */
export declare interface ICoachmark {
    /**
     * Forces the Coachmark to dismiss
     */
    dismiss?: (ev?: Event | React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
}

/**
 * Coachmark component props
 * {@docCategory Coachmark}
 */
export declare interface ICoachmarkProps {
    /**
     * Optional callback to access the ICoachmark interface. Use this instead of ref for accessing
     * the public methods and properties of the component.
     */
    componentRef?: IRefObject<ICoachmark>;
    /**
     * If provided, additional class name to provide on the root element.
     */
    className?: string;
    /**
     * Call to provide customized styling that will layer on top of the variant rules
     */
    styles?: IStyleFunctionOrObject<ICoachmarkStyleProps, ICoachmarkStyles>;
    /**
     * The target that the Coachmark should try to position itself based on.
     */
    target: HTMLElement | string | null;
    /**
     * Props to pass to the PositioningContainer component. Specify the `directionalHint` to indicate
     * on which edge the Coachmark/TeachingBubble should be positioned.
     * @defaultvalue directionalHint: DirectionalHint.bottomAutoEdge
     */
    positioningContainerProps?: IPositioningContainerProps;
    /**
     * Whether or not to force the Coachmark/TeachingBubble content to fit within the window bounds.
     * @defaultvalue true
     */
    isPositionForced?: boolean;
    /**
     * The starting collapsed state for the Coachmark.  Use `isCollapsed` instead.
     * @defaultvalue true
     * @deprecated Use `isCollapsed` instead.
     */
    collapsed?: boolean;
    /**
     * The starting collapsed state for the Coachmark.
     * @defaultvalue true
     */
    isCollapsed?: boolean;
    /**
     * The distance in pixels the mouse is located
     * before opening up the Coachmark.
     * @defaultvalue 10
     */
    mouseProximityOffset?: number;
    /**
     * Callback when the opening animation begins.
     */
    onAnimationOpenStart?: () => void;
    /**
     * Callback when the opening animation completes.
     */
    onAnimationOpenEnd?: () => void;
    /**
     * The width of the Beak component.
     * @deprecated No longer used.
     */
    beakWidth?: number;
    /**
     * The height of the Beak component.
     * @deprecated No longer used.
     */
    beakHeight?: number;
    /**
     * Delay before allowing mouse movements to open the Coachmark.
     * @defaultvalue 3600
     */
    delayBeforeMouseOpen?: number;
    /**
     * Delay in milliseconds before Coachmark animation appears.
     * @defaultvalue 0
     */
    delayBeforeCoachmarkAnimation?: number;
    /**
     * Callback to run when the mouse moves.
     */
    onMouseMove?: (e: MouseEvent) => void;
    /**
     * The width of the Coachmark.
     * @deprecated No longer used.
     */
    width?: number;
    /**
     * The height of the Coachmark.
     * @deprecated No longer used.
     */
    height?: number;
    /**
     * Color of the Coachmark/TeachingBubble.
     */
    color?: string;
    /**
     * Beacon color one.
     */
    beaconColorOne?: string;
    /**
     * Beacon color two.
     */
    beaconColorTwo?: string;
    /**
     * Text to announce to screen reader / narrator when Coachmark is displayed
     */
    ariaAlertText?: string;
    /**
     * Ref for TeachingBubble
     * @deprecated Coachmark uses `focusFirstChild` utility instead to focus on TeachingBubbleContent
     */
    teachingBubbleRef?: ITeachingBubble;
    /**
     *  Defines the element id referencing the element containing label text for Coachmark.
     */
    ariaLabelledBy?: string;
    /**
     * Defines the element id referencing the element containing the description for the Coachmark.
     */
    ariaDescribedBy?: string;
    /**
     *  Defines the text content for the ariaLabelledBy element
     */
    ariaLabelledByText?: string;
    /**
     * Defines the text content for the ariaDescribedBy element
     */
    ariaDescribedByText?: string;
    /**
     * If true then the Coachmark will not dismiss when it loses focus
     * @defaultvalue false
     */
    preventDismissOnLostFocus?: boolean;
    /**
     * If true then the Coachmark beak (arrow pointing towards target) will always be visible as long as
     * Coachmark is visible
     * @defaultvalue false
     */
    persistentBeak?: boolean;
    /**
     * If true then focus will not be set to the Coachmark when it mounts. Useful in cases where focus on coachmark
     * is causing other components in page to dismiss upon losing focus.
     * @defaultvalue false
     */
    preventFocusOnMount?: boolean;
    /**
     * Callback when the Coachmark tries to close.
     */
    onDismiss?: (ev?: Event | React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
    /**
     * Theme provided by higher order component.
     */
    theme?: ITheme;
    /**
     * Child nodes to render inside the Coachmark dialog
     */
    children?: React.ReactNode;
}

/**
 * The props needed to construct styles.
 * {@docCategory Coachmark}
 */
export declare interface ICoachmarkStyleProps {
    /**
     * ClassName to provide on the root style area.
     */
    className?: string;
    /**
     * Current theme.
     */
    theme?: ITheme;
    /**
     * Is the Coachmark collapsed.
     * Deprecated, use `isCollapsed` instead.
     * @deprecated Use `isCollapsed` instead.
     */
    collapsed?: boolean;
    /**
     * Is the Coachmark collapsed
     */
    isCollapsed: boolean;
    /**
     * Is the component taking measurements
     */
    isMeasuring: boolean;
    /**
     * The height measured before the component has been mounted
     * in pixels
     */
    entityHostHeight?: string;
    /**
     * The width measured in pixels
     */
    entityHostWidth?: string;
    /**
     * Width of the coachmark
     */
    width?: string;
    /**
     * Height of the coachmark
     */
    height?: string;
    /**
     * Color
     */
    color?: string;
    /**
     * Beacon color one
     */
    beaconColorOne?: string;
    /**
     * Beacon color two
     */
    beaconColorTwo?: string;
    /**
     * Transform origin for teaching bubble content
     */
    transformOrigin?: string;
    /**
     * Delay time for the animation to start
     */
    delayBeforeCoachmarkAnimation?: string;
}

/**
 * Represents the stylable areas of the control.
 * {@docCategory Coachmark}
 */
export declare interface ICoachmarkStyles {
    /**
     * Style for the root element in the default enabled/unchecked state.
     */
    root?: IStyle;
    /**
     * The pulsing beacon that animates when the Coachmark is collapsed.
     */
    pulsingBeacon?: IStyle;
    /**
     * The layer, or div, that the translate animation will be applied to.
     */
    translateAnimationContainer?: IStyle;
    /**
     * The layer the Scale animation will be applied to.
     */
    scaleAnimationLayer?: IStyle;
    /**
     * The layer the Rotate animation will be applied to.
     */
    rotateAnimationLayer?: IStyle;
    /**
     * The layer that content/components/elements will be hosted in.
     */
    entityHost?: IStyle;
    /**
     * The inner layer that components will be hosted in
     * and primary purpose is scaling the layer down while the
     * Coachmark collapsed.
     */
    entityInnerHost: IStyle;
    /**
     * The layer that directly contains the TeachingBubbleContent
     */
    childrenContainer: IStyle;
    /**
     * The styles applied when the Coachmark has collapsed.
     */
    collapsed?: IStyle;
    /**
     * The styles applied to the ARIA attribute container
     */
    ariaContainer?: IStyle;
}

/**
 * @deprecated No longer used.
 * {@docCategory Coachmark}
 */
export declare type ICoachmarkTypes = ICoachmarkProps;

/**
 * {@docCategory SwatchColorPicker}
 */
export declare interface IColorCellProps {
    /**
     * Arbitrary unique string associated with this option
     */
    id: string;
    /**
     * Tooltip and aria label for this item
     */
    label?: string;
    /**
     * The CSS-compatible string to describe the color
     */
    color?: string;
    /**
     * Index for this option
     */
    index?: number;
}

/**
 * {@docCategory SwatchColorPicker}
 */
export declare interface IColorPickerGridCellProps {
    /**
     * Item to render
     */
    item: IColorCellProps;
    /**
     * Used as a PREFIX for the cell's ID (the cell will not have this literal string as its ID).
     * @deprecated Deprecated due to misleading name. Use `idPrefix` instead.
     */
    id?: string;
    /**
     * Prefix for this cell's ID. Will be required in a future version once `id` is removed.
     */
    idPrefix?: string;
    /**
     * Tooltip and aria label for this item
     */
    label?: string;
    /**
     * The CSS-compatible string to describe the color
     */
    color?: string;
    /**
     * Index for this option
     */
    index?: number;
    /**
     * The theme object to use for styling.
     */
    theme?: ITheme;
    /**
     * True if this cell should be rendered as a circle, false if it should be a square.
     * @default `true` (render as circle)
     */
    circle?: boolean;
    /**
     * Whether this cell should be disabled
     * @default false
     */
    disabled?: boolean;
    /**
     * Whether this cell is currently selected
     */
    selected: boolean;
    /**
     * Height of the cell, in pixels
     * @defaultvalue 20
     */
    height?: number;
    /**
     * Width of the cell, in pixels
     * @defaultvalue 20
     */
    width?: number;
    /**
     * Width of the border that indicates a selected/hovered cell, in pixels.
     * @defaultvalue 2 if `cellWidth` is less than 24; otherwise 4
     */
    borderWidth?: number;
    /**
     * Handler for when a color cell is clicked.
     */
    onClick?: (item: IColorCellProps) => void;
    onHover?: (item?: IColorCellProps) => void;
    onFocus?: (item: IColorCellProps) => void;
    /**
     * Custom styles for the component.
     */
    styles?: IStyleFunctionOrObject<IColorPickerGridCellStyleProps, IColorPickerGridCellStyles>;
    /**
     * Mouse enter handler. Returns true if the event should be processed, false otherwise.
     */
    onMouseEnter?: (ev: React.MouseEvent<HTMLButtonElement>) => boolean;
    /**
     * Mouse move handler. Returns true if the event should be processed, false otherwise.
     */
    onMouseMove?: (ev: React.MouseEvent<HTMLButtonElement>) => boolean;
    onMouseLeave?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
    onWheel?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
    onKeyDown?: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
}

/**
 * {@docCategory SwatchColorPicker}
 */
export declare interface IColorPickerGridCellStyleProps {
    /**
     * Theme to apply to the cell.
     */
    theme: ITheme;
    /**
     * Whether the component is disabled or not.
     */
    disabled?: boolean;
    /**
     * Whether the cell is currently selected or not.
     */
    selected?: boolean;
    /**
     * Whether the svg color element should be rendered as a circle or not.
     */
    circle?: boolean;
    /**
     * Whether the color being rendered is white or not. If it is white we show a border around it.
     */
    isWhite?: boolean;
    /**
     * The height of this cell, in pixels.
     */
    height?: number;
    /**
     * The width of this cell, in pixels.
     */
    width?: number;
    /**
     * The width of the border indicating a hovered or selected cell, in pixels.
     */
    borderWidth?: number;
}

/**
 * {@docCategory SwatchColorPicker}
 */
export declare interface IColorPickerGridCellStyles {
    /**
     * Style to apply to a colorCell in the color picker.
     */
    colorCell: IStyle;
    /**
     * Style to apply to the svg element that renders the color.
     */
    svg: IStyle;
}

export declare interface IDialogState {
    isOpen?: boolean;
    isVisible?: boolean;
    isVisibleClose?: boolean;
    id?: string;
    hasBeenOpened?: boolean;
    modalRectangleTop?: number;
    isModalMenuOpen?: boolean;
    isInKeyboardMoveMode?: boolean;
    x: number;
    y: number;
}

export declare interface IDragOptions {
    /**
     * Optional selector for the element where the drag can be initiated. If not supplied when
     * isDraggable is true dragging can be initated by the whole contents of the modal
     */
    dragHandleSelector?: string;
    /**
     * IconProps for the icon used to indicate that the dialog is in keyboard move mode
     */
    keyboardMoveIconProps?: IIconProps;
    /**
     * The text to use for the modal move menu item
     */
    moveMenuItemText: string;
    /**
     * The text to use for the modal close menu item
     */
    closeMenuItemText: string;
    /**
     * The Draggable Control Menu so that the draggable zone can be moved via the keyboard
     */
    menu: React.FunctionComponent<IContextualMenuProps>;
}

export declare interface IEditingSelectedPeopleItemProps extends ISelectedPeopleItemProps {
    onEditingComplete: (oldItem: any, newItem: any) => void;
    onRenderFloatingPicker?: React.ComponentType<IBaseFloatingPickerProps<IPersonaProps>>;
    floatingPickerProps?: IBaseFloatingPickerProps<IPersonaProps>;
    getEditingItemText?: (item: IExtendedPersonaProps) => string;
}

export declare interface IEditingSelectedPeopleItemStyles {
    root: IStyle;
    input: IStyle;
}

export declare interface IEditingSelectedPeopleItemStylesProps {
}

/**
 * An interface for the cached dimensions of entity inner host.
 */
export declare interface IEntityRect {
    width?: number;
    height?: number;
}

/**
 * {@docCategory SelectedPeopleList}
 */
export declare interface IExtendedPersonaProps extends IPersonaProps {
    key?: React.Key;
    isValid: boolean;
    blockRecipientRemoval?: boolean;
    shouldBlockSelection?: boolean;
    canExpand?: boolean;
    isEditing?: boolean;
}

export declare interface IFabricProps extends React.HTMLAttributes<HTMLDivElement> {
    componentRef?: IRefObject<{}>;
    /**
     * Overrides the root element type, defaults to `div`.
     */
    as?: React.ElementType;
    /**
     * Injected by the `styled` HOC wrapper.
     */
    theme?: ITheme;
    /**
     * Overrides the styles for the component.
     */
    styles?: IStyleFunctionOrObject<IFabricStyleProps, IFabricStyles>;
    /**
     * Applies the current body background specified in the theme to the root element.
     */
    applyTheme?: boolean;
    /**
     * Applies the current body background specified in the theme to the body element.
     */
    applyThemeToBody?: boolean;
    /**
     * Specifies the direction of the content. Will inject a `dir` attribute, and also ensure that the `rtl` flag of the
     * contextual theme object is set correctly so that css registered with merge-styles can be auto flipped correctly.
     */
    dir?: 'rtl' | 'ltr' | 'auto';
}

export declare interface IFabricStyleProps extends IFabricProps {
    theme: ITheme;
}

export declare interface IFabricStyles {
    root: IStyle;
    bodyThemed: IStyle;
}

export declare interface IFocusTrapCalloutProps extends ICalloutProps {
    /**
     * Optional props to be passed on to FocusTrapZone
     */
    focusTrapProps?: IFocusTrapZoneProps;
}

/**
 * {@docCategory FocusTrapZone}
 */
export declare interface IFocusTrapZone {
    /**
     * Sets focus to a descendant in the Trap Zone.
     * See firstFocusableSelector and focusPreviouslyFocusedInnerElement for details.
     */
    focus: () => void;
}

/**
 * {@docCategory FocusTrapZone}
 */
export declare interface IFocusTrapZoneProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Optional callback to access the IFocusTrapZone interface. Use this instead of ref for accessing
     * the public methods and properties of the component.
     */
    componentRef?: IRefObject<IFocusTrapZone>;
    /**
     * Whether to disable the FocusTrapZone's focus trapping behavior.
     * @defaultvalue false
     */
    disabled?: boolean;
    /**
     * Sets the element to focus on when exiting the FocusTrapZone.
     * @defaultvalue The `element.target` that triggered the FTZ.
     */
    elementToFocusOnDismiss?: HTMLElement;
    /**
     * Sets the aria-labelledby attribute.
     */
    ariaLabelledBy?: string;
    /**
     * Whether clicks are allowed outside this FocusTrapZone.
     * @defaultvalue false
     */
    isClickableOutsideFocusTrap?: boolean;
    /**
     * If false (the default), the trap zone will restore focus to the element which activated it
     * once the trap zone is unmounted or disabled. Set to true to disable this behavior.
     * @defaultvalue false
     */
    ignoreExternalFocusing?: boolean;
    /**
     * Whether the focus trap zone should force focus to stay inside of it.
     * @defaultvalue true
     */
    forceFocusInsideTrap?: boolean;
    /**
     * Class name (not actual selector) for first focusable item. Do not append a dot.
     * Only applies if `focusPreviouslyFocusedInnerElement` is false.
     */
    firstFocusableSelector?: string | (() => string);
    /**
     * Do not put focus onto the first element inside the focus trap zone.
     * @defaultvalue false
     */
    disableFirstFocus?: boolean;
    /**
     * Specifies which descendant element to focus when `focus()` is called.
     * If false, use the first focusable descendant, filtered by the `firstFocusableSelector` property if present.
     * If true, use the element that was focused when the trap zone last had a focused descendant
     * (or fall back to the first focusable descendant if the trap zone has never been focused).
     * @defaultvalue false
     */
    focusPreviouslyFocusedInnerElement?: boolean;
}

/**
 * {@docCategory Image}
 */
export declare interface IImage {
}

/**
 * {@docCategory Image}
 */
export declare interface IImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
    /**
     * Call to provide customized styling that will layer on top of the variant rules
     */
    styles?: IStyleFunctionOrObject<IImageStyleProps, IImageStyles>;
    /**
     * Theme provided by HOC.
     */
    theme?: ITheme;
    /**
     * Additional css class to apply to the Component
     * @defaultvalue undefined
     */
    className?: string;
    /**
     * If true, fades the image in when loaded.
     * @defaultvalue true
     */
    shouldFadeIn?: boolean;
    /**
     * If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until
     * it is successfully loaded. This disables shouldFadeIn.
     * @defaultvalue false;
     */
    shouldStartVisible?: boolean;
    /**
     * Used to determine how the image is scaled and cropped to fit the frame.
     *
     * @defaultvalue If both dimensions are provided, then the image is fit using ImageFit.scale.
     * Otherwise, the image won't be scaled or cropped.
     */
    imageFit?: ImageFit;
    /**
     * Deprecated at v1.3.6, to replace the src in case of errors, use `onLoadingStateChange` instead and
     * rerender the Image with a difference src.
     * @deprecated Use `onLoadingStateChange` instead and
     * rerender the Image with a difference src.
     */
    errorSrc?: string;
    /**
     * If true, the image frame will expand to fill its parent container.
     */
    maximizeFrame?: boolean;
    /**
     * Optional callback method for when the image load state has changed.
     * The 'loadState' parameter indicates the current state of the Image.
     */
    onLoadingStateChange?: (loadState: ImageLoadState) => void;
    /**
     * Specifies the cover style to be used for this image. If not
     * specified, this will be dynamically calculated based on the
     * aspect ratio for the image.
     */
    coverStyle?: ImageCoverStyle;
}

export declare interface IImageState {
    loadState?: ImageLoadState;
}

/**
 * {@docCategory Image}
 */
export declare interface IImageStyleProps {
    /**
     * Accept theme prop.
     */
    theme: ITheme;
    /**
     * Accept custom classNames
     */
    className?: string;
    /**
     * If true, the image frame will expand to fill its parent container.
     */
    maximizeFrame?: boolean;
    /**
     * If true, the image is loaded
     */
    isLoaded?: boolean;
    /**
     * If true, fades the image in when loaded.
     * @defaultvalue true
     */
    shouldFadeIn?: boolean;
    /**
     * If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until
     * it is successfully loaded. This disables shouldFadeIn.
     * @defaultvalue false;
     */
    shouldStartVisible?: boolean;
    /**
     * If true the image is coverStyle landscape instead of portrait
     */
    isLandscape?: boolean;
    /**
     * ImageFit booleans for center, cover, contain, centerContain, centerCover, none
     */
    isCenter?: boolean;
    isContain?: boolean;
    isCover?: boolean;
    isCenterContain?: boolean;
    isCenterCover?: boolean;
    isNone?: boolean;
    /**
     * if true image load is in error
     */
    isError?: boolean;
    /**
     * if true, imageFit is undefined
     */
    isNotImageFit?: boolean;
    /**
     * Image width value
     */
    width?: number | string;
    /**
     * Image height value
     */
    height?: number | string;
}

/**
 * {@docCategory Image}
 */
export declare interface IImageStyles {
    /**
     * Style set for the root div element.
     */
    root: IStyle;
    /**
     * Style set for the img element.
     */
    image: IStyle;
}

/**
 * {@docCategory Link}
 */
export declare interface ILink {
    /** Sets focus to the link. */
    focus(): void;
}

/**
 * {@docCategory Link}
 */
export declare interface ILinkHTMLAttributes<T> extends React.HTMLAttributes<T> {
    as?: React.ElementType;
    type?: string;
    download?: any;
    href?: string;
    hrefLang?: string;
    media?: string;
    rel?: string;
    target?: string;
    autoFocus?: boolean;
    disabled?: boolean;
    form?: string;
    formAction?: string;
    formEncType?: string;
    formMethod?: string;
    formNoValidate?: boolean;
    formTarget?: string;
    name?: string;
    value?: string | string[] | number;
    [index: string]: any;
}

/**
 * {@docCategory Link}
 */
export declare interface ILinkOptions {
}

/**
 * {@docCategory Link}
 */
export declare interface ILinkProps extends ILinkHTMLAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLElement> {
    /**
     * Optional callback to access the ILink interface. Use this instead of ref for accessing
     * the public methods and properties of the component.
     */
    componentRef?: IRefObject<ILink>;
    /**
     * Whether the link is disabled
     */
    disabled?: boolean;
    /**
     * Call to provide customized styling that will layer on top of the variant rules.
     */
    styles?: IStyleFunctionOrObject<ILinkStyleProps, ILinkStyles>;
    /**
     * Theme (provided through customization.)
     */
    theme?: ITheme;
    /**
     * Optional keytip.
     *
     * @deprecated This no longer works. Use `useKeytipData` hook instead.
     */
    keytipProps?: IKeytipProps;
}

/**
 * {@docCategory Link}
 */
export declare interface ILinkSlots {
}

/**
 * {@docCategory Link}
 */
export declare interface ILinkStyleProps {
    className?: string;
    isButton?: boolean;
    isDisabled?: boolean;
    theme: ITheme;
}

/**
 * {@docCategory Link}
 */
export declare interface ILinkStyles {
    root: IStyle;
}

export declare const Image: React.FunctionComponent<IImageProps>;

export declare const ImageBase: React.ForwardRefExoticComponent<IImageProps & React.RefAttributes<HTMLImageElement>>;

/**
 * The cover style to be used on the image
 * {@docCategory Image}
 */
export declare enum ImageCoverStyle {
    /**
     * The image will be shown at 100% height of container and the width will be scaled accordingly
     */
    landscape = 0,
    /**
     * The image will be shown at 100% width of container and the height will be scaled accordingly
     */
    portrait = 1
}

/**
 * The possible methods that can be used to fit the image.
 * {@docCategory Image}
 */
export declare enum ImageFit {
    /**
     * The image is not scaled. The image is centered and cropped within the content box.
     */
    center = 0,
    /**
     * The image is scaled to maintain its aspect ratio while being fully contained within the frame. The image will
     * be centered horizontally and vertically within the frame. The space in the top and bottom or in the sides of
     * the frame will be empty depending on the difference in aspect ratio between the image and the frame.
     */
    contain = 1,
    /**
     * The image is scaled to maintain its aspect ratio while filling the frame. Portions of the image will be cropped
     * from the top and bottom, or the sides, depending on the difference in aspect ratio between the image and the frame.
     */
    cover = 2,
    /**
     * Neither the image nor the frame are scaled. If their sizes do not match, the image will either be cropped or the
     * frame will have empty space.
     */
    none = 3,
    /**
     * The image will be centered horizontally and vertically within the frame and maintains its aspect ratio. It will
     * behave as ImageFit.center if the image's natural height or width is less than the Image frame's height or width,
     * but if both natural height and width are larger than the frame it will behave as ImageFit.cover.
     */
    centerCover = 4,
    /**
     * The image will be centered horizontally and vertically within the frame and maintains its aspect ratio. It will
     * behave as ImageFit.center if the image's natural height and width is less than the Image frame's height and width,
     * but if either natural height or width are larger than the frame it will behave as ImageFit.contain.
     */
    centerContain = 5
}

/**
 * {@docCategory Image}
 */
export declare enum ImageLoadState {
    /**
     * The image has not yet been loaded, and there is no error yet.
     */
    notLoaded = 0,
    /**
     * The image has been loaded successfully.
     */
    loaded = 1,
    /**
     * An error has been encountered while loading the image.
     */
    error = 2,
    /**
     * Deprecated at v1.3.6, to replace the src in case of errors, use `onLoadingStateChange` instead
     * and rerender the Image with a difference src.
     * @deprecated Use `onLoadingStateChange` instead
     * and rerender the Image with a difference src.
     */
    errorLoaded = 3
}

/**
 * State for the MaskedTextField component.
 */
export declare interface IMaskedTextFieldState {
    /**
     * The mask string formatted with the input value.
     * This is what is displayed inside the TextField
     * @example
     *  `Phone Number: 12_ - 4___`
     */
    displayValue: string;
    /** The index into the rendered value of the first unfilled format character */
    maskCursorPosition?: number;
}

/**
 * {@docCategory Modal}
 */
export declare interface IModal {
    /**
     * Sets focus on the first focusable, or configured, child in focus trap zone
     */
    focus: () => void;
}

/**
 * {@docCategory Modal}
 */
export declare interface IModalProps extends React.ClassAttributes<ModalBase>, IWithResponsiveModeState, IAccessiblePopupProps {
    /**
     * Optional callback to access the IDialog interface. Use this instead of ref for accessing
     * the public methods and properties of the component.
     */
    componentRef?: IRefObject<IModal>;
    /**
     * Call to provide customized styling that will layer on top of the variant rules.
     */
    styles?: IStyleFunctionOrObject<IModalStyleProps, IModalStyles>;
    /**
     * Theme provided by High-Order Component.
     */
    theme?: ITheme;
    /**
     * Whether the dialog is displayed.
     * @defaultvalue false
     */
    isOpen?: boolean;
    /**
     * Whether the overlay is dark themed.
     * @defaultvalue true
     */
    isDarkOverlay?: boolean;
    /**
     * A callback function for when the Modal is dismissed light dismiss, before the animation completes.
     */
    onDismiss?: (ev?: React.MouseEvent<HTMLButtonElement>) => any;
    /**
     * A callback function which is called after the Modal is dismissed and the animation is complete.
     */
    onDismissed?: () => any;
    /**
     * Defines an optional set of props to be passed through to Layer
     */
    layerProps?: ILayerProps;
    /**
     * Defines an optional set of props to be passed through to Overlay
     */
    overlay?: IOverlayProps;
    /**
     * Whether the dialog can be light dismissed by clicking outside the dialog (on the overlay).
     * @defaultvalue false
     */
    isBlocking?: boolean;
    /**
     * Whether the dialog should be modeless (e.g. not dismiss when focusing/clicking outside of the dialog).
     * if true: isBlocking is ignored, there will be no overlay (isDarkOverlay is ignored),
     * isClickableOutsideFocusTrap is true, and forceFocusInsideTrap is false
     */
    isModeless?: boolean;
    /**
     * Optional class name to be added to the root class
     */
    className?: string;
    /**
     * Optional override for container class
     */
    containerClassName?: string;
    /**
     * Optional override for scrollable content class
     */
    scrollableContentClassName?: string;
    /**
     * A callback function for when the Modal content is mounted on the overlay layer
     * @deprecated Use layerProps.onLayerDidMount instead
     */
    onLayerDidMount?: () => void;
    /**
     * ARIA id for the title of the Modal, if any
     */
    titleAriaId?: string;
    /**
     * ARIA id for the subtitle of the Modal, if any
     */
    subtitleAriaId?: string;
    /**
     * Whether the modal should have top offset fixed once opened and expand from the bottom only
     * when the content changes dynamically.
     */
    topOffsetFixed?: boolean;
    /**
     * The options to make the modal draggable
     */
    dragOptions?: IDragOptions;
    /**
     * Allow body scroll on content and overlay on touch devices. Changing after mounting has no effect.
     * @defaultvalue false
     */
    allowTouchBodyScroll?: boolean;
    /**
     * Puts aria-hidden=true on all non-ancestors of the current modal, for screen readers.
     * This is an experimental feature that will be graduated to default behavior after testing.
     * This flag will be removed with the next major release.
     */
    enableAriaHiddenSiblings?: boolean;
}

/**
 * {@docCategory Modal}
 */
export declare type IModalStyleProps = Required<Pick<IModalProps, 'theme'>> & Pick<IModalProps, 'className' | 'containerClassName' | 'scrollableContentClassName' | 'topOffsetFixed' | 'isModeless'> & {
    /** Modal open state. */
    isOpen?: boolean;
    /** Modal visible state. */
    isVisible?: boolean;
    /** Modal has been opened state. */
    hasBeenOpened?: boolean;
    /** Positioning of modal on first render */
    modalRectangleTop?: number;
    /** Classname for layer element */
    layerClassName?: string;
    /** Whether this modal is draggable and using the default handler */
    isDefaultDragHandle?: boolean;
};

/**
 * {@docCategory Modal}
 */
export declare interface IModalStyles {
    root: IStyle;
    main: IStyle;
    scrollableContent: IStyle;
    layer: IStyle;
    keyboardMoveIconContainer: IStyle;
    keyboardMoveIcon: IStyle;
}

/**
 * {@docCategory OverflowSet}
 */
export declare interface IOverflowSet {
    /**
     * Sets focus to the first tabbable item in the zone.
     * @param forceIntoFirstElement - If true, focus will be forced into the first element, even if
     * focus is already in the focus zone.
     * @returns True if focus could be set to an active element, false if no operation was taken.
     */
    focus(forceIntoFirstElement?: boolean): boolean;
    /**
     * Sets focus to a specific child element within the zone. This can be used in conjunction with
     * shouldReceiveFocus to created delayed focus scenarios (like animate the scroll position to the correct
     * location and then focus.)
     * @param childElement - The child element within the zone to focus.
     * @returns True if focus could be set to an active element, false if no operation was taken.
     */
    focusElement(childElement?: HTMLElement): boolean;
}

/**
 * {@docCategory OverflowSet}
 */
export declare interface IOverflowSetItemProps {
    /**
     * Unique id to identify the item.
     */
    key: string;
    /**
     * Optional keytip for the overflowSetItem.
     */
    keytipProps?: IKeytipProps;
    /**
     * Any additional properties to use when custom rendering menu items.
     */
    [propertyName: string]: any;
}

/**
 * {@docCategory OverflowSet}
 */
export declare interface IOverflowSetProps extends React.ClassAttributes<OverflowSetBase> {
    /**
     * Gets the component ref.
     */
    componentRef?: IRefObject<IOverflowSet>;
    /**
     * Class name
     */
    className?: string;
    /**
     * An array of items to be rendered by your onRenderItem function in the primary content area
     */
    items?: IOverflowSetItemProps[];
    /**
     * Change item layout direction to vertical/stacked.
     * If role is set to `menubar`, `vertical={true}` will also add proper `aria-orientation`.
     * @defaultvalue false
     */
    vertical?: boolean;
    /**
     * Controls wether or not the overflow button is placed at the start or end of the items.
     * This gives a reveresed visual behavior but maintains correct keyboard navigation.
     * @defaultValue 'end'
     */
    overflowSide?: 'start' | 'end';
    /**
     * An array of items to be passed to overflow contextual menu
     */
    overflowItems?: IOverflowSetItemProps[];
    /**
     * Method to call when trying to render an item.
     */
    onRenderItem: (item: IOverflowSetItemProps) => any;
    /**
     * Rendering method for overflow button and contextual menu. The argument to the function is
     * the overflowItems passed in as props to this function.
     */
    onRenderOverflowButton: IRenderFunction<any[]>;
    /**
     * Custom properties for OverflowSet's FocusZone.
     * If doNotContainWithinFocusZone is set to true focusZoneProps will be ignored.
     * Use one or the other.
     * @deprecated In 8.0 the OverflowSet will no longer be wrapped in a FocusZone
     */
    focusZoneProps?: IFocusZoneProps;
    /**
     * If true do not contain the OverflowSet inside of a FocusZone,
     * otherwise the OverflowSet will contain a FocusZone.
     * If this is set to true focusZoneProps will be ignored.
     * Use one or the other.
     * @deprecated In 8.0 the OverflowSet will no longer be wrapped in a FocusZone
     */
    doNotContainWithinFocusZone?: boolean;
    /**
     * The role for the OverflowSet.
     * @defaultvalue 'group'
     */
    role?: string;
    /**
     * Optional full keytip sequence for the overflow button, if it will have a keytip.
     */
    keytipSequences?: string[];
    /**
     * Function that will take in an IOverflowSetItemProps and return the subMenu for that item.
     * If not provided, will use 'item.subMenuProps.items' by default.
     * This is only used if your overflow set has keytips.
     */
    itemSubMenuProvider?: (item: IOverflowSetItemProps) => any[] | undefined;
    /**
     * Call to provide customized styling that will layer on top of the variant rules.
     */
    styles?: IStyleFunctionOrObject<IOverflowSetProps, IOverflowSetStyles>;
}

/**
 * The props needed to construct styles.
 * This represents the simplified set of immutable things which control the class names.
 * {@docCategory OverflowSet}
 */
export declare type IOverflowSetStyleProps = Pick<IOverflowSetProps, 'vertical' | 'className'>;

/**
 * {@docCategory OverflowSet}
 */
export declare interface IOverflowSetStyles {
    /** The style that is layered onto the root element of OverflowSet. */
    root?: IStyle;
    /** The style that is layered onto each individual item in the overflow set. */
    item?: IStyle;
    /** The style that is layered onto the overflow button for the overflow set. */
    overflowButton?: IStyle;
}

export declare interface IPeoplePickerItemState {
    contextualMenuVisible: boolean;
}

/**
 * {@docCategory Persona}
 */
export declare interface IPersona {
}

/**
 * {@docCategory Persona}
 */
export declare interface IPersonaCoinProps extends IPersonaSharedProps {
    /**
     * Gets the component ref.
     */
    componentRef?: IRefObject<{}>;
    /**
     * Call to provide customized styling that will layer on top of the variant rules
     */
    styles?: IStyleFunctionOrObject<IPersonaCoinStyleProps, IPersonaCoinStyles>;
    /**
     * Additional css class to apply to the PersonaCoin
     * @defaultvalue undefined
     */
    className?: string;
}

/**
 * {@docCategory Persona}
 */
export declare interface IPersonaCoinStyleProps {
    /**
     * Theme provided by High-Order Component.
     */
    theme: ITheme;
    /**
     * Custom class name.
     */
    className?: string;
    /**
     * Decides the size of the control.
     * @defaultvalue PersonaSize.size48
     */
    size?: PersonaSize;
    /**
     * Optional custom persona coin size in pixel.
     */
    coinSize?: number;
    /**
     * Decides whether to display coin for unknown persona
     */
    showUnknownPersonaCoin?: boolean;
}

/**
 * {@docCategory Persona}
 */
export declare interface IPersonaCoinStyles {
    coin: IStyle;
    imageArea: IStyle;
    image: IStyle;
    initials: IStyle;
    size10WithoutPresenceIcon: IStyle;
}

/**
 * {@docCategory Persona}
 */
export declare interface IPersonaPresenceProps extends IPersonaSharedProps {
    /**
     * Gets the component ref.
     */
    componentRef?: IRefObject<{}>;
    /**
     * Call to provide customized styling that will layer on top of the variant rules
     */
    styles?: IStyleFunctionOrObject<IPersonaPresenceStyleProps, IPersonaPresenceStyles>;
}

/**
 * {@docCategory Persona}
 */
export declare type IPersonaPresenceStyleProps = Required<Pick<IPersonaSharedProps, 'theme'>> & Pick<IPersonaSharedProps, 'presence' | 'isOutOfOffice' | 'size' | 'presenceColors'> & Pick<IPersonaProps, 'className'>;

/**
 * {@docCategory Persona}
 */
export declare interface IPersonaPresenceStyles {
    presence: IStyle;
    presenceIcon: IStyle;
}

/**
 * {@docCategory Persona}
 */
export declare interface IPersonaProps extends IPersonaSharedProps {
    /**
     * Optional callback to access the IPersona interface. Use this instead of ref for accessing
     * the public methods and properties of the component.
     */
    componentRef?: IRefObject<IPersona>;
    /**
     * Additional CSS class(es) to apply to the Persona
     */
    className?: string;
    /**
     * Call to provide customized styling that will layer on top of variant rules
     */
    styles?: IStyleFunctionOrObject<IPersonaStyleProps, IPersonaStyles>;
    /**
     * Optional custom renderer for the primary text.
     */
    onRenderPrimaryText?: IRenderFunction<IPersonaProps>;
    /**
     * Optional custom renderer for the secondary text.
     */
    onRenderSecondaryText?: IRenderFunction<IPersonaProps>;
    /**
     * Optional custom renderer for the tertiary text.
     */
    onRenderTertiaryText?: IRenderFunction<IPersonaProps>;
    /**
     * Optional custom renderer for the optional text.
     */
    onRenderOptionalText?: IRenderFunction<IPersonaProps>;
}

/**
 * {@docCategory Persona}
 */
export declare interface IPersonaSharedProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Primary text to display, usually the name of the person.
     */
    text?: string;
    /**
     * Decides the size of the control.
     * @defaultvalue PersonaSize.size48
     */
    size?: PersonaSize;
    /**
     * Optional custom renderer for the coin
     * @deprecated Use `onRenderPersonaCoin` for custom rendering instead
     */
    onRenderCoin?: IRenderFunction<IPersonaSharedProps>;
    /**
     * Optional custom renderer for the coin
     */
    onRenderPersonaCoin?: IRenderFunction<IPersonaSharedProps>;
    /**
     * If true, adds the css class 'is-fadeIn' to the image.
     */
    imageShouldFadeIn?: boolean;
    /**
     * If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until
     * it is successfully loaded. This disables imageShouldFadeIn.
     * @defaultvalue false
     */
    imageShouldStartVisible?: boolean;
    /**
     * Url to the image to use, should be a square aspect ratio and big enough to fit in the image area.
     */
    imageUrl?: string;
    /**
     * Alt text for the image to use. Defaults to an empty string.
     */
    imageAlt?: string;
    /**
     * The user's initials to display in the image area when there is no image.
     * @defaultvalue [Derived from text]
     */
    imageInitials?: string;
    /**
     * Whether initials are calculated for phone numbers and number sequences.
     * Example: Set property to true to get initials for project names consisting of numbers only.
     * @defaultvalue false
     */
    allowPhoneInitials?: boolean;
    /**
     * Optional custom renderer for the initials
     */
    onRenderInitials?: IRenderFunction<IPersonaSharedProps>;
    /**
     * Optional callback for when loading state of the photo changes
     */
    onPhotoLoadingStateChange?: (newImageLoadState: ImageLoadState) => void;
    /**
     * The background color when the user's initials are displayed.
     * @defaultvalue [Derived from text]
     */
    initialsColor?: PersonaInitialsColor | string;
    /** The colors to be used for the presence-icon and it's background */
    presenceColors?: {
        available: string;
        away: string;
        busy: string;
        dnd: string;
        offline: string;
        oof: string;
        background: string;
    };
    /**
     * Presence of the person to display - will not display presence if undefined.
     * @defaultvalue PersonaPresence.none
     */
    presence?: PersonaPresence;
    /**
     * Presence title to be shown as a tooltip on hover over the presence icon.
     */
    presenceTitle?: string;
    /**
     * This flag can be used to signal the persona is out of office.
     * This will change the way the presence icon looks for statuses that support dual-presence.
     */
    isOutOfOffice?: boolean;
    /**
     * Secondary text to display, usually the role of the user.
     */
    secondaryText?: string;
    /**
     * Tertiary text to display, usually the status of the user.
     * The tertiary text will only be shown when using size72 or size100.
     */
    tertiaryText?: string;
    /**
     * Optional text to display, usually a custom message set. The optional text will only be shown when using size100.
     */
    optionalText?: string;
    /**
     * Whether to not render persona details, and just render the persona image/initials.
     */
    hidePersonaDetails?: boolean;
    showSecondaryText?: boolean;
    /**
     * If true, show the special coin for unknown persona.
     * It has '?' in place of initials, with static font and background colors
     */
    showUnknownPersonaCoin?: boolean;
    /**
     * If true renders the initials while the image is loading.
     * This only applies when an imageUrl is provided.
     * @defaultvalue false
     */
    showInitialsUntilImageLoads?: boolean;
    /**
     * Optional custom persona coin size in pixel.
     */
    coinSize?: number;
    /**
     * Optional HTML element props for Persona coin.
     */
    coinProps?: IPersonaCoinProps;
    /**
     * Theme provided by High-Order Component.
     */
    theme?: ITheme;
    /**
     * Primary text to display, usually the name of the person.
     * @deprecated Use `text` instead.
     */
    primaryText?: string;
}

/**
 * {@docCategory Persona}
 */
export declare interface IPersonaStyleProps {
    /**
     * Theme provided by High-Order Component.
     */
    theme: ITheme;
    /**
     * Custom class name.
     */
    className?: string;
    /**
     * Optional custom persona coin size in pixel.
     */
    coinSize?: number;
    /**
     * Decides the size of the control.
     * @defaultvalue PersonaSize.size48
     */
    size?: PersonaSize;
    /**
     * Presence of the person to display - will not display presence if undefined.
     * @defaultvalue PersonaPresence.none
     */
    presence?: PersonaPresence;
    showSecondaryText?: boolean;
}

/**
 * {@docCategory Persona}
 */
export declare interface IPersonaStyles {
    root: IStyle;
    details: IStyle;
    primaryText: IStyle;
    secondaryText: IStyle;
    tertiaryText: IStyle;
    optionalText: IStyle;
    textContent: IStyle;
}

/**
 * {@docCategory Popup}
 */
export declare interface IPopupProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Aria role for popup
     */
    role?: string;
    /**
     * Accessible label text for the popup.
     */
    ariaLabel?: string;
    /**
     *  Defines the element id referencing the element containing label text for popup.
     */
    ariaLabelledBy?: string;
    /**
     * Defines the element id referencing the element containing the description for the popup.
     */
    ariaDescribedBy?: string;
    /**
     * A callback function for when the popup is dismissed from the close button or light dismiss. If provided, will
     * handle escape keypresses and call this. The event will be stopped/canceled.
     */
    onDismiss?: (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement> | KeyboardEvent) => any;
    /**
     *  Optional class name for the root popup div.
     */
    className?: string;
    /**
     * If true, when this component is unmounted, focus will be restored to the element that had focus when the component
     * first mounted.
     * @defaultvalue true
     * @deprecated use restoreFocus callback instead
     */
    shouldRestoreFocus?: boolean;
    /**
     * Called when the component is unmounting, and focus needs to be restored.
     * Argument passed down contains two variables, the element that the underlying
     * popup believes focus should go to * and whether or not the popup currently
     * contains focus. If this is provided, focus will not be restored automatically,
     * you'll need to call originalElement.focus()
     */
    onRestoreFocus?: (options: {
        originalElement?: HTMLElement | Window;
        containsFocus: boolean;
    }) => void;
}

/**
 * {@docCategory Coachmark}
 */
export declare interface IPositioningContainer {
}

/**
 * {@docCategory Coachmark}
 */
export declare interface IPositioningContainerProps extends IBaseProps<IPositioningContainer> {
    /**
     * All props for your component are to be defined here.
     */
    componentRef?: IRefObject<IPositioningContainer>;
    /**
     * The target that the positioningContainer should try to position itself based on.
     * It can be either an HTMLElement a querySelector string of a valid HTMLElement
     * or a MouseEvent. If MouseEvent is given then the origin point of the event will be used.
     */
    target?: HTMLElement | string | MouseEvent | Point | null;
    /**
     * How the element should be positioned
     * @defaultvalue DirectionalHint.BottomAutoEdge
     */
    directionalHint?: DirectionalHint;
    /**
     * How the element should be positioned in RTL layouts.
     * If not specified, a mirror of `directionalHint` will be used instead
     */
    directionalHintForRTL?: DirectionalHint;
    /**
     * The gap between the positioningContainer and the target
     * @defaultvalue 0
     */
    offsetFromTarget?: number;
    /**
     * Custom width for positioningContainer including borders. If value is 0, no width is applied.
     * @defaultvalue 0
     */
    positioningContainerWidth?: number;
    /**
     * The background color of the positioningContainer in hex format ie. #ffffff.
     * @defaultvalue $ms-color-white
     */
    backgroundColor?: string;
    /**
     * The bounding rectangle for which the contextual menu can appear in.
     */
    bounds?: IRectangle;
    /**
     * The minimum distance the positioningContainer will be away from the edge of the screen.
     *  @defaultvalue 8
     */
    minPagePadding?: number;
    /**
     * If true use a point rather than rectangle to position the positioningContainer.
     * For example it can be used to position based on a click.
     * @deprecated Do not use.
     */
    useTargetPoint?: boolean;
    /**
     * Point used to position the positioningContainer.
     * Deprecated, use `target` instead.
     * @deprecated Use `target` instead.
     */
    targetPoint?: Point;
    /**
     * If true then the onClose will not not dismiss on scroll
     * @defaultvalue false
     */
    preventDismissOnScroll?: boolean;
    /**
     * If true the position returned will have the menu element cover the target.
     * If false then it will position next to the target;
     * @defaultvalue false
     */
    coverTarget?: boolean;
    /**
     * Aria role assigned to the positioningContainer (Eg. dialog, alertdialog).
     */
    role?: string;
    /**
     * Accessible label text for positioningContainer.
     */
    ariaLabel?: string;
    /**
     *  Defines the element id referencing the element containing label text for positioningContainer.
     */
    ariaLabelledBy?: string;
    /**
     * Defines the element id referencing the element containing the description for the positioningContainer.
     */
    ariaDescribedBy?: string;
    /**
     * CSS class to apply to the positioningContainer.
     * @defaultvalue null
     */
    className?: string;
    /**
     * Optional callback when the layer content has mounted.
     */
    onLayerMounted?: () => void;
    /**
     * Optional callback that is called once the positioningContainer has been correctly positioned.
     * @param positions - gives the user information about how the container is positioned such
     * as the element position, the target edge, and the alignment edge of the container.
     */
    onPositioned?: (positions?: IPositionedData) => void;
    /**
     * Callback when the positioningContainer tries to close.
     */
    onDismiss?: (ev?: any) => void;
    /**
     * If true do not render on a new layer. If false render on a new layer.
     */
    doNotLayer?: boolean;
    /**
     * If true the position will not change sides in an attempt to fit the positioningContainer within bounds.
     * It will still attempt to align it to whatever bounds are given.
     * @defaultvalue false
     */
    directionalHintFixed?: boolean;
    /**
     * Specify the final height of the content.
     * To be used when expanding the content dynamically so that positioningContainer can adjust its position.
     */
    finalHeight?: number;
    /**
     * If true then the positioningContainer will attempt to focus the first focusable element that it contains.
     * If it doesn't find an element, no focus will be set and the method will return false.
     * This means that it's the contents responsibility to either set focus or have
     * focusable items.
     * @returns True if focus was set, false if it was not.
     */
    setInitialFocus?: boolean;
    /**
     * Set max height of positioningContainer
     * When not set the positioningContainer will expand with contents up to the bottom of the screen
     */
    positioningContainerMaxHeight?: number;
    /**
     * Child nodes to render
     */
    children?: ReactNode;
}

/**
 * @deprecated Use `IPositioningContainerProps`
 * {@docCategory Coachmark}
 */
export declare type IPositioningContainerTypes = IPositioningContainerProps;

/**
 * {@docCategory ResizeGroup}
 */
export declare interface IResizeGroup {
    /**
     * Remeasures the available space.
     */
    remeasure(): void;
}

/**
 * {@docCategory ResizeGroup}
 */
export declare interface IResizeGroupProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Optional callback to access the IResizeGroup interface. Use this instead of ref for accessing
     * the public methods and properties of the component.
     */
    componentRef?: IRefObject<IResizeGroup>;
    /**
     * Call to provide customized styling that will layer on top of the variant rules
     * @deprecated Removed to reduce bundle size.  Please use `className` and add css rules to `className` instead.
     */
    styles?: IStyleFunctionOrObject<IResizeGroupStyleProps, IResizeGroupStyles>;
    /**
     * Theme provided by HOC.
     */
    theme?: ITheme;
    /**
     * Additional css class to apply to the Component
     * @defaultvalue undefined
     */
    className?: string;
    /**
     * Direction of this resize group, vertical or horizontal
     * @defaultvalue ResizeGroupDirection.horizontal
     */
    direction?: ResizeGroupDirection;
    /**
     * Initial data to be passed to the `onRenderData` function. When there is no `onGrowData` provided, this data should
     * represent what should be passed to the render function when the parent container of the ResizeGroup is at its
     * maximum supported width. A `cacheKey` property may optionally be included as part of the data. Two data objects
     * with the same `cacheKey` will be assumed to take up the same width and will prevent measurements.
     * The type of `cacheKey` is a string.
     */
    data: any;
    /**
     * Function to render the data. Called when rendering the contents to the screen and when
     * rendering in a hidden div to measure the size of the contents.
     */
    onRenderData: (data: any) => JSX.Element;
    /**
     * Function to be performed on the data in order to reduce its width and make it fit into the given space.
     * If there are no more scaling steps to apply, it should return undefined to prevent
     * an infinite render loop.
     */
    onReduceData: (prevData: any) => any;
    /**
     * Function to be performed on the data in order to increase its width. It is called in scenarios where the
     * container has more room than the previous render and we may be able to fit more content. If there are no more
     * scaling operations to perform on teh data, it should return undefined to prevent an infinite render loop.
     */
    onGrowData?: (prevData: any) => any;
    /**
     * Function to be called every time data is rendered. It provides the data that was actually rendered.
     * A use case would be adding telemetry when a particular control is shown in an overflow well or
     * dropped as a result of onReduceData or to count the number of renders that an implementation of
     * onReduceData triggers.
     */
    dataDidRender?: (renderedData: any) => void;
}

export declare interface IResizeGroupState {
    /**
     * Final data used to render proper sized component
     */
    renderedData?: any;
    /**
     * Data to render in a hidden div for measurement
     */
    dataToMeasure?: any;
    /**
     * Set to true when the content container might have new dimensions and should
     * be remeasured.
     */
    measureContainer?: boolean;
    /**
     * Are we resizing to accommodate having more or less available space?
     * The 'grow' direction is when the container may have more room than the last render,
     * such as when a window resize occurs. This means we will try to fit more content in the window.
     * The 'shrink' direction is when the contents don't fit in the container and we need
     * to find a transformation of the data that makes everything fit.
     */
    resizeDirection?: 'grow' | 'shrink';
}

/**
 * {@docCategory ResizeGroup}
 */
export declare interface IResizeGroupStyleProps {
    /**
     * Accept theme prop.
     */
    theme: ITheme;
    /**
     * Accept custom classNames
     */
    className?: string;
}

/**
 * {@docCategory ResizeGroup}
 */
export declare interface IResizeGroupStyles {
    /**
     * Style for the root element.
     */
    root: IStyle;
}

/**
 * {@docCategory SearchBox}
 */
export declare interface ISearchBox {
    /**
     * Sets focus inside the search input box.
     */
    focus(): void;
    /**
     * Returns whether or not the SearchBox has focus
     */
    hasFocus(): boolean;
}

/**
 * {@docCategory SearchBox}
 */
export declare interface ISearchBoxProps extends React.InputHTMLAttributes<HTMLInputElement> {
    /**
     * Optional callback to access the ISearchBox interface. Use this instead of ref for accessing
     * the public methods and properties of the component.
     */
    componentRef?: React.Ref<ISearchBox>;
    /**
     * Placeholder for the search box.
     */
    placeholder?: string;
    /**
     * Deprecated. Use `placeholder` instead.
     * @deprecated Use `placeholder` instead.
     */
    labelText?: string;
    /**
     * Callback function for when the typed input for the SearchBox has changed.
     */
    onChange?: (event?: React.ChangeEvent<HTMLInputElement>, newValue?: string) => void;
    /**
     * Callback executed when the user presses enter in the search box.
     */
    onSearch?: (newValue: any) => void;
    /**
     * Callback executed when the user clears the search box by either clicking 'X' or hitting escape.
     */
    onClear?: (ev?: any) => void;
    /**
     * Callback executed when the user presses escape in the search box.
     */
    onEscape?: (ev?: any) => void;
    /**
     * Deprecated at v0.52.2, use `onChange` instead.
     * @deprecated Use `onChange` instead.
     */
    onChanged?: (newValue: any) => void;
    /**
     * The value of the text in the SearchBox.
     */
    value?: string;
    /**
     * The default value of the text in the SearchBox, in the case of an uncontrolled component.
     */
    defaultValue?: string;
    /**
     * CSS class to apply to the SearchBox.
     */
    className?: string;
    /**
     * The aria label of the SearchBox for the benefit of screen readers.
     */
    ariaLabel?: string;
    /**
     * The props for the clear button.
     */
    clearButtonProps?: IButtonProps;
    /**
     * The props for the icon.
     */
    iconProps?: Pick<IIconProps, Exclude<keyof IIconProps, 'className'>>;
    /**
     * Whether or not the SearchBox is underlined.
     * @defaultvalue false
     */
    underlined?: boolean;
    /**
     * Theme (provided through customization).
     */
    theme?: ITheme;
    /**
     * Call to provide customized styling that will layer on top of the variant rules.
     */
    styles?: IStyleFunctionOrObject<ISearchBoxStyleProps, ISearchBoxStyles>;
    /**
     * Whether or not to animate the SearchBox icon on focus.
     * @defaultvalue false
     */
    disableAnimation?: boolean;
}

/**
 * {@docCategory SearchBox}
 */
export declare interface ISearchBoxStyleProps {
    theme: ITheme;
    className?: string;
    disabled?: boolean;
    hasFocus?: boolean;
    underlined?: boolean;
    hasInput?: boolean;
    disableAnimation?: boolean;
}

/**
 * {@docCategory SearchBox}
 */
export declare interface ISearchBoxStyles {
    root?: IStyle;
    iconContainer?: IStyle;
    icon?: IStyle;
    field?: IStyle;
    clearButton?: IStyle;
}

export declare interface ISelectedItemProps<T> extends IPickerItemProps<T> {
    onCopyItem: (item: T) => void;
}

/**
 * {@docCategory SelectedPeopleList}
 */
export declare interface ISelectedPeopleItemProps extends ISelectedItemProps<IExtendedPersonaProps> {
    onExpandItem?: () => void;
    renderPersonaCoin?: IRenderFunction<IPersonaProps>;
    renderPrimaryText?: IRenderFunction<IPersonaProps>;
}

/**
 * {@docCategory SelectedPeopleList}
 */
export declare interface ISelectedPeopleProps extends IBaseSelectedItemsListProps<IExtendedPersonaProps> {
    onExpandGroup?: (item: IExtendedPersonaProps) => void;
    removeMenuItemText?: string;
    copyMenuItemText?: string;
    editMenuItemText?: string;
    getEditingItemText?: (item: IExtendedPersonaProps) => string;
    onRenderFloatingPicker?: React.ComponentType<IBaseFloatingPickerProps<IPersonaProps>>;
    floatingPickerProps?: IBaseFloatingPickerProps<IPersonaProps>;
}

/**
 * {@docCategory Slider}
 */
export declare interface ISlider {
    value: number | undefined;
    focus: () => void;
}

/**
 * {@docCategory Slider}
 */
export declare interface ISliderProps extends React.ClassAttributes<HTMLElement> {
    /**
     * Optional callback to access the ISlider interface. Use this instead of ref for accessing
     * the public methods and properties of the component.
     */
    componentRef?: IRefObject<ISlider>;
    /**
     * Call to provide customized styling that will layer on top of the variant rules.
     */
    styles?: IStyleFunctionOrObject<ISliderStyleProps, ISliderStyles>;
    /**
     * Theme provided by High-Order Component.
     */
    theme?: ITheme;
    /**
     * Description label of the Slider
     */
    label?: string;
    /**
     * The initial value of the Slider. Use this if you intend for the Slider to be an uncontrolled component.
     * This value is mutually exclusive to value. Use one or the other.
     */
    defaultValue?: number;
    /**
     * The initial value of the Slider. Use this if you intend to pass in a new value as a result of onChange events.
     * This value is mutually exclusive to defaultValue. Use one or the other.
     */
    value?: number;
    /**
     * The min value of the Slider
     * @defaultvalue 0
     */
    min?: number;
    /**
     * The max value of the Slider
     * @defaultvalue 10
     */
    max?: number;
    /**
     * The difference between the two adjacent values of the Slider
     * @defaultvalue 1
     */
    step?: number;
    /**
     * Whether to show the value on the right of the Slider.
     * @defaultvalue true
     */
    showValue?: boolean;
    /**
     * Callback when the value has been changed
     */
    onChange?: (value: number) => void;
    /**
     * Callback on mouse up or touch end
     */
    onChanged?: (event: MouseEvent | TouchEvent | KeyboardEvent, value: number) => void;
    /**
     * A description of the Slider for the benefit of screen readers.
     * @deprecated use aria-label instead.
     */
    ariaLabel?: string;
    /**
     * A description of the Slider for the benefit of screen readers.
     */
    'aria-label'?: string;
    /**
     * A text description of the Slider number value for the benefit of screen readers.
     * This should be used when the Slider number value is not accurately represented by a number.
     */
    ariaValueText?: (value: number) => string;
    /**
     * Optional flag to render the slider vertically. Defaults to rendering horizontal.
     */
    vertical?: boolean;
    /**
     * Optional flag to render the Slider as disabled.
     * @defaultvalue false
     */
    disabled?: boolean;
    /**
     * Optional flag to decide that thumb will snap to closest value while moving the slider
     * @defaultvalue false
     */
    snapToStep?: boolean;
    /**
     * Optional className to attach to the slider root element.
     */
    className?: string;
    /**
     * Optional mixin for additional props on the thumb button within the slider.
     */
    buttonProps?: React.HTMLAttributes<HTMLButtonElement>;
    /**
     * Optional function to format the slider value.
     */
    valueFormat?: (value: number) => string;
    /**
     * Optional flag to attach the origin of slider to zero. Helpful when the range include negatives.
     * @defaultvalue false
     */
    originFromZero?: boolean;
}

export declare type ISliderState = any;

/**
 * {@docCategory Slider}
 */
export declare type ISliderStyleProps = Required<Pick<ISliderProps, 'theme'>> & Pick<ISliderProps, 'className' | 'disabled' | 'vertical'> & {
    showTransitions?: boolean;
    showValue?: boolean;
    titleLabelClassName?: string;
};

/**
 * {@docCategory Slider}
 */
export declare interface ISliderStyles {
    /**
     * Style set for the root element.
     */
    root: IStyle;
    /**
     * Style set for the title label above the slider.
     */
    titleLabel: IStyle;
    /**
     * Style set for the container of the slider.
     */
    container: IStyle;
    /**
     * Style set for the actual box containting interactive elements of the slider.
     */
    slideBox: IStyle;
    /**
     * Style set for element that contains all the lines.
     */
    line: IStyle;
    /**
     * Style set for thumb of the slider.
     */
    thumb: IStyle;
    /**
     * Style set for both active and inactive sections of the line.
     */
    lineContainer: IStyle;
    /**
     * Style set for active portion of the line.
     */
    activeSection: IStyle;
    /**
     * Style set for inactive portion of the line.
     */
    inactiveSection: IStyle;
    /**
     * Style set for value label on right/below of the slider.
     */
    valueLabel: IStyle;
    /**
     * Style set for tick on 0 on number line. This element only shows up when originFromZero prop is true.
     */
    zeroTick: IStyle;
}

/**
 * {@docCategory SpinButton}
 */
export declare interface ISpinButton {
    /**
     * Current value of the control.
     */
    value?: string;
    /**
     * Sets focus to the control.
     */
    focus: () => void;
}

/**
 * {@docCategory SpinButton}
 */
export declare interface ISpinButtonProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Gets the component ref.
     */
    componentRef?: IRefObject<ISpinButton>;
    /**
     * Initial value of the control. Updates to this prop will not be respected.
     *
     * Use this if you intend for the SpinButton to be an uncontrolled component which maintains its own value.
     * Mutually exclusive with `value`.
     * @defaultvalue 0
     */
    defaultValue?: string;
    /**
     * Current value of the control.
     *
     * Use this if you intend to pass in a new value as a result of change events.
     * Mutually exclusive with `defaultValue`.
     */
    value?: string;
    /**
     * Min value of the control.
     * @defaultvalue 0
     */
    min?: number;
    /**
     * Max value of the control.
     * @defaultvalue 100
     */
    max?: number;
    /**
     * Difference between two adjacent values of the control.
     * This value is used to calculate the precision of the input if no `precision` is given.
     * The precision calculated this way will always be \>= 0.
     * @defaultvalue 1
     */
    step?: number;
    /**
     * A description of the control for the benefit of screen reader users.
     */
    ariaLabel?: string;
    /**
     * ID of a label which describes the control, if not using the default label.
     */
    ariaDescribedBy?: string;
    /**
     * A more descriptive title for the control, visible on its tooltip.
     */
    title?: string;
    /**
     * Whether or not the control is disabled.
     */
    disabled?: boolean;
    /**
     * Custom className for the control.
     */
    className?: string;
    /**
     * Descriptive label for the control.
     */
    label?: string;
    /**
     * Where to position the control's label.
     * @defaultvalue Left
     */
    labelPosition?: Position;
    /**
     * Props for an icon to display alongside the control's label.
     */
    iconProps?: IIconProps;
    /**
     * Callback for when the entered value should be validated.
     * @param value - The entered value to validate
     * @param event - The event that triggered this validate, if any (for accessibility)
     * @returns If a string is returned, it will be used as the new value
     */
    onValidate?: (value: string, event?: React.SyntheticEvent<HTMLElement>) => string | void;
    /**
     * Callback for when the increment button or up arrow key is pressed.
     * @returns If a string is returned, it will be used as the new value
     */
    onIncrement?: (value: string) => string | void;
    /**
     * Callback for when the decrement button or down arrow key is pressed.
     * @returns If a string is returned, it will be used as the new value
     */
    onDecrement?: (value: string) => string | void;
    /**
     * Callback for when the user focuses the control.
     */
    onFocus?: React.FocusEventHandler<HTMLInputElement>;
    /**
     * Callback for when the control loses focus.
     */
    onBlur?: React.FocusEventHandler<HTMLInputElement>;
    /**
     * Custom props for the increment button.
     */
    incrementButtonIcon?: IIconProps;
    /**
     * Custom props for the decrement button.
     */
    decrementButtonIcon?: IIconProps;
    /**
     * Custom styling for individual elements within the control.
     */
    styles?: IStyleFunctionOrObject<ISpinButtonStyleProps, ISpinButtonStyles>;
    /**
     * Custom styles for the up arrow button.
     *
     * Note: The buttons are in a checked state when arrow keys are used to incremenent/decrement
     * the SpinButton. Use `rootChecked` instead of `rootPressed` for styling when that is the case.
     */
    upArrowButtonStyles?: Partial<IButtonStyles>;
    /**
     * Custom styles for the down arrow button.
     *
     * Note: The buttons are in a checked state when arrow keys are used to incremenent/decrement
     * the SpinButton. Use `rootChecked` instead of `rootPressed` for styling when that is the case.
     */
    downArrowButtonStyles?: Partial<IButtonStyles>;
    /**
     * Theme provided by HOC.
     */
    theme?: ITheme;
    /**
     * Accessible label text for the increment button (for screen reader users).
     */
    incrementButtonAriaLabel?: string;
    /**
     * Accessible label text for the decrement button (for screen reader users).
     */
    decrementButtonAriaLabel?: string;
    /**
     * How many decimal places the value should be rounded to.
     *
     * The default is calculated based on the precision of `step`: i.e. if step = 1, precision = 0.
     * step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2.
     */
    precision?: number;
    /**
     * The position in the parent set (if in a set).
     */
    ariaPositionInSet?: number;
    /**
     * The total size of the parent set (if in a set).
     */
    ariaSetSize?: number;
    /**
     * Sets the control's aria-valuenow. This is the numeric form of `value`.
     * Providing this only makes sense when using as a controlled component.
     */
    ariaValueNow?: number;
    ariaValueText?: string;
    /**
     * Keytip for the control.
     */
    keytipProps?: IKeytipProps;
    /**
     * Additional props for the input field.
     */
    inputProps?: React.InputHTMLAttributes<HTMLElement | HTMLInputElement>;
    /**
     * Additional props for the up and down arrow buttons.
     */
    iconButtonProps?: IButtonProps_2;
}

/**
 * {@docCategory SpinButton}
 */
export declare interface ISpinButtonStyleProps {
    theme: ITheme;
    className: string | undefined;
    disabled: boolean;
    isFocused: boolean;
    keyboardSpinDirection: KeyboardSpinDirection;
    labelPosition: Position;
}

/**
 * {@docCategory SpinButton}
 */
export declare interface ISpinButtonStyles {
    /**
     * Styles for the root of the component.
     */
    root: IStyle;
    /**
     * Style for the label wrapper element, which contains the icon and label.
     */
    labelWrapper: IStyle;
    /**
     * Style for the icon.
     */
    icon: IStyle;
    /**
     * Style for the icon when the control is disabled.
     */
    /**
     * Style for the label text.
     */
    label: IStyle;
    /**
     * Style for the label text when the control is disabled.
     * @deprecated Disabled styles taken care by `Label` component.
     */
    /**
     * Style for the wrapper element of the input field and arrow buttons.
     */
    spinButtonWrapper: IStyle;
    /**
     * Style override when label is positioned at the top/bottom.
     */
    /**
     * Style override when control is enabled/hovered.
     */
    /**
     * Style override when SpinButton is enabled/focused.
     */
    /**
     * Style override when control is disabled.
     */
    /**
     * Styles for the input.
     */
    input: IStyle;
    /**
     * Style override for ::selection
     */
    /**
     * Style override when control is disabled.
     */
    /**
     * Styles for the arrowButtonsContainer
     */
    arrowButtonsContainer: IStyle;
}

/**
 * {@docCategory SwatchColorPicker}
 */
export declare interface ISwatchColorPickerProps {
    /**
     * Number of columns for the swatch color picker
     */
    columnCount: number;
    /**
     * ID for the swatch color picker's root element. Also used as a prefix for the IDs of color cells.
     */
    id?: string;
    /**
     * Additional class name to provide on the root element
     */
    className?: string;
    /**
     * The shape of the color cells.
     * @default 'circle'
     */
    cellShape?: 'circle' | 'square';
    /**
     * The ID of color cell that is currently selected
     */
    selectedId?: string;
    /**
     * The color cells that will be made available to the user.
     *
     * Note: When the reference to this prop changes, regardless of how many color cells change,
     * all of the color cells will be re-rendered (potentially bad perf) because we memoize
     * based on this prop's reference.
     */
    colorCells: IColorCellProps[];
    /**
     * Indicates whether the SwatchColorPicker is fully controlled.
     * When true, the component will not set its internal state to track the selected color.
     * Instead, the parent component will be responsible for handling state in the callbacks like
     * `onColorChanged`.
     *
     * NOTE: This property is a temporary workaround to force the component to be fully controllable
     * without breaking existing behavior
     */
    isControlled?: boolean;
    /**
     * Callback for when the user changes the color.
     * If `id` and `color` are unspecified, there is no selected cell.
     * (e.g. the user executed the currently selected cell to unselect it)
     */
    onColorChanged?: (id?: string, color?: string) => void;
    /**
     * Callback for when the user hovers over a color cell.
     * If `id` and `color` are unspecified, cells are no longer being hovered.
     */
    onCellHovered?: (id?: string, color?: string) => void;
    /**
     * Callback for when the user focuses a color cell.
     * If `id` and `color` are unspecified, cells are no longer being focused.
     */
    onCellFocused?: (id?: string, color?: string) => void;
    /**
     * Whether the control is disabled.
     */
    disabled?: boolean;
    /**
     * Position this grid is in the parent set (index in a parent menu, for example)
     */
    ariaPosInSet?: number;
    /**
     * @deprecated Use `ariaPosInSet`
     */
    positionInSet?: number;
    /**
     * Size of the parent set (size of parent menu, for example)
     */
    ariaSetSize?: number;
    /**
     * @deprecated Use `ariaSetSize`
     */
    setSize?: number;
    /**
     * Whether focus should cycle back to the beginning once the user navigates past the end (and vice versa).
     * Only relevant if `doNotContainWithinFocusZone` is not true.
     * @defaultvalue true
     */
    shouldFocusCircularNavigate?: boolean;
    /**
     * If false (the default), the grid is contained inside a FocusZone.
     * If true, a FocusZone is not used.
     * @default false
     */
    doNotContainWithinFocusZone?: boolean;
    /**
     * The distance between cells, in pixels
     * @defaultvalue 10
     */
    cellMargin?: number;
    /**
     * Height of an individual cell, in pixels
     * @defaultvalue 20
     */
    cellHeight?: number;
    /**
     * Width of an individual cell, in pixels
     * @defaultvalue 20
     */
    cellWidth?: number;
    /**
     * Width of the border indicating a hovered/selected cell, in pixels
     * @defaultvalue If `cellWidth` is less than 24px, then default value is 2px. Otherwise it defaults to 4px.
     */
    cellBorderWidth?: number;
    /**
     * Theme to apply to the component.
     */
    theme?: ITheme;
    /**
     * Styles for the component.
     */
    styles?: IStyleFunctionOrObject<ISwatchColorPickerStyleProps, ISwatchColorPickerStyles>;
    /**
     * Styles for the grid cells.
     */
    getColorGridCellStyles?: IStyleFunctionOrObject<IColorPickerGridCellStyleProps, IColorPickerGridCellStyles>;
    /**
     * Whether to update focus when a cell is hovered.
     * @defaultvalue false
     */
    focusOnHover?: boolean;
    /**
     * Selector to focus on mouse leave. Should only be used in conjunction with `focusOnHover`.
     */
    mouseLeaveParentSelector?: string | undefined;
}

export declare interface ISwatchColorPickerState {
    selectedIndex?: number;
}

/**
 * Properties required to build the styles for the color picker component.
 * {@docCategory SwatchColorPicker}
 */
export declare interface ISwatchColorPickerStyleProps {
    /**
     * Theme to apply to the container
     */
    theme: ITheme;
    /**
     * Custom className to apply to the container.
     */
    className?: string;
    /**
     * The distance between cells
     */
    cellMargin?: number;
}

/**
 * Styles for the Color Picker Component.
 * {@docCategory SwatchColorPicker}
 */
export declare interface ISwatchColorPickerStyles {
    /**
     * Style applied to the container grid.
     */
    root: IStyle;
    /**
     * Style for the table cells of the grid.
     */
    tableCell: IStyle;
    /**
     * Style for the FocusZone container for the grid.
     */
    focusedContainer?: IStyle;
}

/**
 * {@docCategory TextField}
 */
export declare interface ITextField {
    /** Gets the current value of the input. */
    value: string | undefined;
    /** Sets focus to the input. */
    focus: () => void;
    /** Blurs the input */
    blur: () => void;
    /** Select the value of the text field. */
    select: () => void;
    /** Sets the selection start of the text field to a specified value. */
    setSelectionStart: (value: number) => void;
    /** Sets the selection end of the text field to a specified value. */
    setSelectionEnd: (value: number) => void;
    /**
     * Sets the start and end positions of a selection in a text field.
     * Call with start and end set to the same value to set the cursor position.
     * @param start - Index of the start of the selection.
     * @param end - Index of the end of the selection.
     */
    setSelectionRange: (start: number, end: number) => void;
    /** Gets the selection start of the text field. Returns -1 if there is no selection. */
    selectionStart: number | null;
    /** Gets the selection end of the text field. Returns -1 if there is no selection. */
    selectionEnd: number | null;
}

/**
 * TextField component props.
 * {@docCategory TextField}
 */
export declare interface ITextFieldProps extends React.AllHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
    /**
     * Optional callback to access the ITextField component. Use this instead of ref for accessing
     * the public methods and properties of the component.
     */
    componentRef?: IRefObject<ITextField>;
    /**
     * Whether or not the text field is a multiline text field.
     * @defaultvalue false
     */
    multiline?: boolean;
    /**
     * For multiline text fields, whether or not the field is resizable.
     * @defaultvalue true
     */
    resizable?: boolean;
    /**
     * For multiline text fields, whether or not to auto adjust text field height.
     * @defaultvalue false
     */
    autoAdjustHeight?: boolean;
    /**
     * Whether or not the text field is underlined.
     * @defaultvalue false
     */
    underlined?: boolean;
    /**
     * Whether or not the text field is borderless.
     * @defaultvalue false
     */
    borderless?: boolean;
    /**
     * Label displayed above the text field (and read by screen readers).
     */
    label?: string;
    /**
     * Custom renderer for the label.
     * If you don't call defaultRender, ensure that you give your custom-rendered label an id and that
     * you set the textfield's aria-labelledby prop to that id.
     */
    onRenderLabel?: IRenderFunction<ITextFieldProps>;
    /**
     * Description displayed below the text field to provide additional details about what text to enter.
     */
    description?: string;
    /**
     * Custom renderer for the description.
     */
    onRenderDescription?: IRenderFunction<ITextFieldProps>;
    /**
     * Prefix displayed before the text field contents. This is not included in the value.
     * Ensure a descriptive label is present to assist screen readers, as the value does not include the prefix.
     */
    prefix?: string;
    /**
     * Suffix displayed after the text field contents. This is not included in the value.
     * Ensure a descriptive label is present to assist screen readers, as the value does not include the suffix.
     */
    suffix?: string;
    /**
     * Custom render function for prefix.
     */
    onRenderPrefix?: IRenderFunction<ITextFieldProps>;
    /**
     * Custom render function for suffix.
     */
    onRenderSuffix?: IRenderFunction<ITextFieldProps>;
    /**
     * Props for an optional icon, displayed in the far right end of the text field.
     */
    iconProps?: IIconProps;
    /**
     * Default value of the text field. Only provide this if the text field is an uncontrolled component;
     * otherwise, use the `value` property.
     */
    defaultValue?: string;
    /**
     * Current value of the text field. Only provide this if the text field is a controlled component where you
     * are maintaining its current state; otherwise, use the `defaultValue` property.
     */
    value?: string;
    /**
     * Disabled state of the text field.
     * @defaultvalue false
     */
    disabled?: boolean;
    /**
     * If true, the text field is readonly.
     * @defaultvalue false
     */
    readOnly?: boolean;
    /**
     * Static error message displayed below the text field. Use `onGetErrorMessage` to dynamically
     * change the error message displayed (if any) based on the current value. `errorMessage` and
     * `onGetErrorMessage` are mutually exclusive (`errorMessage` takes precedence).
     */
    errorMessage?: string | JSX.Element;
    /**
     * Callback for when the input value changes.
     * This is called on both `input` and `change` events.
     * (In a later version, this will probably only be called for the `change` event.)
     */
    onChange?: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;
    /**
     * Function called after validation completes.
     */
    onNotifyValidationResult?: (errorMessage: string | JSX.Element, value: string | undefined) => void;
    /**
     * Function used to determine whether the input value is valid and get an error message if not.
     * Mutually exclusive with the static string `errorMessage` (it will take precedence over this).
     *
     * When it returns `string | JSX.Element`:
     * - If valid, it returns empty string.
     * - If invalid, it returns the error message and the text field will
     *   show a red border and show an error message below the text field.
     *
     * When it returns `Promise<string | JSX.Element>`:
     * - The resolved value is displayed as the error message.
     * - If rejected, the value is thrown away.
     */
    onGetErrorMessage?: (value: string) => string | JSX.Element | PromiseLike<string | JSX.Element> | undefined;
    /**
     * Text field will start to validate after users stop typing for `deferredValidationTime` milliseconds.
     * Updates to this prop will not be respected.
     * @defaultvalue 200
     */
    deferredValidationTime?: number;
    /**
     * Optional class name that is added to the container of the component.
     */
    className?: string;
    /**
     * Optional class name that is added specifically to the input/textarea element.
     */
    inputClassName?: string;
    /**
     * Aria label for the text field.
     */
    ariaLabel?: string;
    /**
     * Run validation when focus moves into the input, and **do not** validate on change.
     *
     * (Unless this prop and/or `validateOnFocusOut` is set to true, validation will run on every change.)
     * @defaultvalue false
     */
    validateOnFocusIn?: boolean;
    /**
     * Run validation when focus moves out of the input, and **do not** validate on change.
     *
     * (Unless this prop and/or `validateOnFocusIn` is set to true, validation will run on every change.)
     * @defaultvalue false
     */
    validateOnFocusOut?: boolean;
    /**
     * Whether validation should run when the input is initially rendered.
     * @defaultvalue true
     */
    validateOnLoad?: boolean;
    /**
     * Theme (provided through customization).
     */
    theme?: ITheme;
    /**
     * Call to provide customized styling that will layer on top of the variant rules.
     */
    styles?: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldStyles>;
    /**
     * Whether the input field should have autocomplete enabled.
     * This tells the browser to display options based on earlier typed values.
     * Common values are 'on' and 'off' but for all possible values see the following links:
     * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values
     * https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
     */
    autoComplete?: string;
    /**
     * Only used by MaskedTextField:
     * The masking string that defines the mask's behavior.
     * A backslash will escape any character.
     * Special format characters are:
     * '9': [0-9]
     * 'a': [a-zA-Z]
     * '*': [a-zA-Z0-9]
     *
     * @example `Phone Number: (999) 999-9999`
     */
    mask?: string;
    /**
     * Only used by MaskedTextField:
     * The character to show in place of unfilled characters of the mask.
     * @defaultvalue '_'
     */
    maskChar?: string;
    /**
     * Only used by MaskedTextField:
     * An object defining the format characters and corresponding regexp values.
     * Default format characters: \{
     *  '9': /[0-9]/,
     *  'a': /[a-zA-Z]/,
     *  '*': /[a-zA-Z0-9]/
     * \}
     */
    maskFormat?: {
        [key: string]: RegExp;
    };
}

/** @internal */
export declare interface ITextFieldSnapshot {
    /**
     * If set, the text field is changing between single- and multi-line, so we'll need to reset
     * selection/cursor after the change completes.
     */
    selection?: [number | null, number | null];
}

/** @internal */
export declare interface ITextFieldState {
    /** The currently displayed value if uncontrolled. */
    uncontrolledValue: string | undefined;
    /** Is true when the control has focus. */
    isFocused?: boolean;
    /**
     * Dynamic error message returned by `onGetErrorMessage`.
     * Use `this._errorMessage` to get the actual current error message.
     */
    errorMessage: string | JSX.Element;
}

/**
 * {@docCategory TextField}
 */
export declare type ITextFieldStyleProps = Required<Pick<ITextFieldProps, 'theme'>> & Pick<ITextFieldProps, 'className' | 'disabled' | 'inputClassName' | 'required' | 'multiline' | 'borderless' | 'resizable' | 'underlined' | 'autoAdjustHeight'> & {
    /** Element has an error message. */
    hasErrorMessage?: boolean;
    /** Element has an icon. */
    hasIcon?: boolean;
    /** Element has a label. */
    hasLabel?: boolean;
    /** Element has focus. */
    focused?: boolean;
};

/**
 * {@docCategory TextField}
 */
export declare interface ITextFieldStyles extends IStyleSet<ITextFieldStyles> {
    /**
     * Style for root element.
     */
    root: IStyle;
    /**
     * Style for field group encompassing entry area (prefix, field, icon and suffix).
     */
    fieldGroup: IStyle;
    /**
     * Style for prefix element.
     */
    prefix: IStyle;
    /**
     * Style for suffix element.
     */
    suffix: IStyle;
    /**
     * Style for main field entry element.
     */
    field: IStyle;
    /**
     * Style for icon prop element.
     */
    icon: IStyle;
    /**
     * Style for description element.
     */
    description: IStyle;
    /**
     * Style for TextField wrapper element.
     */
    wrapper: IStyle;
    /**
     * Style for error message element.
     */
    errorMessage: IStyle;
    /**
     * Styling for subcomponents.
     */
    subComponentStyles: ITextFieldSubComponentStyles;
}

/**
 * {@docCategory TextField}
 */
export declare interface ITextFieldSubComponentStyles {
    /**
     * Styling for Label child component.
     */
    label: IStyleFunctionOrObject<any, any>;
}

/**
 * {@docCategory Toggle}
 */
export declare interface IToggle {
    focus: () => void;
}

/**
 * {@docCategory Toggle}
 */
export declare interface IToggleOptions {
}

/**
 * Toggle component props.
 * {@docCategory Toggle}
 */
export declare interface IToggleProps extends React.HTMLAttributes<HTMLElement> {
    /**
     * Render the root element as another type.
     */
    as?: IComponentAs<React.HTMLAttributes<HTMLElement>> | React.ElementType;
    /**
     * Optional callback to access the IToggle interface. Use this instead of ref for accessing
     * the public methods and properties of the component.
     */
    componentRef?: IRefObject<IToggle>;
    /**
     * A label for the toggle.
     */
    label?: string | JSX.Element;
    /**
     * Text to display when toggle is ON.
     * Caution: when not providing on/off text user may get confused in differentiating the on/off states of the toggle.
     */
    onText?: string;
    /**
     * Text to display when toggle is OFF.
     * Caution: when not providing on/off text user may get confused in differentiating the on/off states of the toggle.
     */
    offText?: string;
    /**
     * Text for screen-reader to announce as the name of the toggle.
     */
    ariaLabel?: string;
    /**
     * @deprecated Use `ariaLabel` for name, and let the metadata convey state
     */
    onAriaLabel?: string;
    /**
     * @deprecated Use `ariaLabel` for name, and let the metadata convey state
     */
    offAriaLabel?: string;
    /**
     * Checked state of the toggle. If you are maintaining state yourself, use this property.
     * Otherwise use `defaultChecked`.
     */
    checked?: boolean;
    /**
     * Initial state of the toggle. If you want the toggle to maintain its own state, use this.
     * Otherwise use `checked`.
     */
    defaultChecked?: boolean;
    /**
     * Optional disabled flag.
     */
    disabled?: boolean;
    /**
     * Whether the label (not the onText/offText) should be positioned inline with the toggle control.
     * Left (right in RTL) side when on/off text provided VS right (left in RTL) side when no on/off text.
     * Caution: when not providing on/off text user may get confused in differentiating the on/off states of the toggle.
     */
    inlineLabel?: boolean;
    /**
     * Callback issued when the value changes.
     */
    onChange?: (event: React.MouseEvent<HTMLElement>, checked?: boolean) => void;
    /**
     * @deprecated Use `onChange` instead.
     */
    onChanged?: (checked: boolean) => void;
    /**
     * Theme provided by HOC.
     */
    theme?: ITheme;
    /**
     * Optional styles for the component.
     */
    styles?: IStyleFunctionOrObject<IToggleStyleProps, IToggleStyles>;
    /**
     * Optional keytip.
     *
     * @deprecated This no longer works. Use `useKeytipData` hook instead.
     */
    keytipProps?: IKeytipProps;
    /**
     * (Optional) Specify whether to use the "switch" role (ARIA 1.1) or the checkbox role (ARIA 1.0).
     * If unspecified, defaults to "switch".
     */
    role?: 'checkbox' | 'switch' | 'menuitemcheckbox';
}

/**
 * {@docCategory Toggle}
 */
export declare type IToggleSlotProps = {
    [key in keyof IToggleSlots]: IToggleProps[key];
};

/**
 * {@docCategory Toggle}
 */
export declare interface IToggleSlots {
}

/**
 * Properties required to build the styles for the Toggle component.
 * {@docCategory Toggle}
 */
export declare interface IToggleStyleProps {
    /**
     * Theme values.
     */
    theme: ITheme;
    /**
     * Root element class name.
     */
    className?: string;
    /**
     * Component is disabled.
     */
    disabled?: boolean;
    /**
     * Component is checked.
     */
    checked?: boolean;
    /**
     * Whether label should be positioned inline with the toggle.
     */
    inlineLabel?: boolean;
    /**
     * Whether the user did not specify a on/off text. Influencing only when inlineLabel is used.
     */
    onOffMissing?: boolean;
}

/**
 * Styles for the Toggle component.
 * {@docCategory Toggle}
 */
export declare interface IToggleStyles {
    /** Root element. */
    root: IStyle;
    /**
     * Label element above the toggle.
     */
    label: IStyle;
    /**
     * Container for the toggle pill and the text next to it.
     */
    container: IStyle;
    /**
     * Pill, rendered as a button.
     */
    pill: IStyle;
    /**
     * Thumb inside of the pill.
     */
    thumb: IStyle;
    /**
     * Text next to the pill.
     */
    text: IStyle;
}

/**
 * {@docCategory SpinButton}
 */
export declare enum KeyboardSpinDirection {
    down = -1,
    notSpinning = 0,
    up = 1
}

export declare const Link: React.FunctionComponent<ILinkProps>;

export declare const LinkBase: import("@fluentui/react-compose").ComponentWithAs<"a", ILinkProps>;

/**
 * {@docCategory Link}
 */
export declare type LinkSlotProps = {
    [key in keyof ILinkSlots]: ILinkProps[key];
};

export declare class MaskedTextField extends React.Component<ITextFieldProps, IMaskedTextFieldState> implements ITextField {
    static defaultProps: ITextFieldProps;
    private _textField;
    /**
     *  An array of data containing information regarding the format characters,
     *  their indices inside the display text, and their corresponding values.
     * @example
     * ```
     *  [
     *    { value: '1', displayIndex: 16, format: /[0-9]/ },
     *    { value: '2', displayIndex: 17, format: /[0-9]/ },
     *    { displayIndex: 18, format: /[0-9]/ },
     *    { value: '4', displayIndex: 22, format: /[0-9]/ },
     *    ...
     *  ]
     * ```
     */
    private _maskCharData;
    /** True if the TextField is focused */
    private _isFocused;
    /** True if the TextField was not focused and it was clicked into */
    private _moveCursorOnMouseUp;
    /** The stored selection data prior to input change events. */
    private _changeSelectionData;
    constructor(props: ITextFieldProps);
    UNSAFE_componentWillReceiveProps(newProps: ITextFieldProps): void;
    componentDidUpdate(): void;
    render(): JSX.Element;
    /**
     * @returns The value of all filled format characters or undefined if not all format characters are filled
     */
    readonly value: string | undefined;
    setValue(newValue: string): void;
    focus(): void;
    blur(): void;
    select(): void;
    setSelectionStart(value: number): void;
    setSelectionEnd(value: number): void;
    setSelectionRange(start: number, end: number): void;
    readonly selectionStart: number | null;
    readonly selectionEnd: number | null;
    private _onFocus;
    private _onBlur;
    private _onMouseDown;
    private _onMouseUp;
    private _onInputChange;
    private _onKeyDown;
    private _onPaste;
}

export declare const MeasuredContext: React.Context<{
    isMeasured: boolean;
}>;

export declare const Modal: React.FunctionComponent<IModalProps>;

export declare class ModalBase extends React.Component<IModalProps, IDialogState> implements IModal {
    static defaultProps: IModalProps;
    private _onModalCloseTimer;
    private _focusTrapZone;
    private _scrollableContent;
    private _lastSetX;
    private _lastSetY;
    private _allowTouchBodyScroll;
    private _hasRegisteredKeyUp;
    private _async;
    private _events;
    constructor(props: IModalProps);
    UNSAFE_componentWillReceiveProps(newProps: IModalProps): void;
    componentDidMount(): void;
    componentDidUpdate(prevProps: IModalProps, prevState: IDialogState): void;
    componentWillUnmount(): void;
    render(): JSX.Element | null;
    focus(): void;
    private _allowScrollOnModal;
    private _onModalContextMenuClose;
    private _onModalClose;
    private _onDragStart;
    private _onDrag;
    private _onDragStop;
    private _onKeyUp;
    private _onKeyDown;
    private _getMoveDelta;
    private _onEnterKeyboardMoveMode;
    private _onExitKeyboardMoveMode;
    private _registerForKeyUp;
}

export declare const ONKEYDOWN_TIMEOUT_DURATION = 1000;

export declare const OverflowSet: React.FunctionComponent<IOverflowSetProps>;

export declare class OverflowSetBase extends React.Component<IOverflowSetProps, {}> implements IOverflowSet {
    private _focusZone;
    private _persistedKeytips;
    private _keytipManager;
    private _divContainer;
    private _classNames;
    constructor(props: IOverflowSetProps);
    render(): JSX.Element;
    /**
     * Sets focus to the first tabbable item in the OverflowSet.
     * @param forceIntoFirstElement - If true, focus will be forced into the first element,
     * even if focus is already in theOverflowSet
     * @returns True if focus could be set to an active element, false if no operation was taken.
     */
    focus(forceIntoFirstElement?: boolean): boolean;
    /**
     * Sets focus to a specific child element within the OverflowSet.
     * @param childElement - The child element within the zone to focus.
     * @returns True if focus could be set to an active element, false if no operation was taken.
     */
    focusElement(childElement?: HTMLElement): boolean;
    componentDidMount(): void;
    componentWillUnmount(): void;
    UNSAFE_componentWillUpdate(): void;
    componentDidUpdate(): void;
    private _registerPersistedKeytips;
    private _unregisterPersistedKeytips;
    private _onRenderItems;
    private _onRenderOverflowButtonWrapper;
    /**
     * Gets the subMenu for an overflow item
     * Checks if itemSubMenuProvider has been defined, if not defaults to subMenuProps
     */
    private _getSubMenuForItem;
}

/**
 * Personas are used for rendering an individual's avatar, presence and details.
 * They are used within the PeoplePicker components.
 */
export declare const Persona: React.FunctionComponent<IPersonaProps>;

/**
 * Persona with no default styles.
 * [Use the `styles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)
 */
export declare const PersonaBase: React.ForwardRefExoticComponent<IPersonaProps & React.RefAttributes<HTMLDivElement>>;

/**
 * PersonaCoin is used to render an individual's avatar and presence.
 */
export declare const PersonaCoin: React.FunctionComponent<IPersonaCoinProps>;

/**
 * PersonaCoin with no default styles.
 * [Use the `getStyles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)
 */
export declare const PersonaCoinBase: React.ForwardRefExoticComponent<IPersonaCoinProps & React.RefAttributes<HTMLDivElement>>;

/**
 * {@docCategory Persona}
 */
export declare enum PersonaInitialsColor {
    lightBlue = 0,
    blue = 1,
    darkBlue = 2,
    teal = 3,
    lightGreen = 4,
    green = 5,
    darkGreen = 6,
    lightPink = 7,
    pink = 8,
    magenta = 9,
    purple = 10,
    /**
     * Black can result in offensive persona coins with some initials combinations, so it can only be set with overrides.
     * @deprecated will be removed in a future major release.
     */
    black = 11,
    orange = 12,
    /**
     * Red often has a special meaning, so it is considered a reserved color and can only be set with overrides.
     * @deprecated will be removed in a future major release.
     */
    red = 13,
    darkRed = 14,
    /**
     * Transparent is not intended to be used with typical initials due to accessibility issues.
     * Its primary use is for overflow buttons, so it is considered a reserved color and can only be set with overrides.
     */
    transparent = 15,
    violet = 16,
    lightRed = 17,
    gold = 18,
    burgundy = 19,
    warmGray = 20,
    coolGray = 21,
    /**
     * Gray can result in offensive persona coins with some initials combinations, so it can only be set with overrides.
     */
    gray = 22,
    cyan = 23,
    rust = 24
}

/**
 * {@docCategory Persona}
 */
export declare enum PersonaPresence {
    none = 0,
    offline = 1,
    online = 2,
    away = 3,
    dnd = 4,
    blocked = 5,
    busy = 6
}

export declare namespace personaPresenceSize {
    const size6 = "6px";
    const size8 = "8px";
    const size12 = "12px";
    const size16 = "16px";
    const size20 = "20px";
    const size28 = "28px";
    const size32 = "32px";
    /**
     * @deprecated This is now unused
     */
    const border = "2px";
}

/**
 * {@docCategory Persona}
 */
export declare enum PersonaSize {
    /**
     * `tiny` size has been deprecated in favor of standardized numeric sizing. Use `size8` instead.
     * @deprecated Use `size8` instead.
     */
    tiny = 0,
    /**
     *
     * `extraExtraSmall` size has been deprecated in favor of standardized numeric sizing. Use `size24` instead.
     * @deprecated Use `size24` instead.
     */
    extraExtraSmall = 1,
    /**
     * `extraSmall` size has been deprecated in favor of standardized numeric sizing. Use `size32` instead.
     * @deprecated Use `size32` instead.
     */
    extraSmall = 2,
    /**
     * `small` size has been deprecated in favor of standardized numeric sizing. Use `size40` instead.
     * @deprecated Use `size40` instead.
     */
    small = 3,
    /**
     * `regular` size has been deprecated in favor of standardized numeric sizing. Use `size48` instead.
     * @deprecated Use `size48` instead.
     */
    regular = 4,
    /**
     * `large` size has been deprecated in favor of standardized numeric sizing. Use `size72` instead.
     * @deprecated Use `size72` instead.
     */
    large = 5,
    /**
     * `extraLarge` size has been deprecated in favor of standardized numeric sizing. Use `size100` instead.
     * @deprecated Use `size100` instead.
     */
    extraLarge = 6,
    /**
     * No `PersonaCoin` is rendered.
     */
    size8 = 17,
    /**
     * No `PersonaCoin` is rendered. Deprecated in favor of `size8` to align with design specifications.
     * @deprecated Use `size8` instead. Will be removed in a future major release.
     */
    size10 = 9,
    /**
     * Renders a 16px `PersonaCoin`. Deprecated due to not being in the design specification.
     * @deprecated Will be removed in a future major release.
     */
    size16 = 8,
    /**
     * Renders a 24px `PersonaCoin`.
     */
    size24 = 10,
    /**
     * Renders a 28px `PersonaCoin`. Deprecated due to not being in the design specification.
     * @deprecated Will be removed in a future major release.
     */
    size28 = 7,
    /**
     * Renders a 32px `PersonaCoin`.
     */
    size32 = 11,
    /**
     * Renders a 40px `PersonaCoin`.
     */
    size40 = 12,
    /**
     * Renders a 48px `PersonaCoin`.
     */
    size48 = 13,
    /**
     * Renders a 56px `PersonaCoin`.
     */
    size56 = 16,
    /**
     * Renders a 72px `PersonaCoin`.
     */
    size72 = 14,
    /**
     * Renders a 100px `PersonaCoin`.
     */
    size100 = 15,
    /**
     * Renders a 120px `PersonaCoin`.
     */
    size120 = 18
}

export declare namespace personaSize {
    const size8 = "20px";
    const size10 = "20px";
    const size16 = "16px";
    const size24 = "24px";
    const size28 = "28px";
    const size32 = "32px";
    const size40 = "40px";
    const size48 = "48px";
    const size56 = "56px";
    const size72 = "72px";
    const size100 = "100px";
    const size120 = "120px";
}

/**
 * This adds accessibility to Dialog and Panel controls
 */
export declare const Popup: React.ForwardRefExoticComponent<IPopupProps & React.RefAttributes<HTMLDivElement>>;

export declare const PositioningContainer: React.ForwardRefExoticComponent<IPositioningContainerProps & React.RefAttributes<HTMLDivElement>>;

export declare const presenceBoolean: (presence: PersonaPresence) => {
    isAvailable: boolean;
    isAway: boolean;
    isBlocked: boolean;
    isBusy: boolean;
    isDoNotDisturb: boolean;
    isOffline: boolean;
};

export declare const ResizeGroup: import("react").ForwardRefExoticComponent<import("./ResizeGroup.types").IResizeGroupProps & import("react").RefAttributes<HTMLDivElement>>;

export declare const ResizeGroupBase: React.ForwardRefExoticComponent<IResizeGroupProps & React.RefAttributes<HTMLDivElement>>;

/**
 * {@docCategory ResizeGroup}
 */
export declare enum ResizeGroupDirection {
    horizontal = 0,
    vertical = 1
}

export declare const SearchBox: React.FunctionComponent<ISearchBoxProps>;

export declare const SearchBoxBase: React.ForwardRefExoticComponent<ISearchBoxProps & React.RefAttributes<HTMLDivElement>>;

/**
 * Standard People Picker.
 */
export declare class SelectedPeopleList extends BasePeopleSelectedItemsList {
    static defaultProps: any;
    protected renderItems: () => JSX.Element[];
    private _renderItem;
    private _beginEditing;
    private _completeEditing;
    private _createMenuItems;
}

export declare const sizeBoolean: (size: PersonaSize) => {
    isSize8: boolean;
    isSize10: boolean;
    isSize16: boolean;
    isSize24: boolean;
    isSize28: boolean;
    isSize32: boolean;
    isSize40: boolean;
    isSize48: boolean;
    isSize56: boolean;
    isSize72: boolean;
    isSize100: boolean;
    isSize120: boolean;
};

export declare const sizeToPixels: {
    [key: number]: number;
};

export declare const Slider: React.FunctionComponent<ISliderProps>;

export declare const SliderBase: React.ForwardRefExoticComponent<Pick<ISliderProps, "max" | "disabled" | "label" | "vertical" | "key" | "step" | "theme" | "styles" | "className" | "defaultValue" | "aria-label" | "onChange" | "componentRef" | "min" | "value" | "ariaLabel" | "onChanged" | "showValue" | "ariaValueText" | "snapToStep" | "buttonProps" | "valueFormat" | "originFromZero"> & React.RefAttributes<HTMLDivElement>>;

/**
 * The SpinButton control and related tabs pattern are used for navigating frequently accessed,
 * distinct content categories. SpinButtons allow for navigation between two or more content
 * views and relies on text headers to articulate the different sections of content.
 */
export declare const SpinButton: React.FunctionComponent<ISpinButtonProps>;

export declare const SwatchColorPicker: React.FunctionComponent<ISwatchColorPickerProps>;

export declare class SwatchColorPickerBase extends React.Component<ISwatchColorPickerProps, ISwatchColorPickerState> {
    static defaultProps: ISwatchColorPickerProps;
    private _id;
    private _cellFocused;
    private navigationIdleTimeoutId;
    private isNavigationIdle;
    private readonly navigationIdleDelay;
    private async;
    private _getItemsWithIndex;
    constructor(props: ISwatchColorPickerProps);
    UNSAFE_componentWillReceiveProps(newProps: ISwatchColorPickerProps): void;
    componentWillUnmount(): void;
    render(): JSX.Element | null;
    /**
     * When the whole swatchColorPicker is blurred,
     * make sure to clear the pending focused stated
     */
    private _onSwatchColorPickerBlur;
    /**
     * Get the selected item's index
     * @param items - The items to search
     * @param selectedId - The selected item's id to find
     * @returns - The index of the selected item's id, -1 if there was no match
     */
    private _getSelectedIndex;
    /**
     * Render a color cell
     * @param item - The item to render
     * @returns - Element representing the item
     */
    private _renderOption;
    /**
     * Callback passed to the GridCell that will manage triggering the onCellHovered callback for mouseEnter
     */
    private _onMouseEnter;
    /**
     * Callback passed to the GridCell that will manage Hover/Focus updates
     */
    private _onMouseMove;
    /**
     * Callback passed to the GridCell that will manage Hover/Focus updates
     */
    private _onMouseLeave;
    /**
     * Callback to make sure we don't update the hovered element during mouse wheel
     */
    private _onWheel;
    /**
     * Callback that
     */
    private _onKeyDown;
    /**
     * Sets a timeout so we won't process any mouse "hover" events
     * while navigating (via mouseWheel or arrowKeys)
     */
    private _setNavigationTimeout;
    /**
     * Callback passed to the GridCell class that will trigger the onCellHovered callback of the SwatchColorPicker
     * NOTE: This will not be triggered if shouldFocusOnHover === true
     */
    private _onGridCellHovered;
    /**
     * Callback passed to the GridCell class that will trigger the onCellFocus callback of the SwatchColorPicker
     */
    private _onGridCellFocused;
    /**
     * Handle the click on a cell
     * @param item - The cell that the click was fired against
     */
    private _onCellClick;
}

/**
 * {@docCategory Callout}
 */
export declare type Target = Element | string | MouseEvent | Point | null | React.RefObject<Element>;

export declare const TextField: React.FunctionComponent<ITextFieldProps>;

export declare class TextFieldBase extends React.Component<ITextFieldProps, ITextFieldState, ITextFieldSnapshot> implements ITextField {
    static defaultProps: ITextFieldProps;
    /** Fallback ID if none is provided in props. Access proper value via `this._id`. */
    private _fallbackId;
    private _descriptionId;
    private _labelId;
    private _delayedValidate;
    private _lastValidation;
    private _latestValidateValue;
    private _hasWarnedNullValue;
    private _textElement;
    private _classNames;
    private _async;
    /** Most recent value from a change or input event, to help avoid processing events twice */
    private _lastChangeValue;
    constructor(props: ITextFieldProps);
    /**
     * Gets the current value of the text field.
     */
    readonly value: string | undefined;
    componentDidMount(): void;
    componentWillUnmount(): void;
    getSnapshotBeforeUpdate(prevProps: ITextFieldProps, prevState: ITextFieldState): ITextFieldSnapshot | null;
    componentDidUpdate(prevProps: ITextFieldProps, prevState: ITextFieldState, snapshot: ITextFieldSnapshot): void;
    render(): JSX.Element;
    /**
     * Sets focus on the text field
     */
    focus(): void;
    /**
     * Blurs the text field.
     */
    blur(): void;
    /**
     * Selects the text field
     */
    select(): void;
    /**
     * Sets the selection start of the text field to a specified value
     */
    setSelectionStart(value: number): void;
    /**
     * Sets the selection end of the text field to a specified value
     */
    setSelectionEnd(value: number): void;
    /**
     * Gets the selection start of the text field
     */
    readonly selectionStart: number | null;
    /**
     * Gets the selection end of the text field
     */
    readonly selectionEnd: number | null;
    /**
     * Sets the start and end positions of a selection in a text field.
     * @param start - Index of the start of the selection.
     * @param end - Index of the end of the selection.
     */
    setSelectionRange(start: number, end: number): void;
    private _warnControlledUsage;
    /** Returns `props.id` if available, or a fallback if not. */
    private readonly _id;
    private readonly _isControlled;
    private _onFocus;
    private _onBlur;
    private _onRenderLabel;
    private _onRenderDescription;
    private _onRenderPrefix;
    private _onRenderSuffix;
    /**
     * Current error message from either `props.errorMessage` or the result of `props.onGetErrorMessage`.
     *
     * - If there is no validation error or we have not validated the input value, errorMessage is an empty string.
     * - If we have done the validation and there is validation error, errorMessage is the validation error message.
     */
    private readonly _errorMessage;
    /**
     * If a custom description render function is supplied then treat description as always available.
     * Otherwise defer to the presence of description or error message text.
     */
    private readonly _isDescriptionAvailable;
    private _renderTextArea;
    private _renderInput;
    private _onInputChange;
    private _validate;
    private _notifyAfterValidate;
    private _adjustInputHeight;
}

export declare const Toggle: React.FunctionComponent<IToggleProps & React.RefAttributes<HTMLDivElement>>;

export declare const ToggleBase: import("@fluentui/react-compose").ComponentWithAs<"div", IToggleProps>;

export declare function useHeightOffset({ finalHeight }: IPositioningContainerProps, contentHost: React.RefObject<HTMLDivElement | null>): number;

/**
 * The useLink hook processes the Link component props and returns
 * state, slots and slotProps for consumption by the component.
 */
export declare const useLink: (props: ILinkProps, forwardedRef: React.Ref<HTMLElement>) => any;

export declare const useToggle: (props: IToggleProps, ref: React.Ref<HTMLDivElement>, options: ComposePreparedOptions<{}, any, {}>) => any;

export * from "@fluentui/react-button/lib/Button";
export * from "@fluentui/react-button/lib/MenuButton";
export * from "@fluentui/react-button/lib/SplitButton";
export * from "@fluentui/react-button/lib/ToggleButton";
export * from "@fluentui/react-tabs/lib/Pivot";
export * from "@fluentui/react-theme-provider";
export * from "@uifabric/date-time/lib/Calendar";
export * from "@uifabric/date-time/lib/DatePicker";
export * from "office-ui-fabric-react/lib/ActivityItem";
export * from "office-ui-fabric-react/lib/Announced";
export * from "office-ui-fabric-react/lib/Autofill";
export * from "office-ui-fabric-react/lib/Breadcrumb";
export * from "office-ui-fabric-react/lib/Check";
export * from "office-ui-fabric-react/lib/ChoiceGroup";
export * from "office-ui-fabric-react/lib/Color";
export * from "office-ui-fabric-react/lib/ColorPicker";
export * from "office-ui-fabric-react/lib/ComboBox";
export * from "office-ui-fabric-react/lib/CommandBar";
export * from "office-ui-fabric-react/lib/ContextualMenu";
export * from "office-ui-fabric-react/lib/DetailsList";
export * from "office-ui-fabric-react/lib/Dialog";
export * from "office-ui-fabric-react/lib/Divider";
export * from "office-ui-fabric-react/lib/DocumentCard";
export * from "office-ui-fabric-react/lib/Dropdown";
export * from "office-ui-fabric-react/lib/ExtendedPicker";
export * from "office-ui-fabric-react/lib/Facepile";
export * from "office-ui-fabric-react/lib/FloatingPicker";
export * from "office-ui-fabric-react/lib/FocusZone";
export * from "office-ui-fabric-react/lib/Grid";
export * from "office-ui-fabric-react/lib/GroupedList";
export * from "office-ui-fabric-react/lib/HoverCard";
export * from "office-ui-fabric-react/lib/Icon";
export * from "office-ui-fabric-react/lib/Icons";
export * from "office-ui-fabric-react/lib/Keytip";
export * from "office-ui-fabric-react/lib/KeytipData";
export * from "office-ui-fabric-react/lib/KeytipLayer";
export * from "office-ui-fabric-react/lib/Label";
export * from "office-ui-fabric-react/lib/Layer";
export * from "office-ui-fabric-react/lib/List";
export * from "office-ui-fabric-react/lib/MarqueeSelection";
export * from "office-ui-fabric-react/lib/MessageBar";
export * from "office-ui-fabric-react/lib/Nav";
export * from "office-ui-fabric-react/lib/Overlay";
export * from "office-ui-fabric-react/lib/Panel";
export * from "office-ui-fabric-react/lib/Pickers";
export * from "office-ui-fabric-react/lib/ProgressIndicator";
export * from "office-ui-fabric-react/lib/Rating";
export * from "office-ui-fabric-react/lib/ScrollablePane";
export * from "office-ui-fabric-react/lib/SelectableOption";
export * from "office-ui-fabric-react/lib/Selection";
export * from "office-ui-fabric-react/lib/Separator";
export * from "office-ui-fabric-react/lib/Shimmer";
export * from "office-ui-fabric-react/lib/ShimmeredDetailsList";
export * from "office-ui-fabric-react/lib/Spinner";
export * from "office-ui-fabric-react/lib/Stack";
export * from "office-ui-fabric-react/lib/Sticky";
export * from "office-ui-fabric-react/lib/Styling";
export * from "office-ui-fabric-react/lib/TeachingBubble";
export * from "office-ui-fabric-react/lib/Text";
export * from "office-ui-fabric-react/lib/ThemeGenerator";
export * from "office-ui-fabric-react/lib/Tooltip";
export * from "office-ui-fabric-react/lib/Utilities";

export { }