@fluentui/utilities/dist/utilities.d.ts

import { DATA_PORTAL_ATTRIBUTE } from '@fluentui/dom-utilities';
import { elementContains } from '@fluentui/dom-utilities';
import { elementContainsAttribute } from '@fluentui/dom-utilities';
import type { ExtendedCSSStyleSheet } from '@fluentui/merge-styles';
import { findElementRecursive } from '@fluentui/dom-utilities';
import { getActiveElement } from '@fluentui/dom-utilities';
import { getChildren } from '@fluentui/dom-utilities';
import { getEventTarget } from '@fluentui/dom-utilities';
import { getParent } from '@fluentui/dom-utilities';
import { getVirtualParent } from '@fluentui/dom-utilities';
import type { IProcessedStyleSet } from '@fluentui/merge-styles';
import { IStyleFunction } from '@fluentui/merge-styles';
import { IStyleFunctionOrObject } from '@fluentui/merge-styles';
import type { IStyleSetBase } from '@fluentui/merge-styles';
import { isVirtualElement } from '@fluentui/dom-utilities';
import { IVirtualElement } from '@fluentui/dom-utilities';
import { Omit as Omit_2 } from '@fluentui/merge-styles';
import { portalContainsElement } from '@fluentui/dom-utilities';
import * as React_2 from 'react';
import { setPortalAttribute } from '@fluentui/dom-utilities';
import { setVirtualParent } from '@fluentui/dom-utilities';
import { ShadowConfig } from '@fluentui/merge-styles';

/**
 * Adds a keycode to the list of keys that, when pressed, should cause the focus outlines to be visible.
 * This can be used to add global shortcut keys that directionally move from section to section within
 * an app or between focus trap zones.
 */
export declare function addDirectionalKeyCode(which: number): void;

/**
 * Given an array, this function returns a new array where an element has been inserted at the given index.
 * @param array - The array to operate on
 * @param index - The index where an element should be inserted
 * @param itemToAdd - The element to insert
 */
export declare function addElementAtIndex<T>(array: T[], index: number, itemToAdd: T): T[];

export declare type AdoptedStylesheetExHook = (stylesheetKey: string, shadowCtx: MergeStylesShadowRootContextValue | undefined, rootMergeStyles: Map<string, ExtendedCSSStyleSheet>, win: Window | undefined) => boolean;

export declare type AdoptedStylesheetHook = (stylesheetKey: string) => boolean;

/**
 * Same as allowScrollOnElement but does not prevent overscrolling.
 */
export declare const allowOverscrollOnElement: (element: HTMLElement | null, events: EventGroup) => void;

/**
 * Allows the user to scroll within a element,
 * while preventing the user from scrolling the body
 */
export declare const allowScrollOnElement: (element: HTMLElement | null, events: EventGroup) => void;

/**
 * An array of A tag properties and events.
 *
 * @public
 */
export declare const anchorProperties: Record<string, number>;

/**
 * Returns a single function which will call each of the given functions in the context of the
 * parent.
 */
export declare function appendFunction(parent: any, ...functions: any[]): () => void;

/**
 * Returns a boolean indicating if the two given arrays are equal in length and values.
 *
 * @param array1 - First array to compare
 * @param array2 - Second array to compare
 * @returns True if the arrays are the same length and have the same values in the same positions, false otherwise.
 */
export declare function arraysEqual<T>(array1: T[], array2: T[]): boolean;

/**
 * Produces a component which internally loads the target component before first mount.
 * The component passes all props through to the loaded component.
 *
 * This overload accepts a module with a default export for the component.
 */
export declare function asAsync<TProps extends {}>(options: IAsAsyncOptions<TProps>): React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<TProps & {
    asyncPlaceholder?: React_2.ElementType<any> | undefined;
}> & React_2.RefAttributes<React_2.ElementType<TProps>>>;

/**
 * AssertNever is a utility function that can be used for exhaustiveness checks in switch statements.
 *
 * @public
 */
export declare function assertNever(x: never): never;

/**
 * Makes a resulting merge of a bunch of objects. Pass in the target object followed by 1 or more
 * objects as arguments and they will be merged sequentially into the target. Note that this will
 * shallow merge; it will not create new cloned values for target members.
 *
 * @public
 * @param target - Target object to merge following object arguments into.
 * @param args - One or more objects that will be mixed into the target in the order they are provided.
 * @returns Resulting merged target.
 */
export declare function assign(this: any, target: any, ...args: any[]): any;

/**
 * Bugs often appear in async code when stuff gets disposed, but async operations don't get canceled.
 * This Async helper class solves these issues by tying async code to the lifetime of a disposable object.
 *
 * Usage: Anything class extending from BaseModel can access this helper via this.async. Otherwise create a
 * new instance of the class and remember to call dispose() during your code's dispose handler.
 *
 * @public
 */
export declare class Async {
    private _timeoutIds;
    private _immediateIds;
    private _intervalIds;
    private _animationFrameIds;
    private _isDisposed;
    private _parent;
    private _onErrorHandler;
    private _noop;
    constructor(parent?: object, onError?: (e: any) => void);
    /**
     * Dispose function, clears all async operations.
     */
    dispose(): void;
    /**
     * SetTimeout override, which will auto cancel the timeout during dispose.
     * @param callback - Callback to execute.
     * @param duration - Duration in milliseconds.
     * @returns The setTimeout id.
     */
    setTimeout(callback: () => void, duration: number): number;
    /**
     * Clears the timeout.
     * @param id - Id to cancel.
     */
    clearTimeout(id: number): void;
    /**
     * SetImmediate override, which will auto cancel the immediate during dispose.
     * @param callback - Callback to execute.
     * @param targetElement - Optional target element to use for identifying the correct window.
     * @returns The setTimeout id.
     */
    setImmediate(callback: () => void, targetElement?: Element | null): number;
    /**
     * Clears the immediate.
     * @param id - Id to cancel.
     * @param targetElement - Optional target element to use for identifying the correct window.
     */
    clearImmediate(id: number, targetElement?: Element | null): void;
    /**
     * SetInterval override, which will auto cancel the timeout during dispose.
     * @param callback - Callback to execute.
     * @param duration - Duration in milliseconds.
     * @returns The setTimeout id.
     */
    setInterval(callback: () => void, duration: number): number;
    /**
     * Clears the interval.
     * @param id - Id to cancel.
     */
    clearInterval(id: number): void;
    /**
     * Creates a function that, when executed, will only call the func function at most once per
     * every wait milliseconds. Provide an options object to indicate that func should be invoked
     * on the leading and/or trailing edge of the wait timeout. Subsequent calls to the throttled
     * function will return the result of the last func call.
     *
     * Note: If leading and trailing options are true func will be called on the trailing edge of
     * the timeout only if the throttled function is invoked more than once during the wait timeout.
     *
     * @param func - The function to throttle.
     * @param wait - The number of milliseconds to throttle executions to. Defaults to 0.
     * @param options - The options object.
     * @returns The new throttled function.
     */
    throttle<T extends (...args: any[]) => any>(func: T, wait?: number, options?: {
        leading?: boolean;
        trailing?: boolean;
    }): T;
    /**
     * Creates a function that will delay the execution of func until after wait milliseconds have
     * elapsed since the last time it was invoked. Provide an options object to indicate that func
     * should be invoked on the leading and/or trailing edge of the wait timeout. Subsequent calls
     * to the debounced function will return the result of the last func call.
     *
     * Note: If leading and trailing options are true func will be called on the trailing edge of
     * the timeout only if the debounced function is invoked more than once during the wait
     * timeout.
     *
     * @param func - The function to debounce.
     * @param wait - The number of milliseconds to delay.
     * @param options - The options object.
     * @returns The new debounced function.
     */
    debounce<T extends (...args: any[]) => any>(func: T, wait?: number, options?: {
        leading?: boolean;
        maxWait?: number;
        trailing?: boolean;
    }): ICancelable<T> & T;
    requestAnimationFrame(callback: () => void, targetElement?: Element | null): number;
    cancelAnimationFrame(id: number, targetElement?: Element | null): void;
    protected _logError(e: any): void;
}

/**
 * An array of AUDIO tag properties and events.

 * @public
 */
export declare const audioProperties: Record<string, number>;

/**
 * AutoScroll simply hooks up mouse events given a parent element, and scrolls the container
 * up/down depending on how close the mouse is to the top/bottom of the container.
 *
 * Once you don't want autoscroll any more, just dispose the helper and it will unhook events.
 *
 * @public
 * {@docCategory AutoScroll}
 */
export declare class AutoScroll {
    private _events;
    private _scrollableParent;
    private _scrollRect;
    private _scrollVelocity;
    private _isVerticalScroll;
    private _timeoutId?;
    constructor(element: HTMLElement, win?: Window);
    dispose(): void;
    private _onMouseMove;
    private _onTouchMove;
    private _computeScrollVelocity;
    private _startScroll;
    private _incrementScroll;
    private _stopScroll;
}

/**
 * BaseComponent class, which provides basic helpers for all components.
 *
 * @public
 * {@docCategory BaseComponent}
 *
 * @deprecated Do not use. We are moving away from class component.
 */
export declare class BaseComponent<TProps extends IBaseProps = {}, TState extends {} = {}> extends React_2.Component<TProps, TState> {
    /**
     * @deprecated Use React's error boundaries instead.
     */
    static onError: (errorMessage?: string, ex?: any) => void;
    /**
     * Controls whether the componentRef prop will be resolved by this component instance. If you are
     * implementing a passthrough (higher-order component), you would set this to false and pass through
     * the props to the inner component, allowing it to resolve the componentRef.
     */
    protected _skipComponentRefResolution: boolean;
    private __async;
    private __events;
    private __disposables;
    private __resolves;
    private __className;
    /**
     * BaseComponent constructor
     * @param props - The props for the component.
     * @param context - The context for the component.
     */
    constructor(props: TProps, context?: any);
    /**
     * When the component receives props, make sure the componentRef is updated.
     */
    componentDidUpdate(prevProps: TProps, prevState: TState): void;
    /**
     * When the component has mounted, update the componentRef.
     */
    componentDidMount(): void;
    /**
     * If we have disposables, dispose them automatically on unmount.
     */
    componentWillUnmount(): void;
    /**
     * Gets the object's class name.
     */
    get className(): string;
    /**
     * Allows subclasses to push things to this._disposables to be auto disposed.
     */
    protected get _disposables(): IDisposable[];
    /**
     * Gets the async instance associated with the component, created on demand. The async instance gives
     * subclasses a way to execute setTimeout/setInterval async calls safely, where the callbacks
     * will be cleared/ignored automatically after unmounting. The helpers within the async object also
     * preserve the this pointer so that you don't need to "bind" the callbacks.
     */
    protected get _async(): Async;
    /**
     * Gets the event group instance assocaited with the component, created on demand. The event instance
     * provides on/off methods for listening to DOM (or regular javascript object) events. The event callbacks
     * will be automatically disconnected after unmounting. The helpers within the events object also
     * preserve the this reference so that you don't need to "bind" the callbacks.
     */
    protected get _events(): EventGroup;
    /**
     * Helper to return a memoized ref resolver function.
     * @param refName - Name of the member to assign the ref to.
     * @returns A function instance keyed from the given refname.
     * @deprecated Use `createRef` from React.createRef.
     */
    protected _resolveRef(refName: string): (ref: React_2.ReactNode) => React_2.ReactNode;
    /**
     * Updates the componentRef (by calling it with "this" when necessary.)
     */
    protected _updateComponentRef(currentProps: IBaseProps, newProps?: IBaseProps): void;
    /**
     * Warns when a deprecated props are being used.
     *
     * @param deprecationMap - The map of deprecations, where key is the prop name and the value is
     * either null or a replacement prop name.
     */
    protected _warnDeprecations(deprecationMap: ISettingsMap<TProps>): void;
    /**
     * Warns when props which are mutually exclusive with each other are both used.
     *
     * @param mutuallyExclusiveMap - The map of mutually exclusive props.
     */
    protected _warnMutuallyExclusive(mutuallyExclusiveMap: ISettingsMap<TProps>): void;
    /**
     * Warns when props are required if a condition is met.
     *
     * @param requiredProps - The name of the props that are required when the condition is met.
     * @param conditionalPropName - The name of the prop that the condition is based on.
     * @param condition - Whether the condition is met.
     */
    protected _warnConditionallyRequiredProps(requiredProps: string[], conditionalPropName: string, condition: boolean): void;
    private _setComponentRef;
}

/**
 * An array of events that are allowed on every html element type.
 *
 * @public
 */
export declare const baseElementEvents: Record<string, number>;

/**
 * An array of element attributes which are allowed on every html element type.
 *
 * @public
 */
export declare const baseElementProperties: Record<string, number>;

/**
 * An array of BUTTON tag properties and events.
 *
 * @public
 */
export declare const buttonProperties: Record<string, number>;

/**
 * Calculates a number's precision based on the number of trailing
 * zeros if the number does not have a decimal indicated by a negative
 * precision. Otherwise, it calculates the number of digits after
 * the decimal point indicated by a positive precision.
 * @param value - the value to determine the precision of
 */
export declare function calculatePrecision(value: number | string): number;

/**
 * Verifies if an application can use DOM.
 */
export declare function canUseDOM(): boolean;

/**
 * Creates a getClassNames function which calls getStyles given the props, and injects them
 * into mergeStyleSets.
 *
 * Note that the props you pass in on every render should be in the same order and
 * immutable (numbers, strings, and booleans). This will allow the results to be memoized. Violating
 * these will cause extra recalcs to occur.
 */
export declare function classNamesFunction<TStyleProps extends {}, TStyleSet extends IStyleSetBase>(options?: IClassNamesFunctionOptions): (getStyles: IStyleFunctionOrObject<TStyleProps, TStyleSet> | undefined, styleProps?: TStyleProps) => IProcessedStyleSet<TStyleSet>;

export declare const colGroupProperties: Record<string, number>;

export declare const colProperties: Record<string, number>;

/**
 * Composes two components which conform to the `IComponentAs` specification; that is, two
 * components which accept a `defaultRender` prop, which is a 'default' implementation of
 * a component which accepts the same overall props.
 *
 * @public
 */
export declare function composeComponentAs<TProps extends {}>(outer: IComponentAs<TProps>, inner: IComponentAs<TProps>): IComponentAs<TProps>;

/**
 * Composes two 'render functions' to produce a final render function that renders
 * the outer function, passing the inner function as 'default render'. The inner function
 * is then passed the original 'default render' prop.
 * @public
 */
export declare function composeRenderFunction<TProps>(outer: IRenderFunction<TProps>, inner: IRenderFunction<TProps>): IRenderFunction<TProps>;

/**
 * Creates an array of a given size and helper method to populate.
 *
 * @public
 * @param size - Size of array.
 * @param getItem - Callback to populate given cell index.
 */
export declare function createArray<T>(size: number, getItem: (index: number) => T): T[];

/**
 * Creates a memoizer for a single-value function, backed by a WeakMap.
 * With a WeakMap, the memoized values are only kept as long as the source objects,
 * ensuring that there is no memory leak.
 *
 * This function assumes that the input values passed to the wrapped function will be
 * `function` or `object` types. To memoize functions which accept other inputs, use
 * `memoizeFunction`, which memoizes against arbitrary inputs using a lookup cache.
 *
 * @public
 */
export declare function createMemoizer<F extends (input: any) => any>(getValue: F): F;

/**
 * Helper to merge refs from within class components.
 */
export declare const createMergedRef: <TType, TValue = null>(value?: TValue | undefined) => (...newRefs: (React_2.Ref<TType | TValue | null> | undefined)[]) => (newValue: TType | TValue | null) => void;

/**
 * Concatination helper, which can merge class names together. Skips over falsey values.
 *
 * @public
 */
export declare function css(...args: ICssInput[]): string;

export declare function customizable(scope: string, fields: string[], concatStyles?: boolean): <P>(ComposedComponent: React_2.ComponentType<P>) => any;

export declare class Customizations {
    private static _suppressUpdates;
    static reset(): void;
    /** Apply global Customization settings.
     * @example Customizations.applySettings(\{ theme: \{...\} \});
     */
    static applySettings(settings: ISettings): void;
    /** Apply Customizations to a particular named scope, like a component.
     * @example Customizations.applyScopedSettings('Nav', \{ styles: () =\> \{\} \});
     */
    static applyScopedSettings(scopeName: string, settings: ISettings): void;
    static getSettings(properties: string[], scopeName?: string, localSettings?: ICustomizations): any;
    /** Used to run some code that sets Customizations without triggering an update until the end.
     * Useful for applying Customizations that don't affect anything currently rendered, or for
     * applying many customizations at once.
     * @param suppressUpdate - Do not raise the change event at the end, preventing all updates
     */
    static applyBatchedUpdates(code: () => void, suppressUpdate?: boolean): void;
    static observe(onChange: () => void): void;
    static unobserve(onChange: () => void): void;
    private static _raiseChange;
}

/**
 * The Customizer component allows for default props to be mixed into components which
 * are decorated with the customizable() decorator, or use the styled HOC. This enables
 * injection scenarios like:
 *
 * 1. render svg icons instead of the icon font within all buttons
 * 2. inject a custom theme object into a component
 *
 * Props are provided via the settings prop which should be one of the following:
 * - A json map which contains 1 or more name/value pairs representing injectable props.
 * - A function that receives the current settings and returns the new ones that apply to the scope
 *
 * @public
 *
 * @deprecated This component is deprecated for purpose of applying theme to components
 * as of `@fluentui/react` version 8. Use `ThemeProvider` for applying theme instead.
 */
export declare class Customizer extends React_2.Component<ICustomizerProps> {
    componentDidMount(): void;
    componentWillUnmount(): void;
    render(): React_2.ReactElement<{}>;
    private _onCustomizationChange;
}

export declare const CustomizerContext: React_2.Context<ICustomizerContext>;

/**
 * Placing this attribute on scrollable divs optimizes detection to know
 * if the div is scrollable or not (given we can avoid expensive operations
 * like getComputedStyle.)
 *
 * @public
 */
export declare const DATA_IS_SCROLLABLE_ATTRIBUTE = "data-is-scrollable";

export { DATA_PORTAL_ATTRIBUTE }

/**
 * Utility component for delaying the render of a child component after a given delay. This component
 * requires a single child component; don't pass in many components. Wrap multiple components in a DIV
 * if necessary.
 *
 * @public
 * {@docCategory DelayedRender}
 */
export declare class DelayedRender extends React_2.Component<IDelayedRenderProps, IDelayedRenderState> {
    static defaultProps: {
        delay: number;
    };
    private _timeoutId;
    constructor(props: IDelayedRenderProps);
    componentDidMount(): void;
    componentWillUnmount(): void;
    render(): React_2.ReactElement<{}> | null;
}

/**
 * Disables the body scrolling.
 *
 * @public
 */
export declare function disableBodyScroll(): void;

/**
 * An array of DIV tag properties and events.
 *
 * @public
 */
export declare const divProperties: Record<string, number>;

/**
 * Determines if an element, or any of its children, contain focus.
 *
 * @public
 */
export declare function doesElementContainFocus(element: HTMLElement): boolean;

export { elementContains }

export { elementContainsAttribute }

/**
 * Enables the body scrolling.
 *
 * @public
 */
export declare function enableBodyScroll(): void;

/** An instance of EventGroup allows anything with a handle to it to trigger events on it.
 *  If the target is an HTMLElement, the event will be attached to the element and can be
 *  triggered as usual (like clicking for onClick).
 *  The event can be triggered by calling EventGroup.raise() here. If the target is an
 *  HTMLElement, the event gets raised and is handled by the browser. Otherwise, it gets
 *  handled here in EventGroup, and the handler is called in the context of the parent
 *  (which is passed in in the constructor).
 *
 * @public
 * {@docCategory EventGroup}
 */
export declare class EventGroup {
    private static _uniqueId;
    private _parent;
    private _eventRecords;
    private _id;
    private _isDisposed;
    /** For IE8, bubbleEvent is ignored here and must be dealt with by the handler.
     *  Events raised here by default have bubbling set to false and cancelable set to true.
     *  This applies also to built-in events being raised manually here on HTMLElements,
     *  which may lead to unexpected behavior if it differs from the defaults.
     *
     */
    static raise(target: any, eventName: string, eventArgs?: any, bubbleEvent?: boolean, doc?: Document): boolean | undefined;
    static isObserved(target: any, eventName: string): boolean;
    /** Check to see if the target has declared support of the given event. */
    static isDeclared(target: any, eventName: string): boolean;
    static stopPropagation(event: any): void;
    private static _isElement;
    /** parent: the context in which events attached to non-HTMLElements are called */
    constructor(parent: any);
    dispose(): void;
    /** On the target, attach a set of events, where the events object is a name to function mapping. */
    onAll(target: any, events: {
        [key: string]: (args?: any) => void;
    }, useCapture?: boolean): void;
    /**
     * On the target, attach an event whose handler will be called in the context of the parent
     * of this instance of EventGroup.
     */
    on(target: any, eventName: string, callback: (args?: any) => void, options?: boolean | AddEventListenerOptions): void;
    off(target?: any, eventName?: string, callback?: (args?: any) => void, options?: boolean | AddEventListenerOptions): void;
    /** Trigger the given event in the context of this instance of EventGroup. */
    raise(eventName: string, eventArgs?: any, bubbleEvent?: boolean): boolean | undefined;
    /** Declare an event as being supported by this instance of EventGroup. */
    declare(event: string | string[]): void;
}

/**
 * Extends a component's lifetime methods by appending new functions to the existing lifetime functions.
 */
export declare function extendComponent<T extends React_2.Component>(parent: T, methods: {
    [key in keyof T]?: T[key];
}): void;

/**
 * Performance helper class for measuring things.
 *
 * @public
 * {@docCategory FabricPerformance}
 */
export declare class FabricPerformance {
    static summary: IPerfSummary;
    private static _timeoutId;
    /**
     * Measures execution time of the given syncronous function. If the same logic is executed multiple times,
     * each individual measurement will be collected as well the overall numbers.
     * @param name - The name of this measurement
     * @param func - The logic to be measured for execution time
     */
    static measure(name: string, func: () => void): void;
    static reset(): void;
    static setPeriodicReset(): void;
}

/**
 * Makes a resulting merge of a bunch of objects, but allows a filter function to be passed in to filter
 * the resulting merges. This allows for scenarios where you want to merge "everything except that one thing"
 * or "properties that start with data-". Note that this will shallow merge; it will not create new cloned
 * values for target members.
 *
 * @public
 * @param isAllowed - Callback to determine if the given propName is allowed in the result.
 * @param target - Target object to merge following object arguments into.
 * @param args - One or more objects that will be mixed into the target in the order they are provided.
 * @returns Resulting merged target.
 */
export declare function filteredAssign(isAllowed: (propName: string) => boolean, target: any, ...args: any[]): any;

/**
 * Helper to find the first item within an array that satisfies the callback.
 * @param array - Array to search
 * @param cb - Callback which returns true on matches
 */
export declare function find<T>(array: T[], cb: (item: T, index: number) => boolean): T | undefined;

export { findElementRecursive }

/**
 * Helper to find the index of an item within an array, using a callback to
 * determine the match.
 *
 * @public
 * @param array - Array to search.
 * @param cb - Callback which returns true on matches.
 * @param fromIndex - Optional index to start from (defaults to 0)
 */
export declare function findIndex<T>(array: T[], cb: (item: T, index: number) => boolean, fromIndex?: number): number;

/**
 * Traverses up the DOM for the element with the data-is-scrollable=true attribute, or returns
 * document.body.
 *
 * @public
 */
export declare function findScrollableParent(startingElement: HTMLElement | null): HTMLElement | Window | undefined | null;

/**
 * Produces a proportionally-scaled version of an input content size when fit to a bounding size.
 * Given a `contentSize` and a `boundsSize`, this function scales `contentSize` proportionally
 * using either `contain` or `cover` fit behaviors.
 * Use this function to pre-calculate the layout for the CSS `object-fit` and `background-fit` behaviors.
 * With `contain`, the output size must be the largest it can be while completely within the `boundsSize`.
 * With `cover`, the output size must be the smallest it can be while completely around the `boundsSize`.
 * By default, there is a `maxScale` value of 1, which prevents the `contentSize` from being scaled larger.
 *
 * @param options - the options for the bounds fit operation
 */
export declare function fitContentToBounds(options: IFitContentToBoundsOptions): ISize;

/**
 * The available fit modes. These should match the fit modes for CSS.
 */
export declare type FitMode = 'contain' | 'cover';

/**
 * Given an array where each element is of type T or T[], flatten it into an array of T
 * @param array - The array where each element can optionally also be an array
 */
export declare function flatten<T>(array: (T | T[])[]): T[];

/**
 * Sets focus to an element asynchronously. The focus will be set at the next browser repaint,
 * meaning it won't cause any extra recalculations. If more than one focusAsync is called during one frame,
 * only the latest called focusAsync element will actually be focused
 * @param element - The element to focus
 */
export declare function focusAsync(element: HTMLElement | {
    focus: () => void;
} | undefined | null): void;

/**
 * Attempts to focus the first focusable element that is a child or child's child of the rootElement.
 *
 * @public
 * @param rootElement - Element to start the search for a focusable child.
 * @param bypassHiddenElements - If true, focus will be not be set on hidden elements.
 * @returns True if focus was set, false if it was not.
 */
export declare function focusFirstChild(rootElement: HTMLElement, bypassHiddenElements?: boolean, includeShadowRoots?: boolean): boolean;

/**
 * Function Component wrapper which enables calling `useFocusRects` hook.
 * Renders nothing.
 */
export declare const FocusRects: React_2.FunctionComponent<{
    rootRef?: React_2.RefObject<HTMLElement>;
}>;

export declare const FocusRectsContext: React_2.Context<IFocusRectsContext | undefined>;

export declare const FocusRectsProvider: React_2.FC<FocusRectsProviderProps>;

export declare type FocusRectsProviderProps = {
    /**
     * Ref to the root element that this is providing focus rects for.
     */
    providerRef: React_2.RefObject<HTMLElement>;
    /**
     * Indicates that this is the root of a layer, and should not inherit the providerRef from a parent context.
     */
    layerRoot?: boolean;
};

/**
 * String format method, used for scenarios where at runtime you
 * need to evaluate a formatted string given a tokenized string. This
 * usually only is needed in localization scenarios.

 * @example
 * ```tsx
 * "I love {0} every {1}".format("CXP")
 * ```
 * will result in a Debug Exception.
 *
 * @public
 */
export declare function format(s: string, ...values: any[]): string;

/**
 * An array of FORM tag properties and events.
 *
 * @public
 */
export declare const formProperties: Record<string, number>;

export { getActiveElement }

export { getChildren }

/**
 * Determines the distance between two points.
 *
 * @public
 */
export declare function getDistanceBetweenPoints(point1: Point, point2: Point): number;

/**
 * Helper to get the document object. Note that in popup window cases, document
 * might be the wrong document, which is why we look at ownerDocument for the
 * truth.
 *
 * @public
 */
export declare function getDocument(rootElement?: HTMLElement | null): Document | undefined;

/**
 * Finds the element index path from a parent element to a child element.
 *
 * If you had this node structure: "A has children [B, C] and C has child D",
 * the index path from A to D would be [1, 0], or `parent.chidren[1].children[0]`.
 */
export declare function getElementIndexPath(fromElement: HTMLElement, toElement: HTMLElement): number[];

export { getEventTarget }

/**
 * Gets the first focusable element.
 *
 * @public
 */
export declare function getFirstFocusable(rootElement: HTMLElement, currentElement: HTMLElement, includeElementsInFocusZones?: boolean, includeShadowRoots?: boolean): HTMLElement | null;

/**
 * Gets the first tabbable element. (The difference between focusable and tabbable is that tabbable elements are
 * focusable elements that also have tabIndex != -1.)
 * @param rootElement - The parent element to search beneath.
 * @param currentElement - The descendant of rootElement to start the search at.  This element is the first one checked,
 * and iteration continues forward.  Typical use passes rootElement.firstChild.
 * @param includeElementsInFocusZones - true if traversal should go into FocusZone descendants.
 * @param checkNode - Include currentElement in search when true. Defaults to true.
 * @public
 */
export declare function getFirstTabbable(rootElement: HTMLElement, currentElement: HTMLElement, includeElementsInFocusZones?: boolean, checkNode?: boolean, includeShadowRoots?: boolean): HTMLElement | null;

/**
 * Gets the first visible element that matches the given selector
 * @param selector - The selector to use to find potential visible elements
 * @returns The first visible element that matches the selector, otherwise undefined
 *
 * @public
 */
export declare function getFirstVisibleElementFromSelector(selector: string): Element | undefined;

/**
 * Finds the closest focusable element via an index path from a parent. See
 * `getElementIndexPath` for getting an index path from an element to a child.
 */
export declare function getFocusableByIndexPath(parent: HTMLElement, path: number[]): HTMLElement | undefined;

/**
 * Generates a unique id in the global scope (this spans across duplicate copies of the same library.)
 *
 * @public
 */
export declare function getId(prefix?: string): string;

/**
 * Regular expressions matching characters to ignore when calculating the initials.
 */
/**
 * Get (up to 2 characters) initials based on display name of the persona.
 *
 * @public
 */
export declare function getInitials(displayName: string | undefined | null, isRtl: boolean, allowPhoneInitials?: boolean): string;

/**
 * Gets the language set for the page.
 * @param persistenceType - Where to persist the value. Default is `sessionStorage` if available.
 */
export declare function getLanguage(persistenceType?: 'localStorage' | 'sessionStorage' | 'none'): string | null;

/**
 * Gets the last focusable element.
 *
 * @public
 */
export declare function getLastFocusable(rootElement: HTMLElement, currentElement: HTMLElement, includeElementsInFocusZones?: boolean, includeShadowRoots?: boolean): HTMLElement | null;

/**
 * Gets the last tabbable element. (The difference between focusable and tabbable is that tabbable elements are
 * focusable elements that also have tabIndex != -1.)
 * @param rootElement - The parent element to search beneath.
 * @param currentElement - The descendant of rootElement to start the search at.  This element is the first one checked,
 * and iteration continues in reverse.  Typical use passes rootElement.lastChild.
 * @param includeElementsInFocusZones - true if traversal should go into FocusZone descendants.
 * @param checkNode - Include currentElement in search when true. Defaults to true.
 * @public
 */
export declare function getLastTabbable(rootElement: HTMLElement, currentElement: HTMLElement, includeElementsInFocusZones?: boolean, checkNode?: boolean, includeShadowRoots?: boolean): HTMLElement | null;

/**
 * Given an element tagname and user props, filters the props to only allowed props for the given
 * element type.
 * @param tagName - Tag name (e.g. "div")
 * @param props - Props object
 * @param excludedPropNames - List of props to disallow
 */
export declare function getNativeElementProps<TAttributes extends React_2.HTMLAttributes<any>>(tagName: string, props: {}, excludedPropNames?: string[]): TAttributes;

/**
 * Gets native supported props for an html element provided the allowance set. Use one of the property
 * sets defined (divProperties, buttonPropertes, etc) to filter out supported properties from a given
 * props set. Note that all data- and aria- prefixed attributes will be allowed.
 * NOTE: getNativeProps should always be applied first when adding props to a react component. The
 * non-native props should be applied second. This will prevent getNativeProps from overriding your custom props.
 * For example, if props passed to getNativeProps has an onClick function and getNativeProps is added to
 * the component after an onClick function is added, then the getNativeProps onClick will override it.
 *
 * @public
 * @param props - The unfiltered input props
 * @param allowedPropsNames - The array or record of allowed prop names.
 * @returns The filtered props
 */
export declare function getNativeProps<T extends Record<string, any>>(props: Record<string, any>, allowedPropNames: string[] | Record<string, number>, excludedPropNames?: string[]): T;

/**
 * Traverse to find the next focusable element.
 * If tabbable is true, the element must have tabIndex != -1.
 *
 * @public
 * @param checkNode - Include currentElement in search when true.
 */
export declare function getNextElement(rootElement: HTMLElement, currentElement: HTMLElement | null, checkNode?: boolean, suppressParentTraversal?: boolean, suppressChildTraversal?: boolean, includeElementsInFocusZones?: boolean, allowFocusRoot?: boolean, tabbable?: boolean, bypassHiddenElements?: boolean, includeShadowRoots?: boolean): HTMLElement | null;

export { getParent }

/**
 * Traverse to find the previous element.
 * If tabbable is true, the element must have tabIndex != -1.
 *
 * @public
 */
export declare function getPreviousElement(rootElement: HTMLElement, currentElement: HTMLElement | null, checkNode?: boolean, suppressParentTraversal?: boolean, traverseChildren?: boolean, includeElementsInFocusZones?: boolean, allowFocusRoot?: boolean, tabbable?: boolean, includeShadowRoots?: boolean): HTMLElement | null;

/**
 * Function to apply default values to a component props object. This function is intended for function components,
 * to maintain parity with the `defaultProps` feature of class components. It accounts for properties that are
 * specified, but undefined.
 * @param defaultProps- An object with default values for various properties
 * @param propsWithoutDefaults- The props object passed into the component
 */
export declare function getPropsWithDefaults<TProps extends {}>(defaultProps: Partial<TProps>, propsWithoutDefaults: TProps): TProps;

/**
 * Helper to get bounding client rect. Passing in window will get the window size.
 *
 * @public
 */
export declare function getRect(element: HTMLElement | Window | null, win?: Window): IRectangle | undefined;

/**
 * @deprecated Unused as of version 8
 */
export declare function getResourceUrl(url: string): string;

/**
 * Gets the rtl state of the page (returns true if in rtl.)
 */
export declare function getRTL(theme?: {
    rtl?: boolean;
}): boolean;

/**
 * Returns the given key, but flips right/left arrows if necessary.
 */
export declare function getRTLSafeKeyCode(key: number, theme?: {
    rtl?: boolean;
}): number;

/**
 * Calculates the width of a scrollbar for the browser/os.
 *
 * @public
 */
export declare function getScrollbarWidth(doc?: Document): number;

export { getVirtualParent }

/**
 * Helper to get the window object. The helper will make sure to use a cached variable
 * of "window", to avoid overhead and memory leaks in IE11. Note that in popup scenarios the
 * window object won't match the "global" window object, and for these scenarios, you should
 * pass in an element hosted within the popup.
 *
 * @public
 */
export declare function getWindow(rootElement?: Element | null): Window | undefined;

/**
 * Global settings helper, which stores settings in the global (window) namespace.
 * If window is not provided, it will store settings in module scope. Provides a
 * way to observe changes as well when their values change.
 *
 * @public
 * {@docCategory GlobalSettings}
 */
export declare class GlobalSettings {
    static getValue<T>(key: string, defaultValue?: T | (() => T)): T;
    static setValue<T>(key: string, value: T): T;
    static addChangeListener(cb: IChangeEventCallback): void;
    static removeChangeListener(cb: IChangeEventCallback): void;
}

/**
 * Detects whether an element's content has horizontal overflow
 *
 * @public
 * @param element - Element to check for overflow
 * @returns True if element's content overflows
 */
export declare function hasHorizontalOverflow(element: HTMLElement): boolean;

export declare type HasMergeStylesShadowRootContextHook = () => boolean;

/**
 * Detects whether an element's content has overflow in any direction
 *
 * @public
 * @param element - Element to check for overflow
 * @returns True if element's content overflows
 */
export declare function hasOverflow(element: HTMLElement): boolean;

/**
 * Detects whether an element's content has vertical overflow
 *
 * @public
 * @param element - Element to check for overflow
 * @returns True if element's content overflows
 */
export declare function hasVerticalOverflow(element: HTMLElement): boolean;

/**
 * Allows you to hoist methods, except those in an exclusion set from a source object into a destination object.
 *
 * @public
 * @param destination - The instance of the object to hoist the methods onto.
 * @param source - The instance of the object where the methods are hoisted from.
 * @param exclusions - (Optional) What methods to exclude from being hoisted.
 * @returns An array of names of methods that were hoisted.
 */
export declare function hoistMethods(destination: any, source: any, exclusions?: string[]): string[];

/**
 * Allows you to hoist static functions in components.
 * Created for the purpose of fixing broken static functions in classes
 * that utilize decorators.
 *
 * @public
 * @param source - The object where the methods are hoisted from.
 * @param dest - The object to hoist the methods onto.
 * @returns The dest object with methods added
 */
export declare function hoistStatics<TSource extends Object, TDest>(source: TSource, dest: TDest): TDest;

/**
 * An array of HTML element properties and events.
 *
 * @public
 */
export declare const htmlElementProperties: Record<string, number>;

export declare interface IAsAsyncOptions<TProps> {
    /**
     * Callback which returns a promise resolving an object which exports the component.
     */
    load: () => Promise<React_2.ElementType<TProps>>;
    /**
     * Callback executed when async loading is complete.
     */
    onLoad?: () => void;
    /**
     * Callback when async loading fails.
     */
    onError?: (error: Error) => void;
}

/**
 * BaseProps interface.
 *
 * @public
 * {@docCategory IBaseProps}
 */
export declare interface IBaseProps<T = any> {
    componentRef?: IRefObject<T>;
}

export declare type ICancelable<T extends (...args: any[]) => any> = {
    flush: () => ReturnType<T>;
    cancel: () => void;
    pending: () => boolean;
};

/**
 * Change description used for change callbacks in GlobalSettings.
 *
 * @public
 * {@docCategory IChangeDescription}
 */
export declare interface IChangeDescription {
    key: string;
    oldValue: any;
    value: any;
}

/**
 * Change event callback.
 *
 * @public
 * {@docCategory IChangeEventCallback}
 */
export declare interface IChangeEventCallback {
    __id__?: string;
    (changeDescription?: IChangeDescription): void;
}

/**
 * @deprecated Use `IProcessedStyleSet` from `@fluentui/style-utilities` or `@fluentui/merge-styles` instead.
 */
export declare type IClassNames<T> = {
    [key in keyof T]: string;
};

export declare interface IClassNamesFunctionOptions {
    /**
     * Disables class caching for scenarios where styleProp parts mutate frequently.
     */
    disableCaching?: boolean;
    /**
     * Size of the cache. It overwrites default cache size when defined.
     */
    cacheSize?: number;
    /**
     * Set to true if component base styles are implemented in scss instead of css-in-js.
     */
    useStaticStyles?: boolean;
}

/**
 * Render function interface for providing overrideable render callbacks.
 *
 * @public
 * {@docCategory IComponentAs}
 */
export declare type IComponentAs<T> = React_2.ComponentType<IComponentAsProps<T>>;

/**
 * Properties used by render function interface for providing overrideable render callbacks.
 *
 * @public
 * {@docCategory IComponentAsProps}
 */
export declare type IComponentAsProps<T> = T & {
    defaultRender?: React_2.ComponentType<T>;
};

/**
 * css input type.
 *
 * @internal
 */
export declare type ICssInput = string | ISerializableObject | IDictionary | null | undefined | boolean;

export declare interface ICustomizableProps {
    /**
     * Name of scope, which can be targeted using the Customizer.
     */
    scope: string;
    /**
     * List of fields which can be customized.
     * @defaultvalue [ 'theme', 'styles' ]
     */
    fields?: string[];
}

export declare interface ICustomizations {
    settings: ISettings;
    scopedSettings: {
        [key: string]: ISettings;
    };
    inCustomizerContext?: boolean;
}

export declare interface ICustomizerContext {
    customizations: ICustomizations;
}

export declare type ICustomizerProps = IBaseProps & Partial<{
    /**
     * Settings are used as general settings for the React tree below.
     * Components can subscribe to receive the settings by using `customizable`.
     *
     * @example
     * ```
     * // Settings can be represented by a plain object that contains the key value pairs.
     * <Customizer settings={{ color: 'red' }} />
     *
     * // or a function that receives the current settings and returns the new ones
     * <Customizer settings={(currentSettings) => ({ ...currentSettings, color: 'red' })} />
     * ```
     */
    settings: ISettings | ISettingsFunction;
    /**
     * Scoped settings are settings that are scoped to a specific scope. The
     * scope is the name that is passed to the `customizable` function when the
     * the component is customized.
     *
     * @example
     * ```
     * // Scoped settings can be represented by a plain object that contains the key value pairs.
     * const myScopedSettings = {
     *   Button: { color: 'red' };
     * };
     * <Customizer scopedSettings={myScopedSettings} />
     *
     * // or a function that receives the current settings and returns the new ones
     * const myScopedSettings = {
     *   Button: { color: 'red' };
     * };
     * <Customizer scopedSettings={(currentScopedSettings) => ({ ...currentScopedSettings, ...myScopedSettings })} />
     * ```
     */
    scopedSettings: ISettings | ISettingsFunction;
}> & {
    children?: React_2.ReactNode;
    /**
     * Optional transform function for context. Any implementations should take care to return context without
     * mutating it.
     */
    contextTransform?: (context: Readonly<ICustomizerContext>) => ICustomizerContext;
};

/**
 * @internal
 */
export declare interface IDeclaredEventsByName {
    [eventName: string]: boolean;
}

/**
 * DelayedRender component props.
 *
 * @public
 */
export declare interface IDelayedRenderProps extends IReactProps<{}> {
    /**
     * Number of milliseconds to delay rendering children.
     */
    delay?: number;
}

/**
 * DelayedRender component state.
 *
 * @internal
 */
export declare interface IDelayedRenderState {
    /**
     * Whether the component is rendered or not.
     */
    isRendered: boolean;
}

/**
 * Dictionary of booleans.
 *
 * @internal
 */
export declare interface IDictionary {
    [className: string]: boolean;
}

/**
 * Disposable interface.
 *
 * @public
 * {@docCategory IDisposable}
 */
export declare interface IDisposable {
    dispose: () => void;
}

/**
 * @internal
 */
export declare interface IEventRecord {
    target: any;
    eventName: string;
    parent: any;
    callback: (args?: any) => void;
    elementCallback?: (...args: any[]) => void;
    objectCallback?: (args?: any) => void;
    options?: boolean | AddEventListenerOptions;
}

/**
 * @internal
 */
export declare interface IEventRecordList {
    [id: string]: IEventRecord[] | number;
    count: number;
}

/**
 * @internal
 */
export declare interface IEventRecordsByName {
    [eventName: string]: IEventRecordList;
}

/**
 * Options for fitting content sizes into bounding sizes.
 */
export declare interface IFitContentToBoundsOptions {
    /**
     * The size of the content to fit to the bounds.
     * The output will be proportional to this value.
     */
    contentSize: ISize;
    /**
     * The size of the bounds.
     */
    boundsSize: ISize;
    /**
     * The fit mode to apply, either 'contain' or 'cover'.
     */
    mode: FitMode;
    /**
     * An optional maximum scale factor to apply. The default is 1.
     * Use Infinity for an unbounded resize.
     */
    maxScale?: number;
}

export declare type IFocusRectsContext = {
    /**
     * Ref to the root element of the provider
     */
    readonly providerRef: React_2.RefObject<HTMLElement>;
    /**
     * Array of this and all child provider elements under this one in the React tree.
     *
     * Tracking all child providers will allow a focus event in the parent to also set focus styling in its descendants.
     * This is needed for Combobox, for example, because the focus events happen on the parent context, but the visual
     * focus indicator is in the combobox callout. The callout needs to be notified on focus events from the parent.
     */
    readonly registeredProviders: React_2.RefObject<HTMLElement>[];
    /**
     * Used by child FocusRectsProviders to register their element with the parent provider.
     */
    readonly registerProvider: (ref: React_2.RefObject<HTMLElement>) => void;
    /**
     * Used by child FocusRectsProviders to unregister their element from the parent provider.
     */
    readonly unregisterProvider: (ref: React_2.RefObject<HTMLElement>) => void;
};

/**
 * An array of IFRAME tag properties and events.
 *
 * @public
 */
export declare const iframeProperties: Record<string, number>;

/**
 * @deprecated Use imgProperties for img elements.
 */
export declare const imageProperties: Record<string, number>;

/**
 * An array of IMAGE tag properties and events.
 *
 * @public
 */
export declare const imgProperties: Record<string, number>;

/**
 * Helper to manage componentRef resolution. Internally appends logic to
 * lifetime methods to resolve componentRef to the passed in object.
 *
 * Usage: call initializeComponentRef(this) in the constructor,
 */
export declare function initializeComponentRef<TProps extends IBaseProps, TState>(obj: React_2.Component<TProps, TState>): void;

/**
 * Initializes the logic which:
 *
 * 1. Subscribes keydown and mousedown events. (It will only do it once per window,
 *    so it's safe to call this method multiple times.)
 * 2. When the user presses directional keyboard keys, adds the 'ms-Fabric--isFocusVisible' classname
 *    to the document body, removes the 'ms-Fabric-isFocusHidden' classname.
 * 3. When the user clicks a mouse button, adds the 'ms-Fabric-isFocusHidden' classname to the
 *    document body, removes the 'ms-Fabric--isFocusVisible' classname.
 *
 * This logic allows components on the page to conditionally render focus treatments based on
 * the existence of global classnames, which simplifies logic overall.
 *
 * @param window - the window used to add the event listeners
 * @deprecated Use useFocusRects hook or FocusRects component instead.
 */
export declare function initializeFocusRects(window?: Window): void;

/**
 * An array of INPUT tag properties and events.
 *
 * @public
 */
export declare const inputProperties: Record<string, number>;

/**
 * {@docCategory Selection}
 */
export declare interface IObjectWithKey {
    key?: string | number;
}

/**
 * PerfData interface.
 *
 * @internal
 */
export declare interface IPerfData {
    duration: number;
    timeStamp: number;
}

/**
 * PerfMeasurement interface.
 *
 * @internal
 */
export declare interface IPerfMeasurement {
    totalDuration: number;
    count: number;
    all: IPerfData[];
}

/**
 * PerfSummary interface.
 *
 * @internal
 */
export declare interface IPerfSummary {
    [key: string]: IPerfMeasurement;
}

/**
 * Point interface.
 *
 * @public
 * @deprecated Use `Point` instead.
 * {@docCategory Point}
 */
export declare interface IPoint extends Point {
}

export declare interface IPropsWithStyles<TStyleProps, TStyleSet extends IStyleSetBase> {
    styles?: IStyleFunctionOrObject<TStyleProps, TStyleSet>;
}

export declare interface IReactProps<T> {
    children?: React_2.ReactNode | undefined;
    key?: React_2.Key | undefined;
    ref?: React_2.LegacyRef<T> | undefined;
}

/**
 * Rectangle interface.
 *
 * @public
 * {@docCategory IRectangle}
 */
export declare interface IRectangle {
    left: number;
    top: number;
    width: number;
    height: number;
    right?: number;
    bottom?: number;
}

export declare type IRefObject<T> = React_2.RefObject<T> | RefObject<T> | ((ref: T | null) => void);

/**
 * An interface representing a component that will not output any DOM, will just render its children and
 * pass through items to modify the children.
 *
 * {@docCategory IRenderComponent}
 */
export declare interface IRenderComponent<TProps> {
    /**
     * JSX.Element to return in this component's render() function.
     */
    children: (props: TProps) => JSX.Element;
}

/**
 * Render function interface for providing overrideable render callbacks.
 *
 * @public
 */
export declare interface IRenderFunction<P> {
    (props?: P, defaultRender?: (props?: P) => JSX.Element | null): JSX.Element | null;
}

/**
 * Determines whether a component is controlled.
 * @param props - Component props
 * @param valueProp - Prop containing the controlled value
 * @returns true if controlled, false if uncontrolled
 */
export declare function isControlled<P>(props: P, valueProp: keyof P): boolean;

/**
 * Returns true if the keycode is a directional keyboard key.
 */
export declare function isDirectionalKeyCode(which: number): boolean;

/**
 * {@docCategory Selection}
 */
export declare interface ISelection<TItem = IObjectWithKey> {
    count: number;
    mode: SelectionMode_2;
    canSelectItem: (item: TItem, index?: number) => boolean;
    setChangeEvents(isEnabled: boolean, suppressChange?: boolean): void;
    setItems(items: TItem[], shouldClear: boolean): void;
    getItems(): TItem[];
    getItemIndex?(key: string): number;
    getSelection(): TItem[];
    getSelectedIndices(): number[];
    getSelectedCount(): number;
    isRangeSelected(fromIndex: number, count: number): boolean;
    isAllSelected(): boolean;
    isKeySelected(key: string): boolean;
    isIndexSelected(index: number): boolean;
    isModal?(): boolean;
    setAllSelected(isAllSelected: boolean): void;
    setKeySelected(key: string, isSelected: boolean, shouldAnchor: boolean): void;
    setIndexSelected(index: number, isSelected: boolean, shouldAnchor: boolean): void;
    setRangeSelected?(fromIndex: number, count: number, isSelected: boolean, shouldAnchor: boolean): void;
    setModal?(isModal: boolean): void;
    selectToKey(key: string, clearSelection?: boolean): void;
    selectToIndex(index: number, clearSelection?: boolean): void;
    selectToRange?(index: number, count: number, clearSelection?: boolean): void;
    toggleAllSelected(): void;
    toggleKeySelected(key: string): void;
    toggleIndexSelected(index: number): void;
    toggleRangeSelected(fromIndex: number, count: number): void;
}

/**
 * {@docCategory Selection}
 */
export declare interface ISelectionOptions<TItem = IObjectWithKey> {
    onSelectionChanged?: () => void;
    onItemsChanged?: () => void;
    /** Custom logic to generate item keys. Required if `TItem` does not have a `key` property. */
    getKey?: (item: TItem, index?: number) => string | number;
    canSelectItem?: (item: TItem, index?: number) => boolean;
    selectionMode?: SelectionMode_2;
    items?: TItem[];
}

/**
 * Selection options with required `getKey` property.
 * {@docCategory Selection}
 */
export declare type ISelectionOptionsWithRequiredGetKey<TItem> = ISelectionOptions<TItem> & Required<Pick<ISelectionOptions<TItem>, 'getKey'>>;

/**
 * Determines if a given element is a focus sub zone.
 *
 * @public
 */
export declare function isElementFocusSubZone(element?: HTMLElement): boolean;

/**
 * Determines if a given element is a focus zone.
 *
 * @public
 */
export declare function isElementFocusZone(element?: HTMLElement): boolean;

/**
 * Determines if an element can receive focus programmatically or via a mouse click.
 * If checkTabIndex is true, additionally checks to ensure the element can be focused with the tab key,
 * meaning tabIndex != -1.
 *
 * @public
 */
export declare function isElementTabbable(element: HTMLElement, checkTabIndex?: boolean, checkShadowRoot?: boolean): boolean;

/**
 * Determines if an element is visible.
 *
 * @public
 */
export declare function isElementVisible(element: HTMLElement | undefined | null): boolean;

/**
 * Determines if an element is visible and not hidden
 * @param element - Element to check
 * @returns Returns true if the given element is visible and not hidden
 *
 * @public
 */
export declare function isElementVisibleAndNotHidden(element: HTMLElement | undefined | null, win?: Window): boolean;

/**
 * Serializable object.
 *
 * @internal
 */
export declare interface ISerializableObject {
    toString?: () => string;
}

export declare type ISettings = {
    [key: string]: any;
};

export declare type ISettingsFunction = (settings: ISettings) => ISettings;

export declare type ISettingsMap<T> = {
    [P in keyof T]?: string;
};

export declare const IsFocusVisibleClassName = "ms-Fabric--isFocusVisible";

export declare const isIE11: () => boolean;

/**
 * Returns true if and only if the user is on a iOS device.
 * Used to determine whether iOS-specific behavior should be applied.
 */
export declare const isIOS: () => boolean;

/**
 * {@docCategory ISize}
 */
export declare interface ISize {
    width: number;
    height: number;
}

/**
 * Returns true if the user is on a Mac. Caches the result value.
 * @param reset - Reset the cached result value (mainly for testing).
 */
export declare function isMac(reset?: boolean): boolean;

export { IStyleFunction }

export { IStyleFunctionOrObject }

export { isVirtualElement }

export { IVirtualElement }

export declare interface IWarnControlledUsageParams<P> {
    /** ID of the component instance. Used to prevent showing warnings repeatedly. */
    componentId: string;
    /** Name of the component class. */
    componentName: string;
    /** Current props to evaluate. */
    props: P;
    /** Previous props to evaluate (undefined if called in the constructor). */
    oldProps?: P;
    /** Name of the prop for the controlled value. */
    valueProp: keyof P;
    /** Name of the prop for the uncontrolled initial value. */
    defaultValueProp: keyof P;
    /** Name of the change handler prop. */
    onChangeProp: keyof P;
    /** Name of the read-only prop. */
    readOnlyProp?: keyof P;
}

/**
 * Simulated enum for keycodes. These will get inlined by uglify when used much like an enum
 *
 * @public
 * {@docCategory KeyCodes}
 */
export declare const KeyCodes: {
    backspace: 8;
    tab: 9;
    enter: 13;
    shift: 16;
    ctrl: 17;
    alt: 18;
    pauseBreak: 19;
    capslock: 20;
    escape: 27;
    space: 32;
    pageUp: 33;
    pageDown: 34;
    end: 35;
    home: 36;
    left: 37;
    up: 38;
    right: 39;
    down: 40;
    insert: 45;
    del: 46;
    zero: 48;
    one: 49;
    two: 50;
    three: 51;
    four: 52;
    five: 53;
    six: 54;
    seven: 55;
    eight: 56;
    nine: 57;
    colon: 58;
    a: 65;
    b: 66;
    c: 67;
    d: 68;
    e: 69;
    f: 70;
    g: 71;
    h: 72;
    i: 73;
    j: 74;
    k: 75;
    l: 76;
    m: 77;
    n: 78;
    o: 79;
    p: 80;
    q: 81;
    r: 82;
    s: 83;
    t: 84;
    u: 85;
    v: 86;
    w: 87;
    x: 88;
    y: 89;
    z: 90;
    leftWindow: 91;
    rightWindow: 92;
    select: 93;
    zero_numpad: 96;
    one_numpad: 97;
    two_numpad: 98;
    three_numpad: 99;
    four_numpad: 100;
    five_numpad: 101;
    six_numpad: 102;
    seven_numpad: 103;
    eight_numpad: 104;
    nine_numpad: 105;
    multiply: 106;
    add: 107;
    subtract: 109;
    decimalPoint: 110;
    divide: 111;
    f1: 112;
    f2: 113;
    f3: 114;
    f4: 115;
    f5: 116;
    f6: 117;
    f7: 118;
    f8: 119;
    f9: 120;
    f10: 121;
    f11: 122;
    f12: 123;
    numlock: 144;
    scrollLock: 145;
    semicolon: 186;
    equalSign: 187;
    comma: 188;
    dash: 189;
    period: 190;
    forwardSlash: 191;
    graveAccent: 192;
    openBracket: 219;
    backSlash: 220;
    closeBracket: 221;
    singleQuote: 222;
};

export declare type KeyCodes = number;

/**
 * An array of LABEL tag properties and events.
 *
 * @public
 */
export declare const labelProperties: Record<string, number>;

/**
 * An array of LI tag properties and events.
 *
 * @public
 */
export declare const liProperties: Record<string, number>;

/**
 * Takes an enum and iterates over each value of the enum (as a string), running the callback on each,
 * returning a mapped array.
 * @param theEnum - Enum to iterate over
 * @param callback - The first parameter the name of the entry, and the second parameter is the value
 * of that entry, which is the value you'd normally use when using the enum (usually a number).
 */
export declare function mapEnumByName<T>(theEnum: any, callback: (name?: string, value?: string | number) => T | undefined): (T | undefined)[] | undefined;

/**
 * Memoize decorator to be used on class methods. WARNING: the `this` reference
 * will be inaccessible within a memoized method, given that a cached method's `this`
 * would not be instance-specific.
 *
 * @public
 */
export declare function memoize<T extends Function>(_target: any, _key: string, descriptor: TypedPropertyDescriptor<T>): {
    configurable: boolean;
    get(): T;
};

/**
 * Memoizes a function; when you pass in the same parameters multiple times, it returns a cached result.
 * Be careful when passing in objects, you need to pass in the same INSTANCE for caching to work. Otherwise
 * it will grow the cache unnecessarily. Also avoid using default values that evaluate functions; passing in
 * undefined for a value and relying on a default function will execute it the first time, but will not
 * re-evaluate subsequent times which may have been unexpected.
 *
 * By default, the cache will reset after 100 permutations, to avoid abuse cases where the function is
 * unintendedly called with unique objects. Without a reset, the cache could grow infinitely, so we safeguard
 * by resetting. To override this behavior, pass a value of 0 to the maxCacheSize parameter.
 *
 * @public
 * @param cb - The function to memoize.
 * @param maxCacheSize - Max results to cache. If the cache exceeds this value, it will reset on the next call.
 * @param ignoreNullOrUndefinedResult - Flag to decide whether to cache callback result if it is undefined/null.
 * If the flag is set to true, the callback result is recomputed every time till the callback result is
 * not undefined/null for the first time, and then the non-undefined/null version gets cached.
 * @returns A memoized version of the function.
 */
export declare function memoizeFunction<T extends (...args: any[]) => RetType, RetType>(cb: T, maxCacheSize?: number, ignoreNullOrUndefinedResult?: boolean): T;

/**
 * Simple deep merge function. Takes all arguments and returns a deep copy of the objects merged
 * together in the order provided. If an object creates a circular reference, it will assign the
 * original reference.
 */
export declare function merge<T = {}>(target: Partial<T>, ...args: (Partial<T> | null | undefined | false)[]): T;

/**
 * ARIA helper to concatenate attributes, returning undefined if all attributes
 * are undefined. (Empty strings are not a valid ARIA attribute value.)
 *
 * @param ariaAttributes - ARIA attributes to merge
 */
export declare function mergeAriaAttributeValues(...ariaAttributes: (string | undefined | false)[]): string | undefined;

/**
 * Merge props and customizations giving priority to props over context.
 * NOTE: This function will always perform multiple merge operations. Use with caution.
 * @param props - New settings to merge in.
 * @param parentContext - Context containing current settings.
 * @returns Merged customizations.
 */
export declare function mergeCustomizations(props: ICustomizerProps, parentContext: ICustomizerContext): ICustomizerContext;

export declare function mergeScopedSettings(oldSettings?: ISettings, newSettings?: ISettings | ISettingsFunction): ISettings;

/**
 * Merge new and old settings, giving priority to new settings.
 * New settings is optional in which case oldSettings is returned as-is.
 * @param oldSettings - Old settings to fall back to.
 * @param newSettings - New settings that will be merged over oldSettings.
 * @returns Merged settings.
 */
export declare function mergeSettings(oldSettings?: ISettings, newSettings?: ISettings | ISettingsFunction): ISettings;

export declare type MergeStylesContextConsumerProps = {
    stylesheetKey: string;
    children: (inShadow: boolean) => React_2.ReactElement<any, any>;
};

export declare type MergeStylesRootContextValue = {
    /**
     * Map of stylesheets available in the context.
     */
    stylesheets: Map<string, ExtendedCSSStyleSheet>;
    useAdoptedStylesheetEx: AdoptedStylesheetExHook;
    useAdoptedStylesheet: AdoptedStylesheetHook;
    useShadowConfig: ShadowConfigHook;
    useMergeStylesShadowRootContext: MergeStylesShadowRootContetHook;
    useHasMergeStylesShadowRootContext: HasMergeStylesShadowRootContextHook;
    useMergeStylesRootStylesheets: MergeStylesRootStylesheetsHook;
    useWindow: UseWindowHook;
    useStyled: UseStyledHook;
};

/**
 * Root context provider for mergeStyles shadow DOM.
 * Typically this is placed at the render root of your React application.
 */
export declare const MergeStylesRootProvider: React_2.FC<MergeStylesRootProviderProps>;

export declare type MergeStylesRootProviderProps = {
    /**
     * Map of stylesheets available in the context.
     */
    stylesheets?: Map<string, ExtendedCSSStyleSheet>;
    /**
     * Optional `window` object to use for reading adopted stylesheets.
     * Useful for multi-window scenarios.
     */
    window?: Window;
    useAdoptedStylesheetEx?: AdoptedStylesheetExHook;
    useAdoptedStylesheet?: AdoptedStylesheetHook;
    useShadowConfig?: ShadowConfigHook;
    useMergeStylesShadowRootContext?: MergeStylesShadowRootContetHook;
    useHasMergeStylesShadowRootContext?: HasMergeStylesShadowRootContextHook;
    useMergeStylesRootStylesheets?: MergeStylesRootStylesheetsHook;
    useWindow?: UseWindowHook;
    useStyled?: UseStyledHook;
};

declare type MergeStylesRootStylesheetsHook = () => Map<string, ExtendedCSSStyleSheet>;

declare type MergeStylesShadowRootContetHook = () => MergeStylesShadowRootContextValue | undefined;

export declare const MergeStylesShadowRootContext: React_2.Context<MergeStylesShadowRootContextValue | undefined>;

export declare type MergeStylesShadowRootContextValue = {
    /**
     * Map of stylesheets available in the context.
     */
    stylesheets: Map<string, CSSStyleSheet>;
    /**
     * Shadow root for this context.
     */
    shadowRoot?: ShadowRoot | null;
};

/**
 * Context for a shadow root.
 */
export declare const MergeStylesShadowRootProvider: React_2.FC<MergeStylesShadowRootProviderProps>;

export declare type MergeStylesShadowRootProviderProps = {
    /**
     * Shadow root for this context.
     */
    shadowRoot?: ShadowRoot | null;
};

/**
 * The helper functions here will make the target element as modal to screen readers, by placing aria-hidden on elements
 * that are siblings to the target element and the target element's ancestors (because aria-hidden gets inherited).
 * That way, all other elements on the page are hidden to the screen reader.
 */
/**
 * Call this on a target element to make it modal to screen readers.
 * Returns a function that undoes the changes it made.
 */
export declare function modalize(target: HTMLElement): () => void;

/**
 * Simple constant function for returning null, used to render empty templates in JSX.
 *
 * @public
 */
export declare function nullRender(): JSX.Element | null;

/**
 * An array of OL tag properties and events.
 *
 * @public
 */
export declare const olProperties: Record<string, number>;

/**
 * Tiny helper to do the minimal amount of work in duplicating an object but omitting some
 * props. This ends up faster than using object ...rest or reduce to filter.
 *
 * This behaves very much like filteredAssign, but does not merge many objects together,
 * uses an exclusion object map, and avoids spreads all for optimal performance.
 *
 * See perf test for background:
 * https://jsperf.com/omit-vs-rest-vs-reduce/1
 *
 * @param obj - The object to clone
 * @param exclusions - The array of keys to exclude
 */
export declare function omit<TObj extends Record<string, any>>(obj: TObj, exclusions: (keyof TObj)[]): TObj;

export { Omit_2 as Omit }

export declare function on(element: Element | Window | Document, eventName: string, callback: (ev: Event) => void, options?: boolean): () => void;

export declare const optionProperties: Record<string, number>;

/**
 * Point interface.
 *
 * @public
 * {@docCategory Point}
 */
export declare interface Point {
    left?: number;
    top?: number;
    /** @deprecated Use `left` instead */
    x?: number;
    /** @deprecated Use `top` instead */
    y?: number;
}

export { portalContainsElement }

/**
 * Rounds a number to a certain level of precision. Accepts negative precision.
 * @param value - The value that is being rounded.
 * @param precision - The number of decimal places to round the number to
 */
export declare function precisionRound(value: number, precision: number, base?: number): number;

/** Raises a click event.
 * @deprecated Moved to `FocusZone` component since it was the only place internally using this function.
 */
export declare function raiseClick(target: Element, doc?: Document): void;

/**
 * Rectangle helper class.
 *
 * @public
 * {@docCategory Rectangle}
 */
export declare class Rectangle {
    top: number;
    bottom: number;
    left: number;
    right: number;
    constructor(left?: number, right?: number, top?: number, bottom?: number);
    /**
     * Calculated automatically by subtracting the right from left
     */
    get width(): number;
    /**
     * Calculated automatically by subtracting the bottom from top.
     */
    get height(): number;
    /**
     * Tests if another rect is approximately equal to this rect (within 4 decimal places.)
     */
    equals(rect: Rectangle): boolean;
}

export declare type RefObject<T> = {
    (component: T | null): void;
    current: T | null;
};

/**
 * Removes a keycode to the list of keys that, when pressed, should cause the focus outlines to be visible.
 * This can be used to remove global shortcut keys that directionally move from section to section within
 * an app or between focus trap zones.
 */
export declare function removeDirectionalKeyCode(which: number): void;

/**
 * Given an array, it returns a new array that does not contain the item at the given index.
 * @param array - The array to operate on
 * @param index - The index of the element to remove
 */
export declare function removeIndex<T>(array: T[], index: number): T[];

/**
 * Given an array, this function returns a new array where the element at a given index has been replaced.
 * @param array - The array to operate on
 * @param newElement - The element that will be placed in the new array
 * @param index - The index of the element that should be replaced
 */
export declare function replaceElement<T>(array: T[], newElement: T, index: number): T[];

/** Reset controlled usage warnings for testing purposes. */
export declare function resetControlledWarnings(): void;

/**
 * Resets id counter to an (optional) number.
 *
 * @public
 */
export declare function resetIds(counter?: number): void;

/**
 * Reset memoizations.
 */
export declare function resetMemoizations(): void;

/**
 * Generates a function to be attached to a React component, which can be called
 * as a replacement to RAF. In-flight async calls will be auto canceled if the component
 * is unmounting before the async code is executed, preventing bugs where code
 * accesses things within the component after being unmounted.
 */
export declare const safeRequestAnimationFrame: (component: React_2.Component) => (cb: Function) => void;

/**
 * Generates a function to be attached to a React component, which can be called
 * as a replacement to setTimeout. In-flight async calls will be auto canceled if the component
 * is unmounting before the async code is executed, preventing bugs where code
 * accesses things within the component after being unmounted.
 */
export declare const safeSetTimeout: (component: React_2.Component) => (cb: Function, duration: number) => void;

/**
 * {@docCategory Selection}
 */
declare class Selection_2<TItem = IObjectWithKey> implements ISelection<TItem> {
    /** Number of items selected. Do not modify. */
    count: number;
    readonly mode: SelectionMode_2;
    private _getKey;
    private _canSelectItem;
    private _changeEventSuppressionCount;
    private _items;
    private _selectedItems;
    private _selectedIndices;
    private _isAllSelected;
    private _exemptedIndices;
    private _exemptedCount;
    private _keyToIndexMap;
    private _anchoredIndex;
    private _onSelectionChanged;
    private _onItemsChanged;
    private _hasChanged;
    private _unselectableIndices;
    private _unselectableCount;
    private _isModal;
    /**
     * Create a new Selection. If `TItem` does not have a `key` property, you must provide an options
     * object with a `getKey` implementation. Providing options is optional otherwise.
     * (At most one `options` object is accepted.)
     */
    constructor(...options: TItem extends IObjectWithKey ? [] | [ISelectionOptions<TItem>] : [ISelectionOptionsWithRequiredGetKey<TItem>]);
    canSelectItem(item: TItem, index?: number): boolean;
    getKey(item: TItem, index?: number): string;
    setChangeEvents(isEnabled: boolean, suppressChange?: boolean): void;
    isModal(): boolean;
    setModal(isModal: boolean): void;
    /**
     * Selection needs the items, call this method to set them. If the set
     * of items is the same, this will re-evaluate selection and index maps.
     * Otherwise, shouldClear should be set to true, so that selection is
     * cleared.
     */
    setItems(items: TItem[], shouldClear?: boolean): void;
    getItems(): TItem[];
    getSelection(): TItem[];
    getSelectedCount(): number;
    getSelectedIndices(): number[];
    getItemIndex(key: string): number;
    isRangeSelected(fromIndex: number, count: number): boolean;
    isAllSelected(): boolean;
    isKeySelected(key: string): boolean;
    isIndexSelected(index: number): boolean;
    setAllSelected(isAllSelected: boolean): void;
    setKeySelected(key: string, isSelected: boolean, shouldAnchor: boolean): void;
    setIndexSelected(index: number, isSelected: boolean, shouldAnchor: boolean): void;
    setRangeSelected(fromIndex: number, count: number, isSelected: boolean, shouldAnchor: boolean): void;
    selectToKey(key: string, clearSelection?: boolean): void;
    selectToRange(fromIndex: number, count: number, clearSelection?: boolean): void;
    selectToIndex(index: number, clearSelection?: boolean): void;
    toggleAllSelected(): void;
    toggleKeySelected(key: string): void;
    toggleIndexSelected(index: number): void;
    toggleRangeSelected(fromIndex: number, count: number): void;
    private _updateCount;
    private _setAllSelected;
    private _change;
}
export { Selection_2 as Selection }

export declare const SELECTION_CHANGE = "change";

export declare const SELECTION_ITEMS_CHANGE = "items-change";

/**
 * {@docCategory Selection}
 */
export declare enum SelectionDirection {
    horizontal = 0,
    vertical = 1
}

/**
 * {@docCategory Selection}
 */
declare enum SelectionMode_2 {
    none = 0,
    single = 1,
    multiple = 2
}
export { SelectionMode_2 as SelectionMode }

/**
 * An array of SELECT tag properties and events.
 *
 * @public
 */
export declare const selectProperties: Record<string, number>;

/**
 * @deprecated Unused as of version 8
 */
export declare function setBaseUrl(baseUrl: string): void;

/**
 * Sets the visibility of focus styling.
 *
 * By default, focus styles (the box surrounding a focused Button, for example) only show up when navigational
 * keypresses occur (through Tab, arrows, PgUp/PgDn, Home and End), and are hidden when mouse interactions occur.
 * This API provides an imperative way to turn them on/off.
 *
 * A use case might be when you have a keypress like ctrl-f6 navigate to a particular region on the page,
 * and want focus to show up.
 *
 * @param enabled - Whether to turn focus visibility on or off.
 * @param target - Optional target from which to get window in case no `providerElem` has been specified.
 * @param registeredProviders - Array of provider refs that are associated with a FocusRectsProvider. If no array
 *                              is passed in, the classnames are attached to the document body that contains `target`.
 */
export declare function setFocusVisibility(enabled: boolean, target?: Element, registeredProviders?: React_2.RefObject<HTMLElement>[]): void;

/**
 * Sets the language for the page (by adjusting the lang attribute of the html element).
 * @param language - Language to set.
 * @param persistenceType - Where to persist the value. Default is `sessionStorage` if available.
 */
export declare function setLanguage(language: string, persistenceType?: 'localStorage' | 'sessionStorage' | 'none'): void;

/**
 * Sets the language for the page (by adjusting the lang attribute of the html element).
 * @deprecated Use string parameter version.
 * @param language - Language to set.
 * @param avoidPersisting - If true, don't store the value.
 */
export declare function setLanguage(language: string, avoidPersisting?: boolean): void;

/**
 *  Test utility for providing a custom weakmap.
 *
 * @internal
 * */
export declare function setMemoizeWeakMap(weakMap: any): void;

export { setPortalAttribute }

/**
 * Sets the rtl state of the page (by adjusting the dir attribute of the html element.)
 */
export declare function setRTL(isRTL: boolean, persistSetting?: boolean): void;

/**
 * Helper to set ssr mode to simulate no window object returned from getWindow helper.
 *
 * @deprecated Use `canUseDOM` from `@fluentui/utilities` instead.
 */
export declare function setSSR(isEnabled: boolean): void;

/**
 * @deprecated Use ISettings.
 */
export declare type Settings = ISettings;

/**
 * @deprecated Use ISettingsFunction.
 */
export declare type SettingsFunction = ISettingsFunction;

export { setVirtualParent }

/**
 * Configures the warning callback. Passing in undefined will reset it to use the default
 * console.warn function.
 *
 * @public
 * @param warningCallback - Callback to override the generated warnings.
 */
export declare function setWarningCallback(warningCallback?: (message: string) => void): void;

export declare type ShadowConfigHook = (stylesheetKey: string, inShadow: boolean, win?: Window) => ShadowConfig;

/**
 * Compares a to b and b to a.
 *
 * @public
 */
export declare function shallowCompare<TA extends any, TB extends any>(a: TA, b: TB): boolean;

/**
 * Determines if an, or any of its ancestors, sepcificies that it doesn't want focus to wrap
 * @param element - element to start searching from
 * @param noWrapDataAttribute - the no wrap data attribute to match (either)
 * @returns true if focus should wrap, false otherwise
 */
export declare function shouldWrapFocus(element: HTMLElement, noWrapDataAttribute: 'data-no-vertical-wrap' | 'data-no-horizontal-wrap', doc?: Document): boolean;

/**
 * The styled HOC wrapper allows you to create a functional wrapper around a given component which will resolve
 * getStyles functional props, and mix customized props passed in using concatStyleSets.
 *
 * @example
 * ```tsx
 * export const Toggle = styled(
 *   ToggleBase,
 *   props => ({ root: { background: 'red' }})
 * );
 * ```
 * @param Component - The unstyled base component to render, which receives styles.
 * @param baseStyles - The styles which should be curried with the component.
 * @param getProps - A helper which provides default props.
 * @param customizable - An object which defines which props can be customized using the Customizer.
 * @param pure - A boolean indicating if the component should avoid re-rendering when props haven't changed.
 * Note that pure should not be used on components which allow children, or take in complex objects or
 * arrays as props which could mutate on every render.
 */
export declare function styled<TComponentProps extends IPropsWithStyles<TStyleProps, TStyleSet>, TStyleProps, TStyleSet extends IStyleSetBase>(Component: React_2.ComponentClass<TComponentProps> | React_2.FunctionComponent<TComponentProps>, baseStyles: IStyleFunctionOrObject<TStyleProps, TStyleSet>, getProps?: (props: TComponentProps) => Partial<TComponentProps>, customizable?: ICustomizableProps, pure?: boolean): React_2.FunctionComponent<TComponentProps>;

export declare function styled<TComponentProps extends IPropsWithStyles<TStyleProps, TStyleSet> & React_2.RefAttributes<TRef>, TStyleProps, TStyleSet extends IStyleSetBase, TRef = unknown>(Component: React_2.ComponentClass<TComponentProps> | React_2.FunctionComponent<TComponentProps>, baseStyles: IStyleFunctionOrObject<TStyleProps, TStyleSet>, getProps?: (props: TComponentProps) => Partial<TComponentProps>, customizable?: ICustomizableProps, pure?: boolean): React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<TComponentProps> & React_2.RefAttributes<TRef>>;

export declare type StyleFunction<TStyleProps, TStyleSet extends IStyleSetBase> = IStyleFunctionOrObject<TStyleProps, TStyleSet> & {
    /** Cache for all style functions. */
    __cachedInputs__: (IStyleFunctionOrObject<TStyleProps, TStyleSet> | undefined)[];
    /** True if no styles prop or styles from Customizer is passed to wrapped component. */
    __noStyleOverride__: boolean;
    /** Shadow DOM configuration object */
    __shadowConfig__?: ShadowConfig;
};

/**
 * An array of TABLE tag properties and events.
 *
 * @public
 */
export declare const tableProperties: Record<string, number>;

/**
 * An array of TD tag properties and events.
 *
 * @public
 */
export declare const tdProperties: Record<string, number>;

/**
 * An array of TEXTAREA tag properties and events.
 *
 * @public
 */
export declare const textAreaProperties: Record<string, number>;

/**
 * An array of TH tag properties and events.
 *
 * @public
 */
export declare const thProperties: Record<string, number>;

/**
 * Convert the given array to a matrix with columnCount number
 * of columns.
 *
 * @public
 * @param items - The array to convert
 * @param columnCount - The number of columns for the resulting matrix
 * @returns A matrix of items
 */
export declare function toMatrix<T>(items: T[], columnCount: number): T[][];

/**
 * An array of TR tag properties and events.
 *
 * @public
 */
export declare const trProperties: Record<string, number>;

/**
 * Provides a method for convenience to unhoist hoisted methods.
 *
 * @public
 * @param source - The source object upon which methods were hoisted.
 * @param methodNames - An array of method names to unhoist.
 */
export declare function unhoistMethods(source: any, methodNames: string[]): void;

/**
 * Use adopted stylesheets in the parent shadow root.
 */
export declare const useAdoptedStylesheet: AdoptedStylesheetHook;

/**
 * Optimization for specific cases like nested customizables.
 */
export declare const useAdoptedStylesheetEx: AdoptedStylesheetExHook;

/**
 * Hook to get Customizations settings from Customizations singleton or CustomizerContext.
 * It will trigger component state update on settings change observed.
 */
export declare function useCustomizationSettings(properties: string[], scopeName?: string): ISettings;

/**
 * Initializes the logic which:
 *
 * 1. Subscribes keydown, keyup, mousedown and pointerdown events. (It will only do it once for the current element of
 *    the FocusRectsContext providerRef or once per window if no such element is provided via context, so it's safe to
 *    call this method multiple times.)
 * 2. When the user presses triggers a keydown or keyup event via directional keyboard keys, adds the
 *    'ms-Fabric--isFocusVisible' classname to the current element of the FocusRectsContext providerRef or the document
 *    body if no such element is provided via context, and removes the 'ms-Fabric-isFocusHidden' classname.
 * 3. When the user triggers a mousedown or pointerdown event, adds the 'ms-Fabric-isFocusHidden' classname to the
 *    current element of the FocusRectsContext providerRef or the document body if no such element is provided via
 *    context, and removes the 'ms-Fabric--isFocusVisible' classname.
 *
 * This logic allows components on the page to conditionally render focus treatments based on
 * the existence of global classnames, which simplifies logic overall.
 *
 * @param rootRef - A Ref object. Focus rectangle can be applied on itself and all its children.
 */
export declare function useFocusRects(rootRef?: React_2.RefObject<HTMLElement>): void;

/**
 * Test if a context is available.
 * @returns true if there is a context.
 */
export declare const useHasMergeStylesShadowRootContext: HasMergeStylesShadowRootContextHook;

/**
 * React currently throws a warning when using `useLayoutEffect` on the server. To get around it,
 * this hook calls `useEffect` on the server (no-op) and `useLayoutEffect` in the browser.
 *
 * Prefer `useEffect` unless you have a specific need to do something after mount and before paint,
 * such as to avoid a render flash for certain operations.
 *
 * Server-side rendering is detected based on `canUseDOM` from `@fluentui/utilities`.
 *
 * https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
 * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
 */
export declare const useIsomorphicLayoutEffect: typeof React_2.useEffect;

export declare const useMergeStylesHooks: () => {
    useAdoptedStylesheet: AdoptedStylesheetHook;
    useAdoptedStylesheetEx: AdoptedStylesheetExHook;
    useShadowConfig: ShadowConfigHook;
    useMergeStylesShadowRootContext: MergeStylesShadowRootContetHook;
    useHasMergeStylesShadowRootContext: HasMergeStylesShadowRootContextHook;
    useMergeStylesRootStylesheets: MergeStylesRootStylesheetsHook;
    useWindow: () => Window | undefined;
    useStyled: UseStyledHook;
};

/**
 * Get the map of stylesheets available in the context.
 */
export declare const useMergeStylesRootStylesheets: MergeStylesRootStylesheetsHook;

/**
 * Get a reference to the shadow root context.
 * @returns The context for the shadow root.
 */
export declare const useMergeStylesShadowRootContext: MergeStylesShadowRootContetHook;

/**
 * Get a shadow config.
 * @param stylesheetKey - Globally unique key
 * @param win - Reference to the `window` global.
 * @returns ShadowConfig
 */
export declare const useShadowConfig: ShadowConfigHook;

export declare const useStyled: UseStyledHook;

export declare type UseStyledHook = (scope: string) => ShadowConfig | undefined;

declare type UseWindowHook = () => Window | undefined;

/**
 * Get all values in an object dictionary
 *
 * @param obj - The dictionary to get values for
 */
export declare function values<T>(obj: any): T[];

/**
 * An array of VIDEO tag properties and events.
 *
 * @public
 */
export declare const videoProperties: Record<string, number>;

/**
 * Sends a warning to console, if the api is present.
 *
 * @public
 * @param message - Warning message.
 */
export declare function warn(message: string): void;

/**
 * Warns when props are required if a condition is met.
 *
 * @public
 * @param componentName - The name of the component being used.
 * @param props - The props passed into the component.
 * @param requiredProps - The name of the props that are required when the condition is met.
 * @param conditionalPropName - The name of the prop that the condition is based on.
 * @param condition - Whether the condition is met.
 */
export declare function warnConditionallyRequiredProps<P extends {}>(componentName: string, props: P, requiredProps: string[], conditionalPropName: string, condition: boolean): void;

/**
 * Check for and warn on the following error conditions with a form component:
 * - A value prop is provided (indicated it's being used as controlled) without a change handler,
 *    and the component is not read-only
 * - Both the value and defaultValue props are provided
 * - The component is attempting to switch between controlled and uncontrolled
 *
 * The messages mimic the warnings React gives for these error conditions on input elements.
 * The warning will only be displayed once per component ID.
 */
export declare function warnControlledUsage<P>(params: IWarnControlledUsageParams<P>): void;

/**
 * Warns when a deprecated props are being used.
 *
 * @public
 * @param componentName - The name of the component being used.
 * @param props - The props passed into the component.
 * @param deprecationMap - The map of deprecations, where key is the prop name and the value is
 * either null or a replacement prop name.
 */
export declare function warnDeprecations<P extends {}>(componentName: string, props: P, deprecationMap: ISettingsMap<P>): void;

/**
 * Warns when two props which are mutually exclusive are both being used.
 *
 * @public
 * @param componentName - The name of the component being used.
 * @param props - The props passed into the component.
 * @param exclusiveMap - A map where the key is a parameter, and the value is the other parameter.
 */
export declare function warnMutuallyExclusive<P>(componentName: string, props: P, exclusiveMap: ISettingsMap<P>): void;

export { }