office-ui-fabric-react
Version:
Reusable React components for building experiences for Microsoft 365.
1,465 lines (1,289 loc) • 317 kB
Markdown
## API Report File for "office-ui-fabric-react"
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
import { CommunicationColors } from '@fluentui/theme';
import { ComponentsStyles } from '@fluentui/theme';
import { ComponentStyles } from '@fluentui/theme';
import { DateRangeType } from '@fluentui/date-time-utilities/lib/dateValues/dateValues';
import { DayOfWeek } from '@fluentui/date-time-utilities/lib/dateValues/dateValues';
import { DefaultSpacing } from '@fluentui/theme';
import { Depths } from '@fluentui/theme';
import { EventGroup } from '@uifabric/utilities';
import { FirstWeekOfYear } from '@fluentui/date-time-utilities/lib/dateValues/dateValues';
import { FluentTheme } from '@fluentui/theme';
import { IBaseProps } from '@uifabric/utilities';
import { IComponent } from '@uifabric/foundation';
import { IComponentAs } from '@uifabric/utilities';
import { IComponentStyles } from '@uifabric/foundation';
import { ICSSPixelUnitRule } from '@uifabric/merge-styles/lib/IRawStyleBase';
import { ICSSRule } from '@uifabric/merge-styles/lib/IRawStyleBase';
import { IFocusZone } from '@fluentui/react-focus';
import { IFocusZoneProps } from '@fluentui/react-focus';
import { IFontStyles } from '@uifabric/styling';
import { IHTMLSlot } from '@uifabric/foundation';
import { IObjectWithKey } from '@uifabric/utilities';
import { IPoint } from '@uifabric/utilities';
import { IProcessedStyleSet } from '@uifabric/styling';
import { IRawStyle } from '@uifabric/styling';
import { IRectangle } from '@uifabric/utilities';
import { IRefObject } from '@uifabric/utilities';
import { IRenderComponent } from '@uifabric/utilities';
import { IRenderFunction } from '@uifabric/utilities';
import { ISelection } from '@uifabric/utilities';
import { ISelectionOptions } from '@uifabric/utilities';
import { ISlotProp } from '@uifabric/foundation';
import { ISlottableProps } from '@uifabric/foundation';
import { IStyle } from '@uifabric/styling';
import { IStyleableComponentProps } from '@uifabric/foundation';
import { IStyleFunction } from '@uifabric/utilities';
import { IStyleFunctionOrObject } from '@uifabric/utilities';
import { ITheme } from '@uifabric/styling';
import { KeyCodes } from '@uifabric/utilities';
import { LocalizedFontFamilies } from '@fluentui/theme';
import { LocalizedFontNames } from '@fluentui/theme';
import { makeStyles } from '@fluentui/react-theme-provider';
import { mergeThemes } from '@fluentui/theme';
import { MotionAnimations } from '@fluentui/theme';
import { MotionDurations } from '@fluentui/theme';
import { MotionTimings } from '@fluentui/theme';
import { NeutralColors } from '@fluentui/theme';
import { Omit } from '@uifabric/utilities';
import { PartialTheme } from '@fluentui/theme';
import { Point } from '@uifabric/utilities';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { Rectangle } from '@uifabric/utilities';
import { Selection } from '@uifabric/utilities';
import { SELECTION_CHANGE } from '@uifabric/utilities';
import { SelectionDirection } from '@uifabric/utilities';
import { SelectionMode } from '@uifabric/utilities';
import { SharedColors } from '@fluentui/theme';
import { Target } from '@uifabric/react-hooks';
import { Theme } from '@fluentui/theme';
import { ThemeContext } from '@fluentui/react-theme-provider';
import { ThemeProvider } from '@fluentui/react-theme-provider';
import { ThemeProviderProps } from '@fluentui/react-theme-provider';
import { UseStylesOptions } from '@fluentui/react-theme-provider';
import { useTheme } from '@fluentui/react-theme-provider';
// @public (undocumented)
export class ActionButton extends React.Component<IButtonProps, {}> {
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export class ActivityItem extends React.Component<IActivityItemProps, {}> {
constructor(props: IActivityItemProps);
// (undocumented)
render(): JSX.Element;
}
// @public
export type Alignment = 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'baseline' | 'stretch';
// @public (undocumented)
export const Announced: React.FunctionComponent<IAnnouncedProps>;
// @public (undocumented)
export class AnnouncedBase extends React.Component<IAnnouncedProps> {
// (undocumented)
static defaultProps: Partial<IAnnouncedProps>;
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export class Autofill extends React.Component<IAutofillProps, IAutofillState> implements IAutofill {
constructor(props: IAutofillProps);
// (undocumented)
clear(): void;
// (undocumented)
componentDidUpdate(): void;
// (undocumented)
componentWillUnmount(): void;
// (undocumented)
readonly cursorLocation: number | null;
// (undocumented)
static defaultProps: {
enableAutofillOnKeyPress: number[];
};
// (undocumented)
focus(): void;
// (undocumented)
readonly inputElement: HTMLInputElement | null;
// (undocumented)
readonly isValueSelected: boolean;
// (undocumented)
render(): JSX.Element;
// (undocumented)
readonly selectionEnd: number | null;
// (undocumented)
readonly selectionStart: number | null;
// (undocumented)
UNSAFE_componentWillReceiveProps(nextProps: IAutofillProps): void;
// (undocumented)
readonly value: string;
}
// @public @deprecated (undocumented)
export class BaseAutoFill extends Autofill {
}
// @public (undocumented)
export class BaseButton extends React.Component<IBaseButtonProps, IBaseButtonState> implements IButton {
constructor(props: IBaseButtonProps);
// (undocumented)
componentDidMount(): void;
// (undocumented)
componentDidUpdate(prevProps: IBaseButtonProps, prevState: IBaseButtonState): void;
// (undocumented)
componentWillUnmount(): void;
// (undocumented)
static defaultProps: Partial<IBaseButtonProps>;
// (undocumented)
dismissMenu(): void;
// (undocumented)
focus(): void;
// (undocumented)
openMenu(shouldFocusOnContainer?: boolean, shouldFocusOnMount?: boolean): void;
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export class BaseExtendedPeoplePicker extends BaseExtendedPicker<IPersonaProps, IExtendedPeoplePickerProps> {
}
// @public (undocumented)
export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extends React.Component<P, IBaseExtendedPickerState<T>> implements IBaseExtendedPicker<T> {
constructor(basePickerProps: P);
// (undocumented)
protected canAddItems(): boolean;
// (undocumented)
clearInput(): void;
// (undocumented)
componentDidMount(): void;
// (undocumented)
floatingPicker: React.RefObject<BaseFloatingPicker<T, IBaseFloatingPickerProps<T>>>;
// (undocumented)
protected floatingPickerProps: IBaseFloatingPickerProps<T>;
// (undocumented)
focus(): void;
// (undocumented)
readonly highlightedItems: T[];
// (undocumented)
protected input: React.RefObject<Autofill>;
// (undocumented)
readonly inputElement: HTMLInputElement | null;
// (undocumented)
readonly items: any;
// (undocumented)
protected onBackspace: (ev: React.KeyboardEvent<HTMLElement>) => void;
// (undocumented)
protected onCopy: (ev: React.ClipboardEvent<HTMLElement>) => void;
// (undocumented)
protected onInputChange: (value: string, composing?: boolean | undefined) => void;
// (undocumented)
protected onInputClick: (ev: React.MouseEvent<HTMLInputElement | Autofill, MouseEvent>) => void;
// (undocumented)
protected onInputFocus: (ev: React.FocusEvent<HTMLInputElement | Autofill>) => void;
// (undocumented)
protected onPaste: (ev: React.ClipboardEvent<HTMLInputElement | Autofill>) => void;
// (undocumented)
protected _onSelectedItemsChanged: () => void;
// (undocumented)
protected onSelectionChange: () => void;
// (undocumented)
protected _onSuggestionSelected: (item: T) => void;
// (undocumented)
render(): JSX.Element;
// (undocumented)
protected renderFloatingPicker(): JSX.Element;
// (undocumented)
protected renderSelectedItemsList(): JSX.Element;
// (undocumented)
protected root: React.RefObject<HTMLDivElement>;
// (undocumented)
selectedItemsList: React.RefObject<BaseSelectedItemsList<T, IBaseSelectedItemsListProps<T>>>;
// (undocumented)
protected selectedItemsListProps: IBaseSelectedItemsListProps<T>;
// (undocumented)
protected selection: Selection;
// (undocumented)
UNSAFE_componentWillReceiveProps(newProps: P): void;
}
// @public (undocumented)
export class BaseFloatingPeoplePicker extends BaseFloatingPicker<IPersonaProps, IPeopleFloatingPickerProps> {
}
// @public (undocumented)
export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extends React.Component<P, IBaseFloatingPickerState> implements IBaseFloatingPicker {
constructor(basePickerProps: P);
// (undocumented)
completeSuggestion: () => void;
// (undocumented)
componentDidMount(): void;
// (undocumented)
componentDidUpdate(): void;
// (undocumented)
componentWillUnmount(): void;
// (undocumented)
protected currentPromise: PromiseLike<T[]>;
// (undocumented)
readonly currentSelectedSuggestionIndex: number;
// (undocumented)
forceResolveSuggestion(): void;
// (undocumented)
hidePicker: () => void;
// (undocumented)
readonly inputText: string;
// (undocumented)
protected isComponentMounted: boolean;
// (undocumented)
readonly isSuggestionsShown: boolean;
// (undocumented)
protected onChange(item: T): void;
// (undocumented)
protected onKeyDown: (ev: MouseEvent) => void;
// (undocumented)
onQueryStringChanged: (queryString: string) => void;
// (undocumented)
protected onSelectionChange(): void;
// (undocumented)
protected onSuggestionClick: (ev: React.MouseEvent<HTMLElement, MouseEvent>, item: T, index: number) => void;
// (undocumented)
protected onSuggestionRemove: (ev: React.MouseEvent<HTMLElement, MouseEvent>, item: T, index: number) => void;
// (undocumented)
render(): JSX.Element;
// (undocumented)
protected renderSuggestions(): JSX.Element | null;
// (undocumented)
protected root: React.RefObject<HTMLDivElement>;
// (undocumented)
protected selection: Selection;
// (undocumented)
showPicker: (updateValue?: boolean) => void;
// (undocumented)
readonly suggestions: any[];
// (undocumented)
protected suggestionsControl: React.RefObject<SuggestionsControl<T>>;
// (undocumented)
protected SuggestionsControlOfProperType: new (props: ISuggestionsControlProps<T>) => SuggestionsControl<T>;
// (undocumented)
protected suggestionStore: SuggestionsStore<T>;
// (undocumented)
UNSAFE_componentWillReceiveProps(newProps: IBaseFloatingPickerProps<T>): void;
// (undocumented)
updateSuggestions(suggestions: T[], forceUpdate?: boolean): void;
// (undocumented)
protected updateSuggestionsList(suggestions: T[] | PromiseLike<T[]>): void;
// (undocumented)
protected updateSuggestionWithZeroState(): void;
// (undocumented)
protected updateValue(updatedValue: string): void;
}
// @public (undocumented)
export class BasePeoplePicker extends BasePicker<IPersonaProps, IPeoplePickerProps> {
}
// @public (undocumented)
export class BasePeopleSelectedItemsList extends BaseSelectedItemsList<IExtendedPersonaProps, ISelectedPeopleProps> {
}
// @public (undocumented)
export class BasePicker<T, P extends IBasePickerProps<T>> extends React.Component<P, IBasePickerState> implements IBasePicker<T> {
constructor(basePickerProps: P);
// (undocumented)
protected addItem: (item: T) => void;
// (undocumented)
protected addItemByIndex: (index: number) => void;
// (undocumented)
protected _ariaMap: IPickerAriaIds;
// (undocumented)
protected canAddItems(): boolean;
// (undocumented)
protected completeSelection: (item: T) => void;
// (undocumented)
completeSuggestion(forceComplete?: boolean): void;
// (undocumented)
componentDidMount(): void;
// (undocumented)
componentDidUpdate(oldProps: P, oldState: IBasePickerState): void;
// (undocumented)
componentWillUnmount(): void;
// (undocumented)
protected currentPromise: PromiseLike<any> | undefined;
// (undocumented)
dismissSuggestions: (ev?: any) => void;
// (undocumented)
focus(): void;
// (undocumented)
focusInput(): void;
// (undocumented)
protected focusZone: React.RefObject<IFocusZone>;
// (undocumented)
protected getActiveDescendant(): string | undefined;
// (undocumented)
static getDerivedStateFromProps(newProps: IBasePickerProps<any>): {
items: any[];
} | null;
// (undocumented)
protected getSuggestionsAlert(suggestionAlertClassName?: string): JSX.Element | undefined;
// (undocumented)
protected input: React.RefObject<IAutofill>;
// (undocumented)
readonly items: T[];
// (undocumented)
protected onBackspace(ev: React.KeyboardEvent<HTMLElement>): void;
// (undocumented)
protected onBlur: (ev: React.FocusEvent<HTMLElement | Autofill>) => void;
// (undocumented)
protected onChange(items?: T[]): void;
protected onClick: (ev: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
protected onEmptyInputFocus(): void;
// (undocumented)
protected onGetMoreResults: () => void;
// (undocumented)
protected onInputBlur: (ev: React.FocusEvent<HTMLInputElement | Autofill>) => void;
// (undocumented)
protected onInputChange: (value: string) => void;
// (undocumented)
protected onInputFocus: (ev: React.FocusEvent<HTMLInputElement | Autofill>) => void;
// (undocumented)
protected onItemChange: (changedItem: T, index: number) => void;
// (undocumented)
protected onKeyDown: (ev: React.KeyboardEvent<HTMLElement>) => void;
// (undocumented)
protected onSelectionChange(): void;
// (undocumented)
protected onSuggestionClick: (ev: React.MouseEvent<HTMLElement, MouseEvent>, item: any, index: number) => void;
// (undocumented)
protected onSuggestionRemove: (ev: React.MouseEvent<HTMLElement, MouseEvent>, item: T, index: number) => void;
// (undocumented)
protected onSuggestionSelect(): void;
// (undocumented)
refocusSuggestions: (keyCode: number) => void;
// (undocumented)
protected removeItem: (item: IPickerItemProps<T>, focusNextItem?: boolean | undefined) => void;
// (undocumented)
protected removeItems: (itemsToRemove: any[]) => void;
// (undocumented)
render(): JSX.Element;
// (undocumented)
protected renderItems(): JSX.Element[];
// (undocumented)
protected renderSuggestions(): JSX.Element | null;
// (undocumented)
protected resetFocus(index?: number): void;
// (undocumented)
protected resolveNewValue(updatedValue: string, suggestions: T[]): void;
// (undocumented)
protected root: React.RefObject<HTMLDivElement>;
// (undocumented)
protected selection: Selection;
// (undocumented)
protected _shouldFocusZoneEnterInnerZone: (ev: React.KeyboardEvent<HTMLElement>) => boolean;
// (undocumented)
protected suggestionElement: React.RefObject<ISuggestions<T>>;
// @deprecated (undocumented)
protected SuggestionOfProperType: new (props: ISuggestionsProps<T>) => Suggestions<T>;
// (undocumented)
protected suggestionStore: SuggestionsController<T>;
// (undocumented)
protected updateSuggestions(suggestions: any[]): void;
// (undocumented)
protected updateSuggestionsList(suggestions: T[] | PromiseLike<T[]>, updatedValue?: string): void;
// (undocumented)
protected updateValue(updatedValue: string): void;
}
// @public (undocumented)
export class BasePickerListBelow<T, P extends IBasePickerProps<T>> extends BasePicker<T, P> {
// (undocumented)
protected onBackspace(ev: React.KeyboardEvent<HTMLElement>): void;
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>> extends React.Component<P, IBaseSelectedItemsListState<T>> implements IBaseSelectedItemsList<T> {
constructor(basePickerProps: P);
// (undocumented)
addItems: (items: T[]) => void;
// (undocumented)
componentDidMount(): void;
// (undocumented)
protected copyItems(items: T[]): void;
// (undocumented)
hasSelectedItems(): boolean;
// (undocumented)
highlightedItems(): T[];
// (undocumented)
readonly items: T[];
// (undocumented)
protected onChange(items?: T[]): void;
// (undocumented)
onCopy: (ev: React.ClipboardEvent<HTMLElement>) => void;
// (undocumented)
protected onItemChange: (changedItem: T, index: number) => void;
// (undocumented)
protected onSelectionChanged: () => void;
// (undocumented)
removeItem: (item: T) => void;
// (undocumented)
removeItemAt: (index: number) => void;
// (undocumented)
removeItems: (itemsToRemove: any[]) => void;
// (undocumented)
removeSelectedItems(): void;
// (undocumented)
render(): any;
// (undocumented)
protected renderItems: () => JSX.Element[];
// (undocumented)
replaceItem: (itemToReplace: T, itemsToReplaceWith: T[]) => void;
// (undocumented)
protected root: HTMLElement;
// (undocumented)
protected selection: Selection;
// (undocumented)
UNSAFE_componentWillReceiveProps(newProps: P): void;
// (undocumented)
UNSAFE_componentWillUpdate(newProps: P, newState: IBaseSelectedItemsListState): void;
// (undocumented)
unselectAll(): void;
updateItems(items: T[], focusIndex?: number): void;
}
// @public (undocumented)
export enum BaseSlots {
// (undocumented)
backgroundColor = 1,
// (undocumented)
foregroundColor = 2,
// (undocumented)
primaryColor = 0
}
// @public (undocumented)
export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps>;
// @public (undocumented)
export class BreadcrumbBase extends React.Component<IBreadcrumbProps, any> {
constructor(props: IBreadcrumbProps);
// (undocumented)
static defaultProps: IBreadcrumbProps;
focus(): void;
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export function buildColumns(items: any[], canResizeColumns?: boolean, onColumnClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => void, sortedColumnKey?: string, isSortedDescending?: boolean, groupedColumnKey?: string, isMultiline?: boolean): IColumn[];
// @public
export function buildKeytipConfigMap(config: IKeytipConfig): IKeytipConfigMap;
// @public @deprecated
export class Button extends React.Component<IButtonProps, {}> {
constructor(props: IButtonProps);
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export const ButtonGrid: React.FunctionComponent<IButtonGridProps>;
// @public (undocumented)
export class ButtonGridCell<T, P extends IButtonGridCellProps<T>> extends React.Component<P, {}> {
// (undocumented)
static defaultProps: {
disabled: boolean;
};
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export enum ButtonType {
// (undocumented)
command = 4,
// (undocumented)
compound = 3,
// (undocumented)
default = 6,
// (undocumented)
hero = 2,
// (undocumented)
icon = 5,
// (undocumented)
normal = 0,
// (undocumented)
primary = 1
}
// @public (undocumented)
export class Calendar extends React.Component<ICalendarProps, ICalendarState> implements ICalendar {
constructor(props: ICalendarProps);
// (undocumented)
componentDidUpdate(): void;
// (undocumented)
static defaultProps: ICalendarProps;
// (undocumented)
focus(): void;
// (undocumented)
render(): JSX.Element;
// (undocumented)
UNSAFE_componentWillReceiveProps(nextProps: ICalendarProps): void;
}
// @public (undocumented)
export class Callout extends React.Component<ICalloutProps, ICalloutState> {
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export const CalloutContent: React.FunctionComponent<ICalloutProps>;
// @public (undocumented)
export class CalloutContentBase extends React.Component<ICalloutProps, ICalloutState> {
constructor(props: ICalloutProps);
// (undocumented)
componentDidMount(): void;
// (undocumented)
componentDidUpdate(): void;
// (undocumented)
componentWillUnmount(): void;
// (undocumented)
static defaultProps: {
preventDismissOnLostFocus: boolean;
preventDismissOnScroll: boolean;
preventDismissOnResize: boolean;
isBeakVisible: boolean;
beakWidth: number;
gapSpace: number;
minPagePadding: number;
directionalHint: 7;
};
// (undocumented)
dismiss: (ev?: Event | React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined) => void;
// (undocumented)
protected _dismissOnLostFocus: (ev: Event) => void;
// (undocumented)
protected _dismissOnResize: (ev: Event) => void;
// (undocumented)
protected _dismissOnScroll: (ev: Event) => void;
// (undocumented)
protected _onComponentDidMount: () => void;
// (undocumented)
render(): JSX.Element | null;
// (undocumented)
protected _setInitialFocus: () => void;
// (undocumented)
shouldComponentUpdate(newProps: ICalloutProps, newState: ICalloutState): boolean;
// (undocumented)
UNSAFE_componentWillMount(): void;
// (undocumented)
UNSAFE_componentWillUpdate(newProps: ICalloutProps): void;
}
// @public
export function canAnyMenuItemsCheck(items: IContextualMenuItem[]): boolean;
// @public (undocumented)
export const Check: React.FunctionComponent<ICheckProps>;
// @public (undocumented)
export const CheckBase: React.FunctionComponent<ICheckProps>;
// @public (undocumented)
export const Checkbox: React.FunctionComponent<ICheckboxProps>;
// @public (undocumented)
export class CheckboxBase extends React.Component<ICheckboxProps, ICheckboxState> implements ICheckbox {
constructor(props: ICheckboxProps, context?: any);
// (undocumented)
readonly checked: boolean;
// (undocumented)
static defaultProps: ICheckboxProps;
// (undocumented)
focus(): void;
// (undocumented)
static getDerivedStateFromProps(nextProps: Readonly<ICheckboxProps>, prevState: Readonly<ICheckboxState>): ICheckboxState | null;
// (undocumented)
readonly indeterminate: boolean;
render(): JSX.Element;
}
// @public (undocumented)
export enum CheckboxVisibility {
always = 1,
hidden = 2,
onHover = 0
}
// @public (undocumented)
export const ChoiceGroup: React.FunctionComponent<IChoiceGroupProps>;
// @public (undocumented)
export class ChoiceGroupBase extends React.Component<IChoiceGroupProps, IChoiceGroupState> implements IChoiceGroup {
constructor(props: IChoiceGroupProps);
readonly checkedOption: IChoiceGroupOption | undefined;
// (undocumented)
componentDidUpdate(prevProps: IChoiceGroupProps, prevState: IChoiceGroupState): void;
// (undocumented)
focus(): void;
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export const ChoiceGroupOption: React.FunctionComponent<IChoiceGroupOptionProps>;
// @public
export function clamp(value: number, max: number, min?: number): number;
// @public (undocumented)
export const Coachmark: React.FunctionComponent<ICoachmarkProps>;
// @public (undocumented)
export const COACHMARK_ATTRIBUTE_NAME = "data-coachmarkid";
// @public (undocumented)
export class CoachmarkBase extends React.Component<ICoachmarkProps, ICoachmarkState> implements ICoachmark {
constructor(props: ICoachmarkProps);
// (undocumented)
componentDidMount(): void;
// (undocumented)
componentDidUpdate(prevProps: ICoachmarkProps, prevState: ICoachmarkState): void;
// (undocumented)
componentWillUnmount(): void;
// (undocumented)
static defaultProps: Partial<ICoachmarkProps>;
// (undocumented)
dismiss: (ev?: Event | React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined) => void;
// (undocumented)
render(): JSX.Element;
// (undocumented)
shouldComponentUpdate(newProps: ICoachmarkProps, newState: ICoachmarkState): boolean;
// (undocumented)
UNSAFE_componentWillReceiveProps(newProps: ICoachmarkProps): void;
}
// @public (undocumented)
export enum CollapseAllVisibility {
// (undocumented)
hidden = 0,
// (undocumented)
visible = 1
}
// @public (undocumented)
export const ColorPicker: React.FunctionComponent<IColorPickerProps>;
// @public (undocumented)
export class ColorPickerBase extends React.Component<IColorPickerProps, IColorPickerState> implements IColorPicker {
constructor(props: IColorPickerProps);
// (undocumented)
readonly color: IColor;
// (undocumented)
componentDidUpdate(prevProps: Readonly<IColorPickerProps>, prevState: Readonly<IColorPickerState>): void;
// (undocumented)
static defaultProps: Partial<IColorPickerProps>;
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export const ColorPickerGridCell: React.FunctionComponent<IColorPickerGridCellProps>;
// @public (undocumented)
export class ColorPickerGridCellBase extends React.PureComponent<IColorPickerGridCellProps, {}> {
// (undocumented)
static defaultProps: Partial<IColorPickerGridCellProps>;
// (undocumented)
render(): JSX.Element;
}
// @public
export enum ColumnActionsMode {
clickable = 1,
disabled = 0,
hasDropdown = 2
}
// @public
export enum ColumnDragEndLocation {
header = 2,
outside = 0,
surface = 1
}
// @public (undocumented)
export class ComboBox extends React.Component<IComboBoxProps, IComboBoxState> {
constructor(props: IComboBoxProps);
// (undocumented)
componentDidMount(): void;
// (undocumented)
componentDidUpdate(prevProps: IComboBoxProps, prevState: IComboBoxState): void;
// (undocumented)
componentWillUnmount(): void;
// (undocumented)
static defaultProps: IComboBoxProps;
dismissMenu: () => void;
// Warning: (ae-unresolved-inheritdoc-base) The @inheritDoc tag needs a TSDoc declaration reference; signature matching is not supported yet
//
// (undocumented)
focus: (shouldOpenOnFocus?: boolean | undefined, useFocusAsync?: boolean | undefined) => void;
// (undocumented)
render(): JSX.Element;
readonly selectedOptions: IComboBoxOption[];
// (undocumented)
UNSAFE_componentWillReceiveProps(newProps: IComboBoxProps): void;
}
// @public (undocumented)
export const CommandBar: React.FunctionComponent<ICommandBarProps>;
// @public (undocumented)
export class CommandBarBase extends React.Component<ICommandBarProps, {}> implements ICommandBar {
constructor(props: ICommandBarProps);
// (undocumented)
static defaultProps: ICommandBarProps;
// (undocumented)
focus(): void;
// (undocumented)
remeasure(): void;
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export class CommandBarButton extends React.Component<IButtonProps, {}> {
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export const CommandButton: typeof ActionButton;
export { CommunicationColors }
// @public (undocumented)
export const CompactPeoplePicker: React.FunctionComponent<IPeoplePickerProps>;
// @public
export class CompactPeoplePickerBase extends BasePeoplePicker {
static defaultProps: {
onRenderItem: (props: IPeoplePickerItemSelectedProps) => JSX.Element;
onRenderSuggestionsItem: (personaProps: IPersonaProps, suggestionsProps?: IBasePickerSuggestionsProps<any> | undefined) => JSX.Element;
createGenericItem: typeof createGenericItem;
};
}
export { ComponentsStyles }
export { ComponentStyles }
// @public (undocumented)
export class CompoundButton extends React.Component<IButtonProps, {}> {
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export enum ConstrainMode {
horizontalConstrained = 1,
unconstrained = 0
}
// @public
export function constructKeytip(configMap: IKeytipConfigMap, parentSequence: string[], keytip: IKeytipConfigItem): void;
// @public
export const ContextualMenu: React.FunctionComponent<IContextualMenuProps>;
// @public (undocumented)
export class ContextualMenuBase extends React.Component<IContextualMenuProps, IContextualMenuState> {
constructor(props: IContextualMenuProps);
// (undocumented)
componentDidMount(): void;
// (undocumented)
componentWillUnmount(): void;
// (undocumented)
static defaultProps: IContextualMenuProps;
// (undocumented)
dismiss: (ev?: any, dismissAll?: boolean | undefined) => void;
// (undocumented)
render(): JSX.Element | null;
// (undocumented)
shouldComponentUpdate(newProps: IContextualMenuProps, newState: IContextualMenuState): boolean;
// (undocumented)
UNSAFE_componentWillMount(): void;
// (undocumented)
UNSAFE_componentWillUpdate(newProps: IContextualMenuProps): void;
}
// @public
export const ContextualMenuItem: React.FunctionComponent<IContextualMenuItemProps>;
// @public (undocumented)
export class ContextualMenuItemBase extends React.Component<IContextualMenuItemProps, {}> {
constructor(props: IContextualMenuItemProps);
// (undocumented)
dismissMenu: (dismissAll?: boolean | undefined) => void;
// (undocumented)
dismissSubMenu: () => void;
// (undocumented)
openSubMenu: () => void;
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export enum ContextualMenuItemType {
// (undocumented)
Divider = 1,
// (undocumented)
Header = 2,
// (undocumented)
Normal = 0,
// (undocumented)
Section = 3
}
// @public
export function correctHex(hex: string): string;
// @public
export function correctHSV(color: IHSV): IHSV;
// @public
export function correctRGB(color: IRGB): IRGB;
// @public (undocumented)
export function createGenericItem(name: string, currentValidationState: ValidationState): IGenericItem & {
key: React.Key;
};
// @public (undocumented)
export function createItem(name: string, isValid: boolean): ISuggestionModel<IPersonaProps>;
// @public
export function cssColor(color?: string): IRGB | undefined;
// @public (undocumented)
export const DATAKTP_ARIA_TARGET = "data-ktp-aria-target";
// @public (undocumented)
export const DATAKTP_EXECUTE_TARGET = "data-ktp-execute-target";
// @public (undocumented)
export const DATAKTP_TARGET = "data-ktp-target";
// @public
export const DatePicker: React.FunctionComponent<IDatePickerProps>;
// @public (undocumented)
export class DatePickerBase extends React.Component<IDatePickerProps, IDatePickerState> implements IDatePicker {
constructor(props: IDatePickerProps);
// (undocumented)
componentDidUpdate(prevProps: IDatePickerProps, prevState: IDatePickerState): void;
// (undocumented)
static defaultProps: IDatePickerProps;
// (undocumented)
focus(): void;
// (undocumented)
render(): JSX.Element;
// (undocumented)
reset(): void;
// (undocumented)
UNSAFE_componentWillReceiveProps(nextProps: IDatePickerProps): void;
}
export { DateRangeType }
export { DayOfWeek }
// @public (undocumented)
export const DEFAULT_CELL_STYLE_PROPS: ICellStyleProps;
// @public (undocumented)
export const DEFAULT_MASK_CHAR = "_";
// @public (undocumented)
export const DEFAULT_ROW_HEIGHTS: {
rowHeight: number;
compactRowHeight: number;
};
// @public (undocumented)
export class DefaultButton extends React.Component<IButtonProps, {}> {
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export type DefaultProps = Required<Pick<ISpinButtonProps, 'step' | 'min' | 'max' | 'disabled' | 'labelPosition' | 'label' | 'incrementButtonIcon' | 'decrementButtonIcon'>>;
export { DefaultSpacing }
export { Depths }
// @public (undocumented)
export const DetailsColumn: React.FunctionComponent<IDetailsColumnProps>;
// @public
export class DetailsColumnBase extends React.Component<IDetailsColumnProps> {
constructor(props: IDetailsColumnProps);
// (undocumented)
componentDidMount(): void;
// (undocumented)
componentDidUpdate(): void;
// (undocumented)
componentWillUnmount(): void;
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export const DetailsHeader: React.FunctionComponent<IDetailsHeaderBaseProps>;
// @public (undocumented)
export class DetailsHeaderBase extends React.Component<IDetailsHeaderBaseProps, IDetailsHeaderState> implements IDetailsHeader {
constructor(props: IDetailsHeaderBaseProps);
// (undocumented)
componentDidMount(): void;
// (undocumented)
componentDidUpdate(prevProps: IDetailsHeaderBaseProps): void;
// (undocumented)
componentWillUnmount(): void;
// (undocumented)
static defaultProps: {
selectAllVisibility: SelectAllVisibility;
collapseAllVisibility: CollapseAllVisibility;
useFastIcons: boolean;
};
focus(): boolean;
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export const DetailsList: React.FunctionComponent<IDetailsListProps>;
// @public (undocumented)
export class DetailsListBase extends React.Component<IDetailsListProps, IDetailsListState> implements IDetailsList {
constructor(props: IDetailsListProps);
// (undocumented)
componentDidUpdate(prevProps: IDetailsListProps, prevState: IDetailsListState): void;
// (undocumented)
componentWillUnmount(): void;
// (undocumented)
static defaultProps: {
layoutMode: DetailsListLayoutMode;
selectionMode: SelectionMode;
constrainMode: ConstrainMode;
checkboxVisibility: CheckboxVisibility;
isHeaderVisible: boolean;
compact: boolean;
useFastIcons: boolean;
};
// (undocumented)
focusIndex(index: number, forceIntoFirstElement?: boolean, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode): void;
// (undocumented)
forceUpdate(): void;
// (undocumented)
static getDerivedStateFromProps(nextProps: IDetailsListProps, previousState: IDetailsListState): IDetailsListState;
// (undocumented)
getStartItemIndexInView(): number;
// (undocumented)
protected _onRenderRow: (props: IDetailsRowProps, defaultRender?: IRenderFunction<IDetailsRowProps> | undefined) => JSX.Element;
// (undocumented)
render(): JSX.Element;
// (undocumented)
scrollToIndex(index: number, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode): void;
}
// @public (undocumented)
export enum DetailsListLayoutMode {
fixedColumns = 0,
justified = 1
}
// @public (undocumented)
export const DetailsRow: React.FunctionComponent<IDetailsRowBaseProps>;
// @public (undocumented)
export class DetailsRowBase extends React.Component<IDetailsRowBaseProps, IDetailsRowState> {
constructor(props: IDetailsRowBaseProps);
// (undocumented)
componentDidMount(): void;
// (undocumented)
componentDidUpdate(previousProps: IDetailsRowBaseProps): void;
// (undocumented)
componentWillUnmount(): void;
// (undocumented)
focus(forceIntoFirstElement?: boolean): boolean;
// (undocumented)
static getDerivedStateFromProps(nextProps: IDetailsRowBaseProps, previousState: IDetailsRowState): IDetailsRowState;
measureCell(index: number, onMeasureDone: (width: number) => void): void;
// (undocumented)
protected _onRenderCheck(props: IDetailsRowCheckProps): JSX.Element;
// (undocumented)
render(): JSX.Element;
// (undocumented)
shouldComponentUpdate(nextProps: IDetailsRowBaseProps, nextState: IDetailsRowState): boolean;
}
// @public (undocumented)
export const DetailsRowCheck: React.FunctionComponent<IDetailsRowCheckProps>;
// @public
export const DetailsRowFields: React.FunctionComponent<IDetailsRowFieldsProps>;
// @public (undocumented)
export const DetailsRowGlobalClassNames: {
root: string;
compact: string;
cell: string;
cellAnimation: string;
cellCheck: string;
check: string;
cellMeasurer: string;
listCellFirstChild: string;
isContentUnselectable: string;
isSelected: string;
isCheckVisible: string;
isRowHeader: string;
fields: string;
};
// @public (undocumented)
export const Dialog: React.FunctionComponent<IDialogProps>;
// @public (undocumented)
export class DialogBase extends React.Component<IDialogProps, {}> {
constructor(props: IDialogProps);
// (undocumented)
static defaultProps: IDialogProps;
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export const DialogContent: React.FunctionComponent<IDialogContentProps>;
// @public (undocumented)
export class DialogContentBase extends React.Component<IDialogContentProps, {}> {
constructor(props: IDialogContentProps);
// (undocumented)
static defaultProps: IDialogContentProps;
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export const DialogFooter: React.FunctionComponent<IDialogFooterProps>;
// @public (undocumented)
export class DialogFooterBase extends React.Component<IDialogFooterProps, {}> {
constructor(props: IDialogFooterProps);
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export enum DialogType {
close = 2,
largeHeader = 1,
normal = 0
}
// @public (undocumented)
export const DirectionalHint: {
topLeftEdge: 0;
topCenter: 1;
topRightEdge: 2;
topAutoEdge: 3;
bottomLeftEdge: 4;
bottomCenter: 5;
bottomRightEdge: 6;
bottomAutoEdge: 7;
leftTopEdge: 8;
leftCenter: 9;
leftBottomEdge: 10;
rightTopEdge: 11;
rightCenter: 12;
rightBottomEdge: 13;
};
// @public (undocumented)
export type DirectionalHint = typeof DirectionalHint[keyof typeof DirectionalHint];
// @public (undocumented)
export const DocumentCard: React.FunctionComponent<IDocumentCardProps>;
// @public (undocumented)
export const DocumentCardActions: React.FunctionComponent<IDocumentCardActionsProps>;
// @public (undocumented)
export const DocumentCardActivity: React.FunctionComponent<IDocumentCardActivityProps>;
// @public (undocumented)
export const DocumentCardDetails: React.FunctionComponent<IDocumentCardDetailsProps>;
// @public (undocumented)
export const DocumentCardImage: React.FunctionComponent<IDocumentCardImageProps>;
// @public (undocumented)
export const DocumentCardLocation: React.FunctionComponent<IDocumentCardLocationProps>;
// @public (undocumented)
export const DocumentCardLogo: React.FunctionComponent<IDocumentCardLogoProps>;
// @public (undocumented)
export const DocumentCardPreview: React.FunctionComponent<IDocumentCardPreviewProps>;
// @public (undocumented)
export const DocumentCardStatus: React.FunctionComponent<IDocumentCardStatusProps>;
// @public (undocumented)
export const DocumentCardTitle: React.FunctionComponent<IDocumentCardTitleProps>;
// @public (undocumented)
export enum DocumentCardType {
compact = 1,
normal = 0
}
// @public (undocumented)
export class DragDropHelper implements IDragDropHelper {
constructor(params: IDragDropHelperParams);
// (undocumented)
dispose(): void;
// (undocumented)
subscribe(root: HTMLElement, events: EventGroup, dragDropOptions: IDragDropOptions): {
key: string;
dispose(): void;
};
// (undocumented)
unsubscribe(root: HTMLElement, key: string): void;
}
// @public (undocumented)
export const Dropdown: React.FunctionComponent<IDropdownProps>;
// @public (undocumented)
export class DropdownBase extends React.Component<IDropdownInternalProps, IDropdownState> implements IDropdown {
constructor(props: IDropdownProps);
// (undocumented)
componentDidUpdate(prevProps: IDropdownProps, prevState: IDropdownState): void;
// (undocumented)
componentWillUnmount(): void;
// (undocumented)
static defaultProps: {
options: any[];
};
// (undocumented)
focus(shouldOpenOnFocus?: boolean): void;
// (undocumented)
render(): JSX.Element;
readonly selectedOptions: IDropdownOption[];
// (undocumented)
setSelectedIndex(event: React.FormEvent<HTMLDivElement>, index: number): void;
// (undocumented)
UNSAFE_componentWillReceiveProps(newProps: IDropdownProps): void;
}
// @public (undocumented)
export enum ElementType {
anchor = 1,
button = 0
}
// @public (undocumented)
export const ExpandingCard: React.FunctionComponent<IExpandingCardProps>;
// @public (undocumented)
export class ExpandingCardBase extends React.Component<IExpandingCardProps, IExpandingCardState> {
constructor(props: IExpandingCardProps);
// (undocumented)
componentDidMount(): void;
// (undocumented)
componentWillUnmount(): void;
// (undocumented)
static defaultProps: {
compactCardHeight: number;
expandedCardHeight: number;
directionalHintFixed: boolean;
};
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export enum ExpandingCardMode {
compact = 0,
expanded = 1
}
// @public (undocumented)
export class ExtendedPeoplePicker extends BaseExtendedPeoplePicker {
}
// @public (undocumented)
export class ExtendedSelectedItem extends React.Component<ISelectedPeopleItemProps, IPeoplePickerItemState> {
constructor(props: ISelectedPeopleItemProps);
// (undocumented)
protected persona: React.RefObject<HTMLDivElement>;
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export const Fabric: import("react").ForwardRefExoticComponent<IFabricProps & import("react").RefAttributes<FabricBase>>;
// @public (undocumented)
export class FabricBase extends React.Component<IFabricProps> {
// (undocumented)
componentDidMount(): void;
// (undocumented)
componentWillUnmount(): void;
// (undocumented)
render(): JSX.Element;
}
// @public (undocumented)
export enum FabricSlots {
// (undocumented)
black = 20,
// (undocumented)
neutralDark = 19,
// (undocumented)
neutralLight = 11,
// (undocumented)
neutralLighter = 10,
// (undocumented)
neutralLighterAlt = 9,
// (undocumented)
neutralPrimary = 18,
// (undocumented)
neutralPrimaryAlt = 17,
// (undocumented)
neutralQuaternary = 13,
// (undocumented)
neutralQuaternaryAlt = 12,
// (undocumented)
neutralSecondary = 16,
// (undocumented)
neutralTertiary = 15,
// (undocumented)
neutralTertiaryAlt = 14,
// (undocumented)
themeDark = 7,
// (undocumented)
themeDarkAlt = 6,
// (undocumented)
themeDarker = 8,
// (undocumented)
themeLight = 3,
// (undocumented)
themeLighter = 2,
// (undocumented)
themeLighterAlt = 1,
// (undocumented)
themePrimary = 0,
// (undocumented)
themeSecondary = 5,
// (undocumented)
themeTertiary = 4,
// (undocumented)
white = 21
}
// @public
export const Facepile: React.FunctionComponent<IFacepileProps>;
// @public
export class FacepileBase extends React.Component<IFacepileProps, {}> {
constructor(props: IFacepileProps);
// (undocumented)
static defaultProps: IFacepileProps;
// (undocumented)
protected onRenderAriaDescription(): "" | JSX.Element | undefined;
// (undocumented)
render(): JSX.Element;
}
export { FirstWeekOfYear }
// @public (undocumented)
export class FloatingPeoplePicker extends BaseFloatingPeoplePicker {
// (undocumented)
static defaultProps: any;
}
export { FluentTheme }
// @public
export const FocusTrapCallout: React.FunctionComponent<IFocusTrapCalloutProps>;
// @public (undocumented)
export class FocusTrapZone extends React.Component<IFocusTrapZoneProps, {}> implements IFocusTrapZone {
constructor(props: IFocusTrapZoneProps);
// (undocumented)
componentDidMount(): void;
// (undocumented)
componentDidUpdate(prevProps: IFocusTrapZoneProps): void;
// (undocumented)
componentWillUnmount(): void;
// (undocumented)
focus(): void;
// (undocumented)
render(): JSX.Element;
// (undocumented)
UNSAFE_componentWillReceiveProps(nextProps: IFocusTrapZoneProps): void;
}
// @public
export const FontIcon: React.FunctionComponent<IFontIconProps>;
// @public (undocumented)
export const getActivityItemClassNames: (styles: IActivityItemStyles, className: string, activityPersonas: IPersonaProps[], isCompact: boolean) => IActivityItemClassNames;
// @public (undocumented)
export const getActivityItemStyles: (theme?: ITheme, customStyles?: IActivityItemStyles | undefined, animateBeaconSignal?: boolean | undefined, beaconColorOne?: string | undefined, beaconColorTwo?: string | undefined, isCompact?: boolean | undefined) => IActivityItemStyles;
// @public (undocumented)
export function getAllSelectedOptions(options: ISelectableOption[], selectedIndices: number[]): ISelectableOption[];
// @public
export function getAriaDescribedBy(keySequences: string[]): string;
// @public (undocumented)
export function getBackgroundShade(color: IColor, shade: Shade, isInverted?: boolean): IColor | null;
// @public (undocumented)
export function getBasePickerStyles(props: IBasePickerStyleProps): IBasePickerStyles;
// @public (undocumented)
export function getBoundsFromTargetWindow(target: Element | MouseEvent | Point | Rectangle | null, targetWindow: IWindowWithSegments): IRectangle;
// @public
export function getColorFromHSV(hsv: IHSV, a?: number): IColor;
// @public
export function getColorFromRGBA(rgba: IRGB): IColor;
// @public
export function getColorFromString(inputColor: string): IColor | undefined;
// @public (undocumented)
export const getCommandBarStyles: (props: ICommandBarStyleProps) => ICommandBarStyles;
// @public (undocumented)
export const getCommandButtonStyles: (customStyles: IButtonStyles | undefined) => IButtonStyles;
// Warning: (ae-internal-missing-underscore) The name "getContextualMenuItemClassNames" should be prefixed with an underscore because the declaration is marked as @internal
//
// @internal @deprecated (undocumented)
export const getContextualMenuItemClassNames: (theme: ITheme, disabled: boolean, expanded: boolean, checked: boolean, isAnchorLink: boolean, knownIcon: boolean, itemClassName?: string | undefined, dividerClassName?: string | undefined, iconClassName?: string | undefined, subMenuClassName?: string | undefined, primaryDisabled?: boolean | undefined, className?: string | undefined) => IContextualMenuItemStyles;
// @public
export const getContextualMenuItemStyles: (props: IContextualMenuItemStyleProps) => IContextualMenuItemStyles;
// @public (undocumented)
export function getContrastRatio(color1: IColor, color2: IColor): number;
// @public (undocumented)
export const getDetailsColumnStyles: (props: IDetailsColumnStyleProps) => IDetailsColumnStyles;
// @public (undocumented)
export const getDetailsHeaderStyles: (props: IDetailsHeaderStyleProps) => IDetailsHeaderStyles;
// @public (undocumented)
export const getDetailsListStyles: (props: IDetailsListStyleProps) => IDetailsListStyles;
// @public (undocumented)
export const getDetailsRowCheckStyles: (props: IDetailsRowCheckStyleProps) => IDetailsRowCheckStyles;
// @public (undocumented)
export const getDetailsRowStyles: (props: IDetailsRowStyleProps) => IDetailsRowStyles;
// @public
export const getFontIcon: (iconName: string, className?: string | undefined, ariaLabel?: string | undefined) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
// @public
export function getFullColorString(color: IColor): string;
// @public
export const GetGroupCount: (groups: IGroup[] | undefined) => number;
// @public (undocumented)
export const getIconContent: (iconName?: string | undefined) => IIconContent | null;
// @public (undocumented)
export function getInitialResponsiveMode(): ResponsiveMode;
// @public
export function getLayerCount(hostId: string): number;
// @public
export function getLayerHost(hostId: string): ILayerHost | undefined;
// @public
export function getLayerHostSelector(): string | undefined;
// @public (undocumented)
export const getLayerStyles: (props: ILayerStyleProps) => ILayerStyles;
// @public
export function getMaxHeight(target: Element | MouseEvent | Point | Rectangle, targetEdge: DirectionalHint, gapSpace?: number, bounds?: IRectangle, coverTarget?: boolean): number;
// @public
export const getMeasurementCache: () => {
getCachedMeasurement: (data: any) => number | undefined;
addMeasurementToCache: (data: any, measurement: number) => void;
};
// @public (undocumented)
export const getMenuItemStyles: (theme: ITheme) => IMenuItemStyles;
// @public
export const getNextResizeGroupStateProvider: (measurementCache?: {
getCachedMeasurement: (data: any) => number | undefined;
addMeasurementToCache: (data: any, measurement: number) => void;
}) => {
getNextState: (props: IResizeGroupProps, currentState: IResizeGroupState, getElementT