@fluentui/react
Version:
Reusable React components for building web experiences.
1,161 lines (1,069 loc) • 772 kB
TypeScript
import { addDays } from '@fluentui/date-time-utilities';
import { addDirectionalKeyCode } from '@fluentui/utilities';
import { addElementAtIndex } from '@fluentui/utilities';
import { addMonths } from '@fluentui/date-time-utilities';
import { addWeeks } from '@fluentui/date-time-utilities';
import { addYears } from '@fluentui/date-time-utilities';
import { allowOverscrollOnElement } from '@fluentui/utilities';
import { allowScrollOnElement } from '@fluentui/utilities';
import { anchorProperties } from '@fluentui/utilities';
import { AnimationClassNames } from '@fluentui/style-utilities';
import { AnimationStyles } from '@fluentui/style-utilities';
import { AnimationVariables } from '@fluentui/style-utilities';
import { appendFunction } from '@fluentui/utilities';
import { arraysEqual } from '@fluentui/utilities';
import { asAsync } from '@fluentui/utilities';
import { assertNever } from '@fluentui/utilities';
import { assign } from '@fluentui/utilities';
import { Async } from '@fluentui/utilities';
import { audioProperties } from '@fluentui/utilities';
import { AutoScroll } from '@fluentui/utilities';
import { BaseComponent } from '@fluentui/utilities';
import { baseElementEvents } from '@fluentui/utilities';
import { baseElementProperties } from '@fluentui/utilities';
import { buildClassMap } from '@fluentui/style-utilities';
import { buttonProperties } from '@fluentui/utilities';
import { calculatePrecision } from '@fluentui/utilities';
import { canUseDOM } from '@fluentui/utilities';
import { classNamesFunction } from '@fluentui/utilities';
import { colGroupProperties } from '@fluentui/utilities';
import { ColorClassNames } from '@fluentui/style-utilities';
import { colProperties } from '@fluentui/utilities';
import { CommunicationColors } from '@fluentui/theme';
import { compareDatePart } from '@fluentui/date-time-utilities';
import { compareDates } from '@fluentui/date-time-utilities';
import { ComponentsStyles } from '@fluentui/theme';
import { ComponentStyles } from '@fluentui/theme';
import { composeComponentAs } from '@fluentui/utilities';
import { composeRenderFunction } from '@fluentui/utilities';
import { concatStyleSets } from '@fluentui/style-utilities';
import { concatStyleSetsWithProps } from '@fluentui/style-utilities';
import { createArray } from '@fluentui/utilities';
import { createFontStyles } from '@fluentui/style-utilities';
import { createMemoizer } from '@fluentui/utilities';
import { createMergedRef } from '@fluentui/utilities';
import { createTheme } from '@fluentui/theme';
import { css } from '@fluentui/utilities';
import { customizable } from '@fluentui/utilities';
import { Customizations } from '@fluentui/utilities';
import { Customizer } from '@fluentui/utilities';
import { CustomizerContext } from '@fluentui/utilities';
import { DATA_IS_SCROLLABLE_ATTRIBUTE } from '@fluentui/utilities';
import { DATA_PORTAL_ATTRIBUTE } from '@fluentui/utilities';
import { DateRangeType } from '@fluentui/date-time-utilities';
import { DayOfWeek } from '@fluentui/date-time-utilities';
import { DAYS_IN_WEEK } from '@fluentui/date-time-utilities';
import { DefaultEffects } from '@fluentui/style-utilities';
import { DefaultFontStyles } from '@fluentui/style-utilities';
import { DefaultPalette } from '@fluentui/style-utilities';
import { DefaultSpacing } from '@fluentui/theme';
import { DelayedRender } from '@fluentui/utilities';
import { Depths } from '@fluentui/theme';
import { disableBodyScroll } from '@fluentui/utilities';
import { divProperties } from '@fluentui/utilities';
import { doesElementContainFocus } from '@fluentui/utilities';
import { EdgeChromiumHighContrastSelector } from '@fluentui/style-utilities';
import { elementContains } from '@fluentui/utilities';
import { elementContainsAttribute } from '@fluentui/utilities';
import { enableBodyScroll } from '@fluentui/utilities';
import { EventGroup } from '@fluentui/utilities';
import { extendComponent } from '@fluentui/utilities';
import { FabricPerformance } from '@fluentui/utilities';
import { filteredAssign } from '@fluentui/utilities';
import { find } from '@fluentui/utilities';
import { findElementRecursive } from '@fluentui/utilities';
import { findIndex } from '@fluentui/utilities';
import { findScrollableParent } from '@fluentui/utilities';
import { FirstWeekOfYear } from '@fluentui/date-time-utilities';
import { fitContentToBounds } from '@fluentui/utilities';
import { FitMode } from '@fluentui/utilities';
import { flatten } from '@fluentui/utilities';
import { FluentTheme } from '@fluentui/theme';
import { focusAsync } from '@fluentui/utilities';
import { focusClear } from '@fluentui/style-utilities';
import { focusFirstChild } from '@fluentui/utilities';
import { FocusRects } from '@fluentui/utilities';
import { FocusRectsContext } from '@fluentui/utilities';
import { FocusRectsProvider } from '@fluentui/utilities';
import { FocusZone } from '@fluentui/react-focus';
import { FocusZoneDirection } from '@fluentui/react-focus';
import { FocusZoneTabbableElements } from '@fluentui/react-focus';
import { FontClassNames } from '@fluentui/style-utilities';
import { fontFace } from '@fluentui/style-utilities';
import { FontSizes } from '@fluentui/style-utilities';
import { FontWeights } from '@fluentui/style-utilities';
import { format } from '@fluentui/utilities';
import { formProperties } from '@fluentui/utilities';
import { getChildren } from '@fluentui/utilities';
import { getDatePartHashValue } from '@fluentui/date-time-utilities';
import { getDateRangeArray } from '@fluentui/date-time-utilities';
import { getDistanceBetweenPoints } from '@fluentui/utilities';
import { getDocument } from '@fluentui/utilities';
import { getEdgeChromiumNoHighContrastAdjustSelector } from '@fluentui/style-utilities';
import { getElementIndexPath } from '@fluentui/utilities';
import { getEndDateOfWeek } from '@fluentui/date-time-utilities';
import { getFadedOverflowStyle } from '@fluentui/style-utilities';
import { getFirstFocusable } from '@fluentui/utilities';
import { getFirstTabbable } from '@fluentui/utilities';
import { getFirstVisibleElementFromSelector } from '@fluentui/utilities';
import { getFocusableByIndexPath } from '@fluentui/utilities';
import { getFocusOutlineStyle } from '@fluentui/style-utilities';
import { getFocusStyle } from '@fluentui/style-utilities';
import { getGlobalClassNames } from '@fluentui/style-utilities';
import { getHighContrastNoAdjustStyle } from '@fluentui/style-utilities';
import { getIcon } from '@fluentui/style-utilities';
import { getIconClassName } from '@fluentui/style-utilities';
import { getId } from '@fluentui/utilities';
import { getInitials } from '@fluentui/utilities';
import { getInputFocusStyle } from '@fluentui/style-utilities';
import { getLanguage } from '@fluentui/utilities';
import { getLastFocusable } from '@fluentui/utilities';
import { getLastTabbable } from '@fluentui/utilities';
import { getMonthEnd } from '@fluentui/date-time-utilities';
import { getMonthStart } from '@fluentui/date-time-utilities';
import { getNativeElementProps } from '@fluentui/utilities';
import { getNativeProps } from '@fluentui/utilities';
import { getNextElement } from '@fluentui/utilities';
import { getParent } from '@fluentui/utilities';
import { getPlaceholderStyles } from '@fluentui/style-utilities';
import { getPreviousElement } from '@fluentui/utilities';
import { getPropsWithDefaults } from '@fluentui/utilities';
import { getRect } from '@fluentui/utilities';
import { getResourceUrl } from '@fluentui/utilities';
import { getRTL } from '@fluentui/utilities';
import { getRTLSafeKeyCode } from '@fluentui/utilities';
import { getScreenSelector } from '@fluentui/style-utilities';
import { getScrollbarWidth } from '@fluentui/utilities';
import { getStartDateOfWeek } from '@fluentui/date-time-utilities';
import { getTheme } from '@fluentui/style-utilities';
import { getThemedContext } from '@fluentui/style-utilities';
import { getVirtualParent } from '@fluentui/utilities';
import { getWeekNumber } from '@fluentui/date-time-utilities';
import { getWeekNumbersInMonth } from '@fluentui/date-time-utilities';
import { getWindow } from '@fluentui/utilities';
import { getYearEnd } from '@fluentui/date-time-utilities';
import { getYearStart } from '@fluentui/date-time-utilities';
import { GlobalClassNames } from '@fluentui/style-utilities';
import { GlobalSettings } from '@fluentui/utilities';
import { hasHorizontalOverflow } from '@fluentui/utilities';
import { hasOverflow } from '@fluentui/utilities';
import { hasVerticalOverflow } from '@fluentui/utilities';
import { hiddenContentStyle } from '@fluentui/style-utilities';
import { HighContrastSelector } from '@fluentui/style-utilities';
import { HighContrastSelectorBlack } from '@fluentui/style-utilities';
import { HighContrastSelectorWhite } from '@fluentui/style-utilities';
import { hoistMethods } from '@fluentui/utilities';
import { hoistStatics } from '@fluentui/utilities';
import { htmlElementProperties } from '@fluentui/utilities';
import { IAnimationStyles } from '@fluentui/style-utilities';
import { IAnimationVariables } from '@fluentui/style-utilities';
import { IAsAsyncOptions } from '@fluentui/utilities';
import { IBaseProps } from '@fluentui/utilities';
import { ICalendarStrings } from '@fluentui/date-time-utilities';
import { ICancelable } from '@fluentui/utilities';
import { IChangeDescription } from '@fluentui/utilities';
import { IChangeEventCallback } from '@fluentui/utilities';
import { IClassNames } from '@fluentui/utilities';
import { IClassNamesFunctionOptions } from '@fluentui/utilities';
import type { IComponent } from '@fluentui/foundation-legacy';
import { IComponentAs } from '@fluentui/utilities';
import { IComponentAsProps } from '@fluentui/utilities';
import type { IComponentStyles } from '@fluentui/foundation-legacy';
import { IconFontSizes } from '@fluentui/style-utilities';
import { IconNames } from '@fluentui/font-icons-mdl2';
import { ICSPSettings } from '@fluentui/style-utilities';
import { ICssInput } from '@fluentui/utilities';
import type { ICSSPixelUnitRule } from '@fluentui/merge-styles';
import type { ICSSRule } from '@fluentui/merge-styles';
import { ICustomizableProps } from '@fluentui/utilities';
import { ICustomizations } from '@fluentui/utilities';
import { ICustomizerContext } from '@fluentui/utilities';
import { ICustomizerProps } from '@fluentui/utilities';
import { IDateFormatting } from '@fluentui/date-time-utilities';
import type { IDayGridOptions } from '@fluentui/date-time-utilities';
import { IDeclaredEventsByName } from '@fluentui/utilities';
import { IDelayedRenderProps } from '@fluentui/utilities';
import { IDelayedRenderState } from '@fluentui/utilities';
import { IDictionary } from '@fluentui/utilities';
import { IDisposable } from '@fluentui/utilities';
import { IEffects } from '@fluentui/style-utilities';
import { IEventRecord } from '@fluentui/utilities';
import { IEventRecordList } from '@fluentui/utilities';
import { IEventRecordsByName } from '@fluentui/utilities';
import { IFitContentToBoundsOptions } from '@fluentui/utilities';
import { IFocusRectsContext } from '@fluentui/utilities';
import { IFocusZone } from '@fluentui/react-focus';
import { IFocusZoneProps } from '@fluentui/react-focus';
import { IFontFace } from '@fluentui/style-utilities';
import { IFontStyles } from '@fluentui/style-utilities';
import { IFontWeight } from '@fluentui/style-utilities';
import { iframeProperties } from '@fluentui/utilities';
import { IGetFocusStylesOptions } from '@fluentui/style-utilities';
import type { IHTMLSlot } from '@fluentui/foundation-legacy';
import { IIconOptions } from '@fluentui/style-utilities';
import { IIconRecord } from '@fluentui/style-utilities';
import { IIconSubset } from '@fluentui/style-utilities';
import { IIconSubsetRecord } from '@fluentui/style-utilities';
import { imageProperties } from '@fluentui/utilities';
import { imgProperties } from '@fluentui/utilities';
import { initializeComponentRef } from '@fluentui/utilities';
import { initializeFocusRects } from '@fluentui/utilities';
import { initializeIcons } from '@fluentui/font-icons-mdl2';
import { InjectionMode } from '@fluentui/style-utilities';
import { inputProperties } from '@fluentui/utilities';
import { IObjectWithKey } from '@fluentui/utilities';
import { IPalette } from '@fluentui/style-utilities';
import { IPartialTheme } from '@fluentui/style-utilities';
import { IPerfData } from '@fluentui/utilities';
import { IPerfMeasurement } from '@fluentui/utilities';
import { IPerfSummary } from '@fluentui/utilities';
import { IPoint } from '@fluentui/utilities';
import { IProcessedStyleSet } from '@fluentui/style-utilities';
import { IPropsWithStyles } from '@fluentui/utilities';
import { IRawStyle } from '@fluentui/style-utilities';
import { IReactProps } from '@fluentui/utilities';
import { IRectangle } from '@fluentui/utilities';
import { IRefObject } from '@fluentui/utilities';
import { IRenderComponent } from '@fluentui/utilities';
import { IRenderFunction } from '@fluentui/utilities';
import { IScheme } from '@fluentui/style-utilities';
import { ISchemeNames } from '@fluentui/style-utilities';
import { isControlled } from '@fluentui/utilities';
import { isDirectionalKeyCode } from '@fluentui/utilities';
import { ISelection } from '@fluentui/utilities';
import { ISelectionOptions } from '@fluentui/utilities';
import { ISelectionOptionsWithRequiredGetKey } from '@fluentui/utilities';
import { isElementFocusSubZone } from '@fluentui/utilities';
import { isElementFocusZone } from '@fluentui/utilities';
import { isElementTabbable } from '@fluentui/utilities';
import { isElementVisible } from '@fluentui/utilities';
import { isElementVisibleAndNotHidden } from '@fluentui/utilities';
import { ISemanticColors } from '@fluentui/style-utilities';
import { ISemanticTextColors } from '@fluentui/style-utilities';
import { ISerializableObject } from '@fluentui/utilities';
import { ISettings } from '@fluentui/utilities';
import { ISettingsFunction } from '@fluentui/utilities';
import { ISettingsMap } from '@fluentui/utilities';
import { IsFocusVisibleClassName } from '@fluentui/utilities';
import { isIE11 } from '@fluentui/utilities';
import { isInDateRangeArray } from '@fluentui/date-time-utilities';
import { isIOS } from '@fluentui/utilities';
import { ISize } from '@fluentui/utilities';
import type { ISlotProp } from '@fluentui/foundation-legacy';
import type { ISlottableProps } from '@fluentui/foundation-legacy';
import { isMac } from '@fluentui/utilities';
import { ISpacing } from '@fluentui/style-utilities';
import { IStyle } from '@fluentui/style-utilities';
import type { IStyleableComponentProps } from '@fluentui/foundation-legacy';
import { IStyleFunction } from '@fluentui/utilities';
import { IStyleFunctionOrObject } from '@fluentui/utilities';
import { IStyleSet } from '@fluentui/style-utilities';
import { IStyleSheetConfig } from '@fluentui/style-utilities';
import { isVirtualElement } from '@fluentui/utilities';
import { ITheme } from '@fluentui/style-utilities';
import { IVirtualElement } from '@fluentui/utilities';
import { IWarnControlledUsageParams } from '@fluentui/utilities';
import { KeyCodes } from '@fluentui/utilities';
import { keyframes } from '@fluentui/style-utilities';
import { labelProperties } from '@fluentui/utilities';
import { liProperties } from '@fluentui/utilities';
import { loadTheme } from '@fluentui/style-utilities';
import { LocalizedFontFamilies } from '@fluentui/theme';
import { LocalizedFontNames } from '@fluentui/theme';
import { mapEnumByName } from '@fluentui/utilities';
import { memoize } from '@fluentui/utilities';
import { memoizeFunction } from '@fluentui/utilities';
import { merge } from '@fluentui/utilities';
import { mergeAriaAttributeValues } from '@fluentui/utilities';
import { mergeCustomizations } from '@fluentui/utilities';
import { mergeScopedSettings } from '@fluentui/utilities';
import { mergeSettings } from '@fluentui/utilities';
import { mergeStyles } from '@fluentui/style-utilities';
import { mergeStyleSets } from '@fluentui/style-utilities';
import { MergeStylesRootProvider } from '@fluentui/utilities';
import { MergeStylesShadowRootProvider } from '@fluentui/utilities';
import { mergeThemes } from '@fluentui/theme';
import { modalize } from '@fluentui/utilities';
import { MonthOfYear } from '@fluentui/date-time-utilities';
import { MotionAnimations } from '@fluentui/theme';
import { MotionDurations } from '@fluentui/theme';
import { MotionTimings } from '@fluentui/theme';
import { NeutralColors } from '@fluentui/theme';
import { normalize } from '@fluentui/style-utilities';
import { noWrap } from '@fluentui/style-utilities';
import { nullRender } from '@fluentui/utilities';
import { olProperties } from '@fluentui/utilities';
import { omit } from '@fluentui/utilities';
import { Omit as Omit_2 } from '@fluentui/utilities';
import { on } from '@fluentui/utilities';
import { optionProperties } from '@fluentui/utilities';
import { PartialTheme } from '@fluentui/theme';
import { Point } from '@fluentui/utilities';
import { portalContainsElement } from '@fluentui/utilities';
import { precisionRound } from '@fluentui/utilities';
import { PulsingBeaconAnimationStyles } from '@fluentui/style-utilities';
import { raiseClick } from '@fluentui/utilities';
import * as React_2 from 'react';
import type { ReactNode } from 'react';
import { Rectangle } from '@fluentui/utilities';
import { RefObject } from '@fluentui/utilities';
import { registerDefaultFontFaces } from '@fluentui/theme';
import { registerIconAlias } from '@fluentui/style-utilities';
import { registerIcons } from '@fluentui/style-utilities';
import { registerOnThemeChangeCallback } from '@fluentui/style-utilities';
import { removeDirectionalKeyCode } from '@fluentui/utilities';
import { removeIndex } from '@fluentui/utilities';
import { removeOnThemeChangeCallback } from '@fluentui/style-utilities';
import { replaceElement } from '@fluentui/utilities';
import { resetControlledWarnings } from '@fluentui/utilities';
import { resetIds } from '@fluentui/utilities';
import { resetMemoizations } from '@fluentui/utilities';
import { safeRequestAnimationFrame } from '@fluentui/utilities';
import { safeSetTimeout } from '@fluentui/utilities';
import { ScreenWidthMaxLarge } from '@fluentui/style-utilities';
import { ScreenWidthMaxMedium } from '@fluentui/style-utilities';
import { ScreenWidthMaxSmall } from '@fluentui/style-utilities';
import { ScreenWidthMaxXLarge } from '@fluentui/style-utilities';
import { ScreenWidthMaxXXLarge } from '@fluentui/style-utilities';
import { ScreenWidthMinLarge } from '@fluentui/style-utilities';
import { ScreenWidthMinMedium } from '@fluentui/style-utilities';
import { ScreenWidthMinSmall } from '@fluentui/style-utilities';
import { ScreenWidthMinUhfMobile } from '@fluentui/style-utilities';
import { ScreenWidthMinXLarge } from '@fluentui/style-utilities';
import { ScreenWidthMinXXLarge } from '@fluentui/style-utilities';
import { ScreenWidthMinXXXLarge } from '@fluentui/style-utilities';
import { Selection as Selection_2 } from '@fluentui/utilities';
import { SELECTION_CHANGE } from '@fluentui/utilities';
import { SelectionDirection } from '@fluentui/utilities';
import { SelectionMode as SelectionMode_2 } from '@fluentui/utilities';
import { selectProperties } from '@fluentui/utilities';
import { setBaseUrl } from '@fluentui/utilities';
import { setFocusVisibility } from '@fluentui/utilities';
import { setIconOptions } from '@fluentui/style-utilities';
import { setLanguage } from '@fluentui/utilities';
import { setMemoizeWeakMap } from '@fluentui/utilities';
import { setMonth } from '@fluentui/date-time-utilities';
import { setPortalAttribute } from '@fluentui/utilities';
import { setRTL } from '@fluentui/utilities';
import { setSSR } from '@fluentui/utilities';
import { Settings } from '@fluentui/utilities';
import { SettingsFunction } from '@fluentui/utilities';
import { setVirtualParent } from '@fluentui/utilities';
import { setWarningCallback } from '@fluentui/utilities';
import type { ShadowConfig } from '@fluentui/style-utilities';
import { shallowCompare } from '@fluentui/utilities';
import { SharedColors } from '@fluentui/theme';
import { shouldWrapFocus } from '@fluentui/utilities';
import { styled } from '@fluentui/utilities';
import { StyleFunction } from '@fluentui/utilities';
import { Stylesheet } from '@fluentui/style-utilities';
import { tableProperties } from '@fluentui/utilities';
import { Target } from '@fluentui/react-hooks';
import { tdProperties } from '@fluentui/utilities';
import { textAreaProperties } from '@fluentui/utilities';
import { Theme } from '@fluentui/theme';
import { ThemeSettingName } from '@fluentui/style-utilities';
import { thProperties } from '@fluentui/utilities';
import { TimeConstants } from '@fluentui/date-time-utilities';
import { toMatrix } from '@fluentui/utilities';
import { trProperties } from '@fluentui/utilities';
import { unhoistMethods } from '@fluentui/utilities';
import { unregisterIcons } from '@fluentui/style-utilities';
import { useAdoptedStylesheet } from '@fluentui/utilities';
import { useAdoptedStylesheetEx } from '@fluentui/utilities';
import { useCustomizationSettings } from '@fluentui/utilities';
import { useDocument } from '@fluentui/react-window-provider';
import { useFocusRects } from '@fluentui/utilities';
import { useHasMergeStylesShadowRootContext } from '@fluentui/utilities';
import { useMergeStylesHooks } from '@fluentui/utilities';
import { useMergeStylesRootStylesheets } from '@fluentui/utilities';
import { useMergeStylesShadowRootContext } from '@fluentui/utilities';
import { useShadowConfig } from '@fluentui/utilities';
import { useStyled } from '@fluentui/utilities';
import { useWindow } from '@fluentui/react-window-provider';
import { values } from '@fluentui/utilities';
import { videoProperties } from '@fluentui/utilities';
import { warn } from '@fluentui/utilities';
import { warnConditionallyRequiredProps } from '@fluentui/utilities';
import { warnControlledUsage } from '@fluentui/utilities';
import { warnDeprecations } from '@fluentui/utilities';
import { warnMutuallyExclusive } from '@fluentui/utilities';
import { WindowContext } from '@fluentui/react-window-provider';
import { WindowProvider } from '@fluentui/react-window-provider';
import { WindowProviderProps } from '@fluentui/react-window-provider';
import { ZIndexes } from '@fluentui/style-utilities';
/**
* {@docCategory Button}
*/
export declare class ActionButton extends React_2.Component<IButtonProps, {}> {
render(): JSX.Element;
}
/**
* {@docCategory ActivityItem}
*/
export declare class ActivityItem extends React_2.Component<IActivityItemProps, {}> {
constructor(props: IActivityItemProps);
render(): JSX.Element;
private _onRenderIcon;
private _onRenderActivityDescription;
private _onRenderComments;
private _onRenderTimeStamp;
private _onRenderPersonaArray;
private _getClassNames;
}
export { addDays }
export { addDirectionalKeyCode }
export { addElementAtIndex }
export { addMonths }
export { addWeeks }
export { addYears }
/**
* Defines a type made by the union of the different values that the align-items and justify-content flexbox
* properties can take.
* {@docCategory Stack}
*/
export declare type Alignment = 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'baseline' | 'stretch';
export { allowOverscrollOnElement }
export { allowScrollOnElement }
export { anchorProperties }
export { AnimationClassNames }
/**
* {@docCategory Calendar}
*/
export declare enum AnimationDirection {
/**
* Grid will transition out and in horizontally
*/
Horizontal = 0,
/**
* Grid will transition out and in vertically
*/
Vertical = 1
}
export { AnimationStyles }
export { AnimationVariables }
export declare const Announced: React_2.FunctionComponent<IAnnouncedProps>;
/**
* {@docCategory Announced}
*/
export declare class AnnouncedBase extends React_2.Component<IAnnouncedProps> {
static defaultProps: Partial<IAnnouncedProps>;
render(): JSX.Element;
}
export { appendFunction }
export { arraysEqual }
export { asAsync }
export { assertNever }
export { assign }
export { Async }
export { audioProperties }
/**
* {@docCategory Autofill}
*/
export declare class Autofill extends React_2.Component<IAutofillProps, IAutofillState> implements IAutofill {
static defaultProps: {
enableAutofillOnKeyPress: number[];
};
static contextType: React_2.Context<WindowProviderProps>;
private _inputElement;
private _autoFillEnabled;
private _async;
static getDerivedStateFromProps(props: IAutofillProps, state: IAutofillState): IAutofillState | null;
constructor(props: IAutofillProps);
get cursorLocation(): number | null;
get isValueSelected(): boolean;
get value(): string;
get selectionStart(): number | null;
get selectionEnd(): number | null;
get inputElement(): HTMLInputElement | null;
componentDidUpdate(_: any, _1: any, cursor: ICursorLocation | null): void;
componentWillUnmount(): void;
render(): JSX.Element;
focus(): void;
clear(): void;
getSnapshotBeforeUpdate(): ICursorLocation | null;
private _onCompositionStart;
private _onCompositionUpdate;
private _onCompositionEnd;
private _onClick;
private _onKeyDown;
private _onInputChanged;
private _onChanged;
private _getCurrentInputValue;
/**
* Attempts to enable autofill. Whether or not autofill is enabled depends on the input value,
* whether or not any text is selected, and only if the new input value is longer than the old input value.
* Autofill should never be set to true if the value is composing. Once compositionEnd is called, then
* it should be completed.
* See https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent for more information on composition.
* @param newValue - new input value
* @param oldValue - old input value
* @param isComposing - if true then the text is actively being composed and it has not completed.
* @param isComposed - if the text is a composed text value.
*/
private _tryEnableAutofill;
/**
* Updates the current input value as well as getting a new display value.
* @param newValue - The new value from the input
*/
private _updateValue;
private _getDisplayValue;
private _getControlledValue;
}
export { AutoScroll }
/**
* {@docCategory Button}
*/
export declare class BaseButton extends React_2.Component<IBaseButtonProps, IBaseButtonState> implements IButton {
private get _isSplitButton();
static defaultProps: Partial<IBaseButtonProps>;
static contextType: React_2.Context<IFocusRectsContext | undefined>;
context: IFocusRectsContext;
private _async;
private _events;
private _buttonElement;
private _splitButtonContainer;
private _mergedRef;
private _labelId;
private _descriptionId;
private _ariaDescriptionId;
private _classNames;
private _processingTouch;
private _lastTouchTimeoutId;
private _renderedVisibleMenu;
private _menuShouldFocusOnContainer;
private _menuShouldFocusOnMount;
private _getMemoizedMenuButtonKeytipProps;
constructor(props: IBaseButtonProps);
render(): JSX.Element;
componentDidMount(): void;
componentDidUpdate(prevProps: IBaseButtonProps, prevState: IBaseButtonState): void;
componentWillUnmount(): void;
focus(): void;
dismissMenu(): void;
openMenu(shouldFocusOnContainer?: boolean, shouldFocusOnMount?: boolean): void;
private _onRenderContent;
/**
* Method to help determine if the menu's component tree should
* be rendered. It takes into account whether the menu is expanded,
* whether it is a persisted menu and whether it has been shown to the user.
*/
private _shouldRenderMenu;
private _onRenderIcon;
private _onRenderTextContents;
private _onRenderText;
private _hasText;
private _onRenderChildren;
private _onRenderDescription;
private _onRenderAriaDescription;
private _onRenderMenuIcon;
private _getMenuProps;
private _onRenderMenu;
private _onDismissMenu;
private _dismissMenu;
private _openMenu;
private _onToggleMenu;
private _onRenderSplitButtonContent;
private _onSplitContainerFocusCapture;
private _onSplitButtonPrimaryClick;
private _onRenderSplitButtonDivider;
private _onRenderSplitButtonMenuButton;
private _onKeyDown;
private _onKeyUp;
private _onKeyPress;
private _onMouseUp;
private _onMouseDown;
private _onClick;
private _onSplitButtonContainerKeyDown;
private _onMenuKeyDown;
private _onTouchStart;
private _onPointerDown;
private _handleTouchAndPointerEvent;
/**
* Returns if the user hits a valid keyboard key to open the menu
* @param ev - the keyboard event
* @returns True if user clicks on custom trigger key if enabled or alt + down arrow if not. False otherwise.
*/
private _isValidMenuOpenKey;
private _onMenuClick;
}
export { BaseComponent }
export { baseElementEvents }
export { baseElementProperties }
/**
* {@docCategory ExtendedPeoplePicker}
*/
export declare class BaseExtendedPeoplePicker extends BaseExtendedPicker<IPersonaProps, IExtendedPeoplePickerProps> {
}
export declare class BaseExtendedPicker<T extends {}, P extends IBaseExtendedPickerProps<T>> extends React_2.Component<P, IBaseExtendedPickerState<T>> implements IBaseExtendedPicker<T> {
floatingPicker: React_2.RefObject<BaseFloatingPicker<T, IBaseFloatingPickerProps<T>>>;
selectedItemsList: React_2.RefObject<BaseSelectedItemsList<T, IBaseSelectedItemsListProps<T>>>;
protected root: React_2.RefObject<HTMLDivElement>;
protected input: React_2.RefObject<Autofill>;
protected selection: Selection_2;
constructor(basePickerProps: P);
get items(): any;
componentDidMount(): void;
focus(): void;
clearInput(): void;
get inputElement(): HTMLInputElement | null;
get highlightedItems(): T[];
render(): JSX.Element;
protected get floatingPickerProps(): IBaseFloatingPickerProps<T>;
protected get selectedItemsListProps(): IBaseSelectedItemsListProps<T>;
protected onSelectionChange: () => void;
protected canAddItems(): boolean;
protected renderFloatingPicker(): JSX.Element;
protected renderSelectedItemsList(): JSX.Element;
protected onInputChange: (value: string, composing?: boolean) => void;
protected onInputFocus: (ev: React_2.FocusEvent<HTMLInputElement | Autofill>) => void;
protected onInputClick: (ev: React_2.MouseEvent<HTMLInputElement | Autofill>) => void;
protected onBackspace: (ev: React_2.KeyboardEvent<HTMLElement>) => void;
protected onCopy: (ev: React_2.ClipboardEvent<HTMLElement>) => void;
protected onPaste: (ev: React_2.ClipboardEvent<Autofill | HTMLInputElement>) => void;
protected _onSuggestionSelected: (item: T) => void;
protected _onSelectedItemsChanged: () => void;
/**
* The floating picker is the source of truth for if the menu has been opened or not.
*
* Because this isn't tracked inside the state of this component, we need to
* force an update here to keep the rendered output that depends on the picker being open
* in sync with the state
*
* Called when the suggestions is shown or closed
*/
private _onSuggestionsShownOrHidden;
private _addProcessedItem;
}
/**
* {@docCategory FloatingPeoplePicker}
*/
export declare class BaseFloatingPeoplePicker extends BaseFloatingPicker<IPersonaProps, IPeopleFloatingPickerProps> {
}
export declare class BaseFloatingPicker<T extends {}, P extends IBaseFloatingPickerProps<T>> extends React_2.Component<P, IBaseFloatingPickerState> implements IBaseFloatingPicker {
protected selection: Selection;
protected root: React_2.RefObject<HTMLDivElement>;
protected suggestionStore: SuggestionsStore<T>;
protected suggestionsControl: React_2.RefObject<SuggestionsControl<T>>;
protected SuggestionsControlOfProperType: new (props: ISuggestionsControlProps<T>) => SuggestionsControl<T>;
protected currentPromise: PromiseLike<T[]>;
protected isComponentMounted: boolean;
private _async;
constructor(basePickerProps: P);
get inputText(): string;
get suggestions(): any[];
forceResolveSuggestion(): void;
get currentSelectedSuggestionIndex(): number;
get isSuggestionsShown(): boolean;
onQueryStringChanged: (queryString: string) => void;
hidePicker: () => void;
showPicker: (updateValue?: boolean) => void;
componentDidMount(): void;
componentDidUpdate(): void;
componentWillUnmount(): void;
completeSuggestion: () => void;
updateSuggestions(suggestions: T[], forceUpdate?: boolean): void;
render(): JSX.Element;
protected renderSuggestions(): JSX.Element | null;
protected onSelectionChange(): void;
protected updateValue(updatedValue: string): void;
protected updateSuggestionWithZeroState(): void;
protected updateSuggestionsList(suggestions: T[] | PromiseLike<T[]>): void;
protected onChange(item: T): void;
protected onSuggestionClick: (ev: React_2.MouseEvent<HTMLElement>, item: T, index: number) => void;
protected onSuggestionRemove: (ev: React_2.MouseEvent<HTMLElement>, item: T, index: number) => void;
protected onKeyDown: (ev: MouseEvent) => void;
private _updateActiveDescendant;
private _onResolveSuggestions;
private _onValidateInput;
private _updateSuggestionsVisible;
private _bindToInputElement;
private _unbindFromInputElement;
}
/**
* {@docCategory PeoplePicker}
*/
export declare class BasePeoplePicker extends BasePicker<IPersonaProps, IPeoplePickerProps> {
}
/**
* {@docCategory SelectedPeopleList}
*/
export declare class BasePeopleSelectedItemsList extends BaseSelectedItemsList<IExtendedPersonaProps, ISelectedPeopleProps> {
}
/**
* {@docCategory Pickers}
*/
export declare class BasePicker<T extends {}, P extends IBasePickerProps<T>> extends React_2.Component<P, IBasePickerState<T>> implements IBasePicker<T> {
static contextType: React_2.Context<WindowProviderProps>;
protected root: React_2.RefObject<HTMLDivElement>;
protected input: React_2.RefObject<IAutofill>;
protected suggestionElement: React_2.RefObject<ISuggestions<T>>;
protected selection: Selection_2;
protected suggestionStore: SuggestionsController<T>;
/**
* @deprecated this is no longer necessary as typescript now supports generic elements
*/
protected SuggestionOfProperType: new (props: ISuggestionsProps<T>) => Suggestions<T>;
protected currentPromise: PromiseLike<any> | undefined;
protected _ariaMap: IPickerAriaIds;
private _styledSuggestions;
private _id;
private _async;
private _overrideScrollDismiss;
private _overrideScrollDimissTimeout;
static getDerivedStateFromProps(newProps: IBasePickerProps<any>): {
items: any[];
} | null;
constructor(basePickerProps: P);
get items(): T[];
componentDidMount(): void;
componentDidUpdate(oldProps: P, oldState: IBasePickerState<T>): void;
componentWillUnmount(): void;
focus(): void;
focusInput(): void;
dismissSuggestions: (ev?: any) => void;
completeSuggestion(forceComplete?: boolean): void;
refocusSuggestions: (keyCode: KeyCodes) => void;
render(): JSX.Element;
protected canAddItems(): boolean;
protected renderSuggestions(): JSX.Element | null;
protected renderItems(): JSX.Element[];
protected resetFocus(index?: number): void;
protected onSuggestionSelect(): void;
protected onSelectionChange(): void;
protected updateSuggestions(suggestions: any[]): void;
/**
* Only to be called when there is nothing in the input. Checks to see if the consumer has
* provided a function to resolve suggestions
*/
protected onEmptyInputFocus(): void;
protected updateValue(updatedValue: string): void;
protected updateSuggestionsList(suggestions: T[] | PromiseLike<T[]>, updatedValue?: string): void;
protected resolveNewValue(updatedValue: string, suggestions: T[]): void;
protected onChange(items?: T[]): void;
protected onInputChange: (value: string) => void;
protected onSuggestionClick: (ev: React_2.MouseEvent<HTMLElement>, item: any, index: number) => void;
protected onSuggestionRemove: (ev: React_2.MouseEvent<HTMLElement>, item: T, index: number) => void;
protected onInputFocus: (ev: React_2.FocusEvent<HTMLInputElement | Autofill>) => void;
protected onInputBlur: (ev: React_2.FocusEvent<HTMLInputElement | Autofill>) => void;
protected onBlur: (ev: React_2.FocusEvent<HTMLElement | Autofill>) => void;
/**
* Resets focus to last element in wrapper div if clicking back into Picker that has hit item limit
*/
protected onWrapperClick: (ev: React_2.MouseEvent<HTMLInputElement>) => void;
/**
* Reveals suggestions any time the user clicks on the input element
* without shifting focus.
*/
protected onClick: (ev: React_2.MouseEvent<HTMLInputElement>) => void;
protected onFocus: () => void;
protected onKeyDown: (ev: React_2.KeyboardEvent<HTMLElement>) => void;
protected onItemChange: (changedItem: T, index: number) => void;
protected onGetMoreResults: () => void;
protected completeSelection: (item: T) => void;
protected addItemByIndex: (index: number) => void;
protected addItem: (item: T) => void;
protected removeItem: (item: T) => void;
protected removeItems: (itemsToRemove: any[]) => void;
protected onBackspace(ev: React_2.KeyboardEvent<HTMLElement>): void;
/**
* @deprecated this is no longer necessary as focuszone has been removed
*/
protected _shouldFocusZoneEnterInnerZone: (ev: React_2.KeyboardEvent<HTMLElement>) => boolean;
protected getActiveDescendant(): string | undefined;
/** @deprecated use renderCustomAlert instead */
protected getSuggestionsAlert(suggestionAlertClassName?: string): JSX.Element | undefined;
protected renderCustomAlert(alertClassName?: string): JSX.Element;
private _preventDismissOnScrollOrResize;
/** If suggestions are still loading after a predefined amount of time, set state to show user alert */
private _startLoadTimer;
/**
* Takes in the current updated value and either resolves it with the new suggestions
* or if updated value is undefined then it clears out currently suggested items
*/
private _updateAndResolveValue;
/**
* Controls what happens whenever there is an action that impacts the selected items.
* If `selectedItems` is provided, this will act as a controlled component and it will not update its own state.
*/
private _updateSelectedItems;
private _onSelectedItemsUpdated;
/**
* Suggestions are normally shown after the user updates text and the text
* is non-empty, but also when the user clicks on the input element.
* @returns True if suggestions should be shown.
*/
private _getShowSuggestions;
private _onResolveSuggestions;
private _completeGenericSuggestion;
private _getTextFromItem;
/**
* This should be called when the user does something other than use text entry to trigger suggestions.
*
*/
private _userTriggeredSuggestions;
}
export declare class BasePickerListBelow<T extends {}, P extends IBasePickerProps<T>> extends BasePicker<T, P> {
render(): JSX.Element;
protected onBackspace(ev: React_2.KeyboardEvent<HTMLElement>): void;
}
export declare class BaseSelectedItemsList<T extends {}, P extends IBaseSelectedItemsListProps<T>> extends React_2.Component<P, IBaseSelectedItemsListState<T>> implements IBaseSelectedItemsList<T> {
static contextType: React_2.Context<WindowProviderProps>;
protected root: HTMLElement;
private _defaultSelection;
static getDerivedStateFromProps(newProps: IBaseSelectedItemsListProps<any>): {
items: any[];
} | null;
constructor(basePickerProps: P);
get items(): T[];
addItems: (items: T[]) => void;
removeItemAt: (index: number) => void;
removeItem: (item: T) => void;
replaceItem: (itemToReplace: T, itemsToReplaceWith: T[]) => void;
removeItems: (itemsToRemove: any[]) => void;
removeSelectedItems(): void;
/**
* Controls what happens whenever there is an action that impacts the selected items.
* If selectedItems is provided, this will act as a controlled component and will not update its own state.
*/
updateItems(items: T[], focusIndex?: number): void;
onCopy: (ev: React_2.ClipboardEvent<HTMLElement>) => void;
hasSelectedItems(): boolean;
componentDidUpdate(oldProps: P, oldState: IBaseSelectedItemsListState<IObjectWithKey>): void;
unselectAll(): void;
highlightedItems(): T[];
componentDidMount(): void;
protected get selection(): Selection_2;
render(): any;
protected renderItems: () => JSX.Element[];
protected onSelectionChanged: () => void;
protected onChange(items?: T[]): void;
protected onItemChange: (changedItem: T, index: number) => void;
protected copyItems(items: T[]): void;
private _onSelectedItemsUpdated;
private _canRemoveItem;
}
export declare enum BaseSlots {
primaryColor = 0,
backgroundColor = 1,
foregroundColor = 2
}
export declare const Breadcrumb: React_2.FunctionComponent<IBreadcrumbProps>;
/**
* {@docCategory Breadcrumb}
*/
export declare class BreadcrumbBase extends React_2.Component<IBreadcrumbProps, any> {
static defaultProps: IBreadcrumbProps;
private _classNames;
private _focusZone;
constructor(props: IBreadcrumbProps);
/**
* Sets focus to the first breadcrumb link.
*/
focus(): void;
render(): JSX.Element;
/**
* Remove the first rendered item past the overlow point and put it and the end the overflow set.
*/
private _onReduceData;
/**
* Remove the last item of the overflow set and insert the item as the start of the rendered set past the overflow
* point.
*/
private _onGrowData;
private _onRenderBreadcrumb;
private _onRenderItem;
private _onBreadcrumbClicked;
/**
* Validate incoming props
* @param props - Props to validate
*/
private _validateProps;
}
export { buildClassMap }
export declare function buildColumns(items: any[], canResizeColumns?: boolean, onColumnClick?: (ev: React_2.MouseEvent<HTMLElement>, column: IColumn) => void, sortedColumnKey?: string, isSortedDescending?: boolean, groupedColumnKey?: string, isMultiline?: boolean, columnActionsMode?: ColumnActionsMode): IColumn[];
/**
* Builds a map of ID to IKeytipProps
*
* @param config - IKeytipConfig object
* @returns Config map
*/
export declare function buildKeytipConfigMap(config: IKeytipConfig): IKeytipConfigMap;
/**
* This class is deprecated. Use the individual *Button components instead.
* @deprecated Use the individual *Button components instead.
* {@docCategory Button}
*/
export declare class Button extends React_2.Component<IButtonProps, {}> {
constructor(props: IButtonProps);
render(): JSX.Element;
}
export declare const ButtonGlobalClassNames: {
msButton: string;
msButtonHasMenu: string;
msButtonIcon: string;
msButtonMenuIcon: string;
msButtonLabel: string;
msButtonDescription: string;
msButtonScreenReaderText: string;
msButtonFlexContainer: string;
msButtonTextContainer: string;
};
export declare const ButtonGrid: React_2.FunctionComponent<IButtonGridProps>;
export declare const ButtonGridCell: <T, P extends IButtonGridCellProps<T>>(props: IButtonGridCellProps<T>) => JSX.Element;
export { buttonProperties }
/**
* {@docCategory Button}
*/
export declare enum ButtonType {
normal = 0,
primary = 1,
hero = 2,
compound = 3,
command = 4,
icon = 5,
default = 6
}
export { calculatePrecision }
export declare const Calendar: React_2.FunctionComponent<ICalendarProps>;
export declare const Callout: React_2.FunctionComponent<ICalloutProps>;
export declare const CalloutContent: React_2.FunctionComponent<ICalloutProps>;
export declare const CalloutContentBase: React_2.FunctionComponent<ICalloutProps>;
/**
* Returns true if a list of menu items can contain a checkbox
*/
export declare function canAnyMenuItemsCheck(items: IContextualMenuItem[]): boolean;
export { canUseDOM }
export declare const Check: React_2.FunctionComponent<ICheckProps>;
export declare const CHECK_CELL_WIDTH = 48;
export declare const CheckBase: React_2.FunctionComponent<ICheckProps>;
export declare const Checkbox: React_2.FunctionComponent<ICheckboxProps>;
export declare const CheckboxBase: React_2.FunctionComponent<ICheckboxProps>;
/**
* {@docCategory DetailsList}
*/
export declare enum CheckboxVisibility {
/** Visible on hover. */
onHover = 0,
/** Visible always. */
always = 1,
/** Hide checkboxes. */
hidden = 2
}
export declare const ChoiceGroup: React_2.FunctionComponent<IChoiceGroupProps>;
export declare const ChoiceGroupBase: React_2.FunctionComponent<IChoiceGroupProps>;
export declare const ChoiceGroupOption: React_2.FunctionComponent<IChoiceGroupOptionProps>;
/** Clamp a value to ensure it falls within a given range. */
export declare function clamp(value: number, max: number, min?: number): number;
export { classNamesFunction }
/**
* This function can be optionally called to clean up the default layer host as needed.
*/
export declare function cleanupDefaultLayerHost(doc: Document, shadowRoot?: ShadowRoot | null): void;
export declare const Coachmark: React_2.FunctionComponent<ICoachmarkProps>;
export declare const COACHMARK_ATTRIBUTE_NAME = "data-coachmarkid";
export declare const CoachmarkBase: React_2.FunctionComponent<ICoachmarkProps>;
export { colGroupProperties }
/**
* {@docCategory GroupedList}
*/
export declare enum CollapseAllVisibility {
hidden = 0,
visible = 1
}
export { ColorClassNames }
declare type ColorComponent = keyof Pick<IColor, 'r' | 'g' | 'b' | 'a' | 't' | 'hex'>;
export declare const ColorPicker: React_2.FunctionComponent<IColorPickerProps>;
/**
* {@docCategory ColorPicker}
*/
export declare class ColorPickerBase extends React_2.Component<IColorPickerProps, IColorPickerState> implements IColorPicker {
static defaultProps: Partial<IColorPickerProps>;
private _textChangeHandlers;
/**
* Strings displayed in the UI as text field labels (these are in a separate object for convenient
* indexing by short color component name).
*/
private _textLabels;
/** Strings besides red/green/blue/alpha/hex, with defaults for all values except the deprecated `hue` */
private _strings;
constructor(props: IColorPickerProps);
get color(): IColor;
componentDidUpdate(prevProps: Readonly<IColorPickerProps>, prevState: Readonly<IColorPickerState>): void;
render(): JSX.Element;
private _getDisplayValue;
private _getTooltipValue;
private _onSVChanged;
private _onHChanged;
/** Callback for when the alpha/transparency slider changes */
private _onATChanged;
private _onTextChange;
private _onBlur;
/**
* Update the displayed color and call change handlers if appropriate.
* @param ev - Event if call was triggered by an event (undefined if triggered by props change)
* @param newColor - Updated color
*/
private _updateColor;
}
export declare const ColorPickerGridCell: React_2.FunctionComponent<IColorPickerGridCellProps>;
export declare const ColorPickerGridCellBase: React_2.FunctionComponent<IColorPickerGridCellProps>;
export { colProperties }
/**
* Enum to describe how a particular column header behaves.
* This is used to to specify the property `IColumn.columnActionsMode`.
* If `IColumn.columnActionsMode` is undefined, it's equivalent to `ColumnActionsMode.clickable`.
* {@docCategory DetailsList}
*/
export declare enum ColumnActionsMode {
/** Renders the column header as disabled. */
disabled = 0,
/** Renders the column header as clickable. Default value. */
clickable = 1,
/** Renders the column header as clickable and displays the dropdown chevron. */
hasDropdown = 2
}
/**
* Enum to describe where the column has been dropped, after starting the drag
* {@docCategory DetailsList}
*/
export declare enum ColumnDragEndLocation {
/** Drag ended outside of current list */
outside = 0,
/** Drag ended within current list */
surface = 1,
/** Drag ended on header */
header = 2
}
export declare const ComboBox: React_2.FunctionComponent<IComboBoxProps>;
export declare const CommandBar: React_2.FunctionComponent<ICommandBarProps>;
export declare class CommandBarBase extends React_2.Component<ICommandBarProps, {}> implements ICommandBar {
static defaultProps: ICommandBarProps;
private _overflowSet;
private _resizeGroup;
private _classNames;
constructor(props: ICommandBarProps);
render(): JSX.Element;
focus(): void;
remeasure(): void;
private _onRenderData;
private _onRenderItem;
private _commandButton;
private _onButtonClick;
private _onRenderOverflowButton;
private _computeCacheKey;
private _onReduceData;
private _onGrowData;
}
/**
* {@docCategory Button}
*/
export declare class CommandBarButton extends React_2.Component<IButtonProps, {}> {
render(): JSX.Element;
}
/**
* {@docCategory Button}
*/
export declare const CommandButton: typeof ActionButton;
export { CommunicationColors }
ex