office-ui-fabric-react

office-ui-fabric-react

Version 7.204.0
Published 2 years ago
37.7 MB
15 dependencies
MIT license

Install

npm i office-ui-fabric-react

yarn add office-ui-fabric-react

pnpm add office-ui-fabric-react

Overview

Reusable React components for building experiences for Microsoft 365.

Index

Variables

variable Announced

const Announced: React.FunctionComponent<IAnnouncedProps>;

const Breadcrumb: React.FunctionComponent<IBreadcrumbProps>;

variable ButtonGrid

const ButtonGrid: React.FunctionComponent<IButtonGridProps>;

variable CalloutContent

const CalloutContent: React.FunctionComponent<ICalloutProps>;

variable Check

const Check: React.FunctionComponent<ICheckProps>;

variable CheckBase

const CheckBase: React.FunctionComponent<ICheckProps>;

variable Checkbox

const Checkbox: React.FunctionComponent<ICheckboxProps>;

variable ChoiceGroup

const ChoiceGroup: React.FunctionComponent<IChoiceGroupProps>;

variable ChoiceGroupOption

const ChoiceGroupOption: React.FunctionComponent<IChoiceGroupOptionProps>;

variable Coachmark

const Coachmark: React.FunctionComponent<ICoachmarkProps>;

variable COACHMARK_ATTRIBUTE_NAME

const COACHMARK_ATTRIBUTE_NAME: string;

variable ColorPicker

const ColorPicker: React.FunctionComponent<IColorPickerProps>;

variable ColorPickerGridCell

const ColorPickerGridCell: React.FunctionComponent<IColorPickerGridCellProps>;

variable CommandBar

const CommandBar: React.FunctionComponent<ICommandBarProps>;

variable CommandButton

const CommandButton: typeof ActionButton;

variable CompactPeoplePicker

const CompactPeoplePicker: React.FunctionComponent<IPeoplePickerProps>;

variable ContextualMenu

const ContextualMenu: React.FunctionComponent<IContextualMenuProps>;

ContextualMenu description

variable ContextualMenuItem

const ContextualMenuItem: React.FunctionComponent<IContextualMenuItemProps>;

ContextualMenuItem description

variable DATAKTP_ARIA_TARGET

const DATAKTP_ARIA_TARGET: string;

variable DATAKTP_EXECUTE_TARGET

const DATAKTP_EXECUTE_TARGET: string;

variable DATAKTP_TARGET

const DATAKTP_TARGET: string;

variable DatePicker

const DatePicker: React.FunctionComponent<IDatePickerProps>;

DatePicker description

variable DEFAULT_CELL_STYLE_PROPS

const DEFAULT_CELL_STYLE_PROPS: ICellStyleProps;

variable DEFAULT_MASK_CHAR

const DEFAULT_MASK_CHAR: string;

variable DEFAULT_ROW_HEIGHTS

const DEFAULT_ROW_HEIGHTS: { rowHeight: number; compactRowHeight: number };

variable DetailsColumn

const DetailsColumn: React.FunctionComponent<IDetailsColumnProps>;

variable DetailsHeader

const DetailsHeader: React.FunctionComponent<IDetailsHeaderBaseProps>;

variable DetailsList

const DetailsList: React.FunctionComponent<IDetailsListProps>;

variable DetailsRow

const DetailsRow: React.FunctionComponent<IDetailsRowBaseProps>;

variable DetailsRowCheck

const DetailsRowCheck: React.FunctionComponent<IDetailsRowCheckProps>;

variable DetailsRowFields

const DetailsRowFields: React.FunctionComponent<IDetailsRowFieldsProps>;

Component for rendering a row's cells in a DetailsList.

variable DetailsRowGlobalClassNames

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

variable Dialog

const Dialog: React.FunctionComponent<IDialogProps>;

variable DialogContent

const DialogContent: React.FunctionComponent<IDialogContentProps>;

variable DialogFooter

const DialogFooter: React.FunctionComponent<IDialogFooterProps>;

variable DirectionalHint

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

variable DocumentCard

const DocumentCard: React.FunctionComponent<IDocumentCardProps>;

variable DocumentCardActions

const DocumentCardActions: React.FunctionComponent<IDocumentCardActionsProps>;

variable DocumentCardActivity

const DocumentCardActivity: React.FunctionComponent<IDocumentCardActivityProps>;

variable DocumentCardDetails

const DocumentCardDetails: React.FunctionComponent<IDocumentCardDetailsProps>;

variable DocumentCardImage

const DocumentCardImage: React.FunctionComponent<IDocumentCardImageProps>;

variable DocumentCardLocation

const DocumentCardLocation: React.FunctionComponent<IDocumentCardLocationProps>;

variable DocumentCardLogo

const DocumentCardLogo: React.FunctionComponent<IDocumentCardLogoProps>;

variable DocumentCardPreview

const DocumentCardPreview: React.FunctionComponent<IDocumentCardPreviewProps>;

variable DocumentCardStatus

const DocumentCardStatus: React.FunctionComponent<IDocumentCardStatusProps>;

variable DocumentCardTitle

const DocumentCardTitle: React.FunctionComponent<IDocumentCardTitleProps>;

const Dropdown: React.FunctionComponent<IDropdownProps>;

variable ExpandingCard

const ExpandingCard: React.FunctionComponent<IExpandingCardProps>;

variable Fabric

const Fabric: any;

variable Facepile

const Facepile: React.FunctionComponent<IFacepileProps>;

The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person.

variable FocusTrapCallout

const FocusTrapCallout: React.FunctionComponent<IFocusTrapCalloutProps>;

A special Callout that uses FocusTrapZone to trap focus
Parameter props
Props for the component

variable FontIcon

const FontIcon: React.FunctionComponent<IFontIconProps>;

Fast icon component which only supports font glyphs (not images) and can't be targeted by customizations. To style the icon, use className or reference ms-Icon in CSS.

variable Grid

const Grid: React.FunctionComponent<IButtonGridProps>;

Deprecated
- use ButtonGrid instead

variable GridCell

const GridCell: typeof ButtonGridCell;

Deprecated
- use ButtonGridCell instead

variable GroupedList

const GroupedList: React.FunctionComponent<IGroupedListProps>;

variable GroupedListV2_unstable

const GroupedListV2_unstable: React.FunctionComponent<IGroupedListV2Props>;

NOTE: GroupedListV2 is "unstable" and meant for preview use. It passes the same test suite as GroupedList but it is an entirely new implementation so it may have bugs and implementation details may change without notice.
GroupedListV2 is an API-compatible replacement for GroupedList with a new implementation that addresses issues GroupedList has with virtualizing nested lists under certain conditions.

variable GroupedListV2FC

const GroupedListV2FC: React.FC<IGroupedListV2Props>;

variable GroupFooter

const GroupFooter: React.FunctionComponent<IGroupFooterProps>;

variable GroupHeader

const GroupHeader: React.FunctionComponent<IGroupHeaderProps>;

variable GroupShowAll

const GroupShowAll: React.FunctionComponent<IGroupShowAllProps>;

variable GroupSpacer

const GroupSpacer: React.FunctionComponent<IGroupSpacerProps>;

variable HEX_REGEX

const HEX_REGEX: RegExp;

Regular expression matching only valid hexadecimal chars

const HoverCard: React.FunctionComponent<IHoverCardProps>;

variable Icon

const Icon: React.FunctionComponent<IIconProps>;

Legacy Icon component which can be targeted by customization. It's recommended to use FontIcon or ImageIcon instead, especially in scenarios where rendering performance is important.

variable Image

const Image: React.FunctionComponent<IImageProps>;

variable ImageIcon

const ImageIcon: React.FunctionComponent<IImageIconProps>;

Fast icon component which only supports images (not font glyphs) and can't be targeted by customizations. To style the icon, use className or reference ms-Icon in CSS.

variable KeytipData

const KeytipData: React.FunctionComponent<any>;

A small element to help the target component correctly read out its aria-describedby for its Keytip

variable KeytipLayer

const KeytipLayer: React.FunctionComponent<IKeytipLayerProps>;

variable KTP_ARIA_SEPARATOR

const KTP_ARIA_SEPARATOR: string;

variable KTP_FULL_PREFIX

const KTP_FULL_PREFIX: string;

variable KTP_LAYER_ID

const KTP_LAYER_ID: string;

variable KTP_PREFIX

const KTP_PREFIX: string;

variable KTP_SEPARATOR

const KTP_SEPARATOR: string;

variable Label

const Label: React.FunctionComponent<ILabelProps>;

variable Layer

const Layer: React.FunctionComponent<ILayerProps>;

variable Link

const Link: React.FunctionComponent<ILinkProps>;

variable ListPeoplePicker

const ListPeoplePicker: React.FunctionComponent<IPeoplePickerProps>;

variable MarqueeSelection

const MarqueeSelection: React.FunctionComponent<IMarqueeSelectionProps>;

variable MAX_COLOR_ALPHA

const MAX_COLOR_ALPHA: number;

variable MAX_COLOR_HUE

const MAX_COLOR_HUE: number;

variable MAX_COLOR_RGB

const MAX_COLOR_RGB: number;

variable MAX_COLOR_RGBA

const MAX_COLOR_RGBA: number;

Deprecated
Use MAX_COLOR_RGB (255) or MAX_COLOR_ALPHA (100)

variable MAX_COLOR_SATURATION

const MAX_COLOR_SATURATION: number;

variable MAX_COLOR_VALUE

const MAX_COLOR_VALUE: number;

variable MAX_HEX_LENGTH

const MAX_HEX_LENGTH: number;

Maximum length for a hexadecimal color string (not including the #)

variable MAX_RGBA_LENGTH

const MAX_RGBA_LENGTH: number;

Maximum length for a string of an RGBA color component

variable MeasuredContext

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

variable MessageBar

const MessageBar: React.FunctionComponent<IMessageBarProps>;

variable MIN_HEX_LENGTH

const MIN_HEX_LENGTH: number;

Minimum length for a hexadecimal color string (not including the #)

variable MIN_RGBA_LENGTH

const MIN_RGBA_LENGTH: number;

Minimum length for a string of an RGBA color component

const Modal: React.FunctionComponent<IModalProps>;

variable Nav

const Nav: React.FunctionComponent<INavProps>;

variable NormalPeoplePicker

const NormalPeoplePicker: React.FunctionComponent<IPeoplePickerProps>;

variable ONKEYDOWN_TIMEOUT_DURATION

const ONKEYDOWN_TIMEOUT_DURATION: number;

variable OverflowSet

const OverflowSet: React.FunctionComponent<IOverflowSetProps>;

variable Overlay

const Overlay: React.FunctionComponent<IOverlayProps>;

variable Panel

const Panel: React.FunctionComponent<IPanelProps>;

Panel description

variable PeoplePickerItem

const PeoplePickerItem: React.FunctionComponent<IPeoplePickerItemSelectedProps>;

variable PeoplePickerItemSuggestion

const PeoplePickerItemSuggestion: React.FunctionComponent<IPeoplePickerItemSuggestionProps>;

variable Persona

const Persona: React.FunctionComponent<IPersonaProps>;

Personas are used for rendering an individual's avatar, presence and details. They are used within the PeoplePicker components.

variable PersonaCoin

const PersonaCoin: React.FunctionComponent<IPersonaCoinProps>;

PersonaCoin is used to render an individual's avatar and presence.

variable Pivot

const Pivot: React.FunctionComponent<IPivotProps>;

The Pivot control and related tabs pattern are used for navigating frequently accessed, distinct content categories. Pivots allow for navigation between two or more content views and relies on text headers to articulate the different sections of content.

variable PlainCard

const PlainCard: React.FunctionComponent<IPlainCardProps>;

variable ProgressIndicator

const ProgressIndicator: React.FunctionComponent<IProgressIndicatorProps>;

ProgressIndicator description

variable Rating

const Rating: React.FunctionComponent<IRatingProps>;

variable ResizeGroup

const ResizeGroup: typeof ResizeGroupBase;

variable RGBA_REGEX

const RGBA_REGEX: RegExp;

Regular expression matching only numbers

variable ScrollablePane

const ScrollablePane: React.FunctionComponent<IScrollablePaneProps>;

variable ScrollablePaneContext

const ScrollablePaneContext: React.Context<IScrollablePaneContext>;

variable ScrollbarVisibility

const ScrollbarVisibility: { auto: 'auto'; always: 'always' };

variable ScrollToMode

const ScrollToMode: { auto: 0; top: 1; bottom: 2; center: 3 };

const SearchBox: React.FunctionComponent<ISearchBoxProps>;

variable Separator

const Separator: React.FunctionComponent<ISeparatorProps>;

variable SeparatorBase

const SeparatorBase: React.FunctionComponent<ISeparatorProps>;

variable Shimmer

const Shimmer: React.FunctionComponent<IShimmerProps>;

variable ShimmerCircle

const ShimmerCircle: React.FunctionComponent<IShimmerCircleProps>;

variable ShimmerCircleBase

const ShimmerCircleBase: React.FunctionComponent<IShimmerCircleProps>;

variable ShimmeredDetailsList

const ShimmeredDetailsList: React.FunctionComponent<IShimmeredDetailsListProps>;

variable ShimmerElementsGroup

const ShimmerElementsGroup: React.FunctionComponent<IShimmerElementsGroupProps>;

variable ShimmerElementsGroupBase

const ShimmerElementsGroupBase: React.FunctionComponent<IShimmerElementsGroupProps>;

variable ShimmerGap

const ShimmerGap: React.FunctionComponent<IShimmerGapProps>;

variable ShimmerGapBase

const ShimmerGapBase: React.FunctionComponent<IShimmerGapProps>;

variable ShimmerLine

const ShimmerLine: React.FunctionComponent<IShimmerLineProps>;

variable ShimmerLineBase

const ShimmerLineBase: React.FunctionComponent<IShimmerLineProps>;

variable sizeToPixels

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

variable Slider

const Slider: React.FunctionComponent<ISliderProps>;

variable Spinner

const Spinner: React.FunctionComponent<ISpinnerProps>;

variable Stack

const Stack: any;

variable StackItem

const StackItem: React.FunctionComponent<IStackItemProps>;

variable SwatchColorPicker

const SwatchColorPicker: React.FunctionComponent<ISwatchColorPickerProps>;

variable TagItem

const TagItem: React.FunctionComponent<ITagItemProps>;

variable TagItemSuggestion

const TagItemSuggestion: React.FunctionComponent<ITagItemSuggestionProps>;

variable TagPicker

const TagPicker: React.FunctionComponent<ITagPickerProps>;

variable TeachingBubble

const TeachingBubble: React.FunctionComponent<ITeachingBubbleProps>;

variable TeachingBubbleContent

const TeachingBubbleContent: React.FunctionComponent<ITeachingBubbleProps>;

variable Text

const Text: React.FunctionComponent<ITextProps>;

variable TextField

const TextField: React.FunctionComponent<ITextFieldProps>;

variable TextStyles

const TextStyles: IComponent<ITextProps, ITextTokens, IComponentStyles<ITextSlots>>;

variable TextView

const TextView: IComponent<ITextProps, ITextTokens, IComponentStyles<ITextSlots>>;

variable Toggle

const Toggle: React.FunctionComponent<IToggleProps>;

const Tooltip: React.FunctionComponent<ITooltipProps>;

variable TooltipHost

const TooltipHost: React.FunctionComponent<ITooltipHostProps>;

variable VerticalDivider

const VerticalDivider: React.FunctionComponent<IVerticalDividerProps>;

Functions

function buildColumns

buildColumns: (
    items: any[],
    canResizeColumns?: boolean,
    onColumnClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => void,
    sortedColumnKey?: string,
    isSortedDescending?: boolean,
    groupedColumnKey?: string,
    isMultiline?: boolean
) => IColumn[];

function buildKeytipConfigMap

buildKeytipConfigMap: (config: IKeytipConfig) => IKeytipConfigMap;

Builds a map of ID to IKeytipProps
Parameter config
IKeytipConfig object
Returns
Config map

function canAnyMenuItemsCheck

canAnyMenuItemsCheck: (items: IContextualMenuItem[]) => boolean;

Returns true if a list of menu items can contain a checkbox

function clamp

clamp: (value: number, max: number, min?: number) => number;

Clamp a value to ensure it falls within a given range.

function constructKeytip

constructKeytip: (
    configMap: IKeytipConfigMap,
    parentSequence: string[],
    keytip: IKeytipConfigItem
) => void;

Constructs a keytip from an IKeytipConfigItem and puts it in the configMap
Parameter configMap
IKeytipConfigMap to store the keytip in
Parameter parentSequence
string of the parent keytip
Parameter keytip
IKeytipConfigItem data

function correctHex

correctHex: (hex: string) => string;

Corrects a hex color to have length 3 or 6. Defaults to white if too short. Does NOT check anything besides the length (such as valid characters) and does NOT handle hex values starting with # sign.

function correctHSV

correctHSV: (color: IHSV) => IHSV;

Corrects an HSV color to fall within the valid range.

function correctRGB

correctRGB: (color: IRGB) => IRGB;

Corrects an RGB color to fall within the valid range.

function createGenericItem

createGenericItem: (
    name: string,
    currentValidationState: ValidationState
) => IGenericItem & { key: React.Key };

function createItem

createItem: (name: string, isValid: boolean) => ISuggestionModel<IPersonaProps>;

function cssColor

cssColor: (color?: string) => IRGB | undefined;

Converts a valid CSS color string to an RGB color. Note that hex colors *must* be prefixed with # to be considered valid. Alpha in returned color defaults to 100. Four and eight digit hex values (with alpha) are supported if the current browser supports them.

function getActivityItemClassNames

getActivityItemClassNames: (
    styles: IActivityItemStyles,
    className: string,
    activityPersonas: IPersonaProps[],
    isCompact: boolean
) => IActivityItemClassNames;

function getActivityItemStyles

getActivityItemStyles: (
    theme?: ITheme,
    customStyles?: IActivityItemStyles | undefined,
    animateBeaconSignal?: boolean | undefined,
    beaconColorOne?: string | undefined,
    beaconColorTwo?: string | undefined,
    isCompact?: boolean | undefined
) => IActivityItemStyles;

function getAllSelectedOptions

getAllSelectedOptions: (
    options: ISelectableOption[],
    selectedIndices: number[]
) => ISelectableOption[];

function getAriaDescribedBy

getAriaDescribedBy: (keySequences: string[]) => string;

Gets the aria-describedby value to put on the component with this keytip.
Parameter keySequences
KeySequences of the keytip.
Returns
The aria-describedby value to set on the component with this keytip.

function getBackgroundShade

getBackgroundShade: (
    color: IColor,
    shade: Shade,
    isInverted?: boolean
) => IColor | null;

function getBasePickerStyles

getBasePickerStyles: (props: IBasePickerStyleProps) => IBasePickerStyles;

function getBoundsFromTargetWindow

getBoundsFromTargetWindow: (
    target: Element | MouseEvent | Point | Rectangle | null,
    targetWindow: IWindowWithSegments
) => IRectangle;

function getColorFromHSV

getColorFromHSV: (hsv: IHSV, a?: number) => IColor;

Converts an HSV color (and optional alpha value) to a color object. If a is not given, a default of 100 is used. Hex in the returned value will *not* be prefixed with #. If a is unspecified or 100, the result's str property will contain a hex value (*not* prefixed with #)

function getColorFromRGBA

getColorFromRGBA: (rgba: IRGB) => IColor;

Converts an RGBA color to a color object (alpha defaults to 100).

function getColorFromString

getColorFromString: (inputColor: string) => IColor | undefined;

Converts a CSS color string to a color object. Note that hex colors *must* be prefixed with # to be considered valid.
inputColor will be used unmodified as the str property of the returned object. Alpha defaults to 100 if not specified in inputColor. Returns undefined if the color string is invalid/not recognized.

function getCommandBarStyles

getCommandBarStyles: (props: ICommandBarStyleProps) => ICommandBarStyles;

function getCommandButtonStyles

getCommandButtonStyles: (
    customStyles: IButtonStyles | undefined
) => IButtonStyles;

function getContextualMenuItemStyles

getContextualMenuItemStyles: (
    props: IContextualMenuItemStyleProps
) => IContextualMenuItemStyles;

Wrapper function for generating ContextualMenuItem classNames which adheres to the getStyles API, but invokes memoized className generator function with primitive values.
Parameter props
the ContextualMenuItem style props used to generate its styles.

function getContrastRatio

getContrastRatio: (color1: IColor, color2: IColor) => number;

function getDetailsColumnStyles

getDetailsColumnStyles: (
    props: IDetailsColumnStyleProps
) => IDetailsColumnStyles;

function getDetailsHeaderStyles

getDetailsHeaderStyles: (
    props: IDetailsHeaderStyleProps
) => IDetailsHeaderStyles;

function getDetailsListStyles

getDetailsListStyles: (props: IDetailsListStyleProps) => IDetailsListStyles;

function getDetailsRowCheckStyles

getDetailsRowCheckStyles: (
    props: IDetailsRowCheckStyleProps
) => IDetailsRowCheckStyles;

function getDetailsRowStyles

getDetailsRowStyles: (props: IDetailsRowStyleProps) => IDetailsRowStyles;

function getFontIcon

getFontIcon: (
    iconName: string,
    className?: string | undefined,
    ariaLabel?: string | undefined
) => any;

Memoized helper for rendering a FontIcon.
Parameter iconName
The name of the icon to use from the icon font.
Parameter className
Class name for styling the icon.
Parameter ariaLabel
Label for the icon for the benefit of screen readers.

function getFullColorString

getFullColorString: (color: IColor) => string;

Converts a color hue to an HTML color string (with # prefix). This implementation ignores all components of color except hue.

function GetGroupCount

GetGroupCount: (groups: IGroup[] | undefined) => number;

Takes an array of groups and returns a count of the groups and all descendant groups.
Parameter groups
The array of groups to count.

function getIconContent

getIconContent: (iconName?: string | undefined) => IIconContent | null;

function getInitialResponsiveMode

getInitialResponsiveMode: () => ResponsiveMode;

function getLayerCount

getLayerCount: (hostId: string) => number;

Gets the number of layers currently registered with a host id.
Parameter hostId
Id of the layer host.
Returns
The number of layers currently registered with the host.

function getLayerHost

getLayerHost: (hostId: string) => ILayerHost | undefined;

Gets the Layer Host instance associated with a hostId, if applicable.
Parameter hostId
Id of the layer host.
Returns
A component ref for the associated layer host.

function getLayerHostSelector

getLayerHostSelector: () => string | undefined;

Get the default target selector when determining a host

function getLayerStyles

getLayerStyles: (props: ILayerStyleProps) => ILayerStyles;

function getMaxHeight

getMaxHeight: (
    target: Element | MouseEvent | Point | Rectangle,
    targetEdge: DirectionalHint,
    gapSpace?: number,
    bounds?: IRectangle,
    coverTarget?: boolean
) => number;

Gets the maximum height that a rectangle can have in order to fit below or above a target. If the directional hint specifies a left or right edge (i.e. leftCenter) it will limit the height to the topBorder of the target given. If no bounds are provided then the window is treated as the bounds.

function getMeasurementCache

getMeasurementCache: () => {
    getCachedMeasurement: (data: any) => number | undefined;
    addMeasurementToCache: (data: any, measurement: number) => void;
};

Returns a simple object is able to store measurements with a given key.

function getMenuItemStyles

getMenuItemStyles: (theme: ITheme) => IMenuItemStyles;

function getNextResizeGroupStateProvider

getNextResizeGroupStateProvider: (measurementCache?: {
    getCachedMeasurement: (data: any) => number | undefined;
    addMeasurementToCache: (data: any, measurement: number) => void;
}) => {
    getNextState: (
        props: IResizeGroupProps,
        currentState: IResizeGroupState,
        getElementToMeasureDimension: () => number,
        newContainerDimension?: number | undefined
    ) => IResizeGroupState | undefined;
    shouldRenderDataForMeasurement: (dataToMeasure: any) => boolean;
    getInitialResizeGroupState: (data: any) => IResizeGroupState;
};

Returns a function that is able to compute the next state for the ResizeGroup given the current state and any measurement updates.

function getOppositeEdge

getOppositeEdge: (edge: RectangleEdge) => RectangleEdge;

Returns the opposite edge of the given RectangleEdge.

function getPeoplePickerItemStyles

getPeoplePickerItemStyles: (
    props: IPeoplePickerItemSelectedStyleProps
) => IPeoplePickerItemSelectedStyles;

function getPeoplePickerItemSuggestionStyles

getPeoplePickerItemSuggestionStyles: (
    props: IPeoplePickerItemSuggestionStyleProps
) => IPeoplePickerItemSuggestionStyles;

function getPersonaInitialsColor

getPersonaInitialsColor: (
    props: Pick<IPersonaProps, 'primaryText' | 'text' | 'initialsColor'>
) => string;

Gets the hex color string (prefixed with #) for the given persona props. This is the logic used internally by the Persona control.
Parameter props
Current persona props
Returns
Hex color string prefixed with #

function getResponsiveMode

getResponsiveMode: (currentWindow: Window | undefined) => ResponsiveMode;

function getShade

getShade: (color: IColor, shade: Shade, isInverted?: boolean) => IColor | null;

Given a color and a shade specification, generates the requested shade of the color. Logic: if white darken via tables defined above if black lighten if light strongen if dark soften else default soften or strongen depending on shade#
Parameter color
The base color whose shade is to be computed
Parameter shade
The shade of the base color to compute
Parameter isInverted
Default false. Whether the given theme is inverted (reverse strongen/soften logic)

function getShimmeredDetailsListStyles

getShimmeredDetailsListStyles: (
    props: Required<
        Pick<
            import('./ShimmeredDetailsList.types').IShimmeredDetailsListProps,
            'theme'
        >
    >
) => IShimmeredDetailsListStyles;

function getSplitButtonClassNames

getSplitButtonClassNames: (
    styles: IButtonStyles,
    disabled: boolean,
    expanded: boolean,
    checked: boolean,
    primaryDisabled?: boolean | undefined
) => ISplitButtonClassNames;

function getSubmenuItems

getSubmenuItems: (
    item: IContextualMenuItem,
    options?: { target?: Target }
) => IContextualMenuItem[] | undefined;

function getSuggestionsItemStyles

getSuggestionsItemStyles: (
    props: ISuggestionsItemStyleProps
) => ISuggestionsItemStyles;

function getSuggestionsStyles

getSuggestionsStyles: (props: ISuggestionsStyleProps) => ISuggestionsStyles;

function getTagItemStyles

getTagItemStyles: (props: ITagItemStyleProps) => ITagItemStyles;

function getTagItemSuggestionStyles

getTagItemSuggestionStyles: (
    props: ITagItemSuggestionStyleProps
) => ITagItemSuggestionStyles;

function getTextFieldStyles

getTextFieldStyles: (props: ITextFieldStyleProps) => ITextFieldStyles;

function hsl2hsv

hsl2hsv: (h: number, s: number, l: number) => IHSV;

Converts HSL components to an HSV color.

function hsl2rgb

hsl2rgb: (h: number, s: number, l: number) => IRGB;

Converts HSL components to an RGB color. Does not set the alpha value.

function hsv2hex

hsv2hex: (h: number, s: number, v: number) => string;

Converts HSV components to a hex color string (without # prefix).

function hsv2hsl

hsv2hsl: (h: number, s: number, v: number) => IHSL;

Converts HSV components to an HSL color.

function hsv2rgb

hsv2rgb: (h: number, s: number, v: number) => IRGB;

Converts HSV components to an RGB color. Does not set the alpha value.

function initializeResponsiveMode

initializeResponsiveMode: (element?: HTMLElement) => void;

Initializes the responsive mode to the current window size. This can be used to avoid a re-render during first component mount since the window would otherwise not be measured until after mounting.

function isDark

isDark: (color: IColor) => boolean;

function isRelativeUrl

isRelativeUrl: (url: string) => boolean;

function isValidShade

isValidShade: (shade?: Shade) => boolean;

Returns true if the argument is a valid Shade value
Parameter shade
The Shade value to validate.

function ktpTargetFromId

ktpTargetFromId: (keytipId: string) => string;

Constructs the data-ktp-execute-target attribute selector from a keytip ID.
Parameter keytipId
ID of the Keytip.
Returns
String selector to use to query for the keytip execute target.

function ktpTargetFromSequences

ktpTargetFromSequences: (keySequences: string[]) => string;

Constructs the data-ktp-target attribute selector from a full key sequence.
Parameter keySequences
Full string[] for a Keytip.
Returns
String selector to use to query for the keytip target.

function mergeOverflows

mergeOverflows: (
    keySequences: string[],
    overflowKeySequences: string[]
) => string[];

Merges an overflow sequence with a key sequence.
Parameter keySequences
Full sequence for one keytip.
Parameter overflowKeySequences
Full overflow keytip sequence.
Returns
Sequence that will be used by the keytip when in the overflow.

function notifyHostChanged

notifyHostChanged: (id: string) => void;

Used for notifying applicable Layers that a host is available/unavailable and to re-evaluate Layers that care about the specific host.

function PeoplePickerItemBase

PeoplePickerItemBase: (props: IPeoplePickerItemSelectedProps) => JSX.Element;

function PeoplePickerItemSuggestionBase

PeoplePickerItemSuggestionBase: (
    props: IPeoplePickerItemSuggestionProps
) => JSX.Element;

function positionCallout

positionCallout: (
    props: IPositionProps,
    hostElement: HTMLElement,
    elementToPosition: HTMLElement,
    previousPositions?: ICalloutPositionedInfo
) => ICalloutPositionedInfo;

function positionCard

positionCard: (
    props: IPositionProps,
    hostElement: HTMLElement,
    elementToPosition: HTMLElement,
    previousPositions?: ICalloutPositionedInfo
) => ICalloutPositionedInfo;

function positionElement

positionElement: (
    props: IPositionProps,
    hostElement: HTMLElement,
    elementToPosition: HTMLElement,
    previousPositions?: IPositionedData
) => IPositionedData;

Used to position an element relative to the given positioning props. If positioning has been completed before, previousPositions can be passed to ensure that the positioning element repositions based on its previous targets rather than starting with directionalhint.

function presenceBoolean

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

function registerLayer

registerLayer: (hostId: string, callback: () => void) => void;

function registerLayerHost

registerLayerHost: (hostId: string, layerHost: ILayerHost) => void;

Registers a Layer Host with an associated hostId.
Parameter hostId
Id of the layer host
Parameter layerHost
layer host instance

function rgb2hex

rgb2hex: (r: number, g: number, b: number) => string;

Converts RGB components to a hex color string (without # prefix).

function rgb2hsv

rgb2hsv: (r: number, g: number, b: number) => IHSV;

Converts RGB components to an HSV color.

function sequencesToID

sequencesToID: (keySequences: string[]) => string;

Converts a whole set of KeySequences into one keytip ID, which will be the ID for the last keytip sequence specified keySequences should not include the initial keytip 'start' sequence.
Parameter keySequences
Full path of IKeySequences for one keytip.
Returns
String to use for the keytip ID.

function setLayerHostSelector

setLayerHostSelector: (selector?: string) => void;

Sets the default target selector to use when determining the host in which Layered content will be injected into. If not provided, an element will be created at the end of the document body.
Passing in a falsey value will clear the default target and reset back to using a created element at the end of document body.

function setResponsiveMode

setResponsiveMode: (responsiveMode: ResponsiveMode | undefined) => void;

Allows a server rendered scenario to provide a default responsive mode.

function sizeBoolean

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

function TagItemBase

TagItemBase: (props: ITagItemProps) => JSX.Element;

function TagItemSuggestionBase

TagItemSuggestionBase: (props: ITagItemSuggestionProps) => JSX.Element;

function themeRulesStandardCreator

themeRulesStandardCreator: () => IThemeRules;

function transitionKeysAreEqual

transitionKeysAreEqual: (
    key1: IKeytipTransitionKey,
    key2: IKeytipTransitionKey
) => boolean;

Tests for equality between two IKeytipTransitionKeys.
Parameter key1
First IKeytipTransitionKey.
Parameter key2
Second IKeytipTransitionKey.
Returns
T/F if the transition keys are equal.

function transitionKeysContain

transitionKeysContain: (
    keys: IKeytipTransitionKey[],
    key: IKeytipTransitionKey
) => boolean;

Tests if 'key' is present in 'keys'.
Parameter keys
Array of IKeytipTransitionKey.
Parameter key
IKeytipTransitionKey to find in 'keys'.
Returns
T/F if 'keys' contains 'key'.

function unregisterLayer

unregisterLayer: (hostId: string, callback: () => void) => void;

Unregister a layer for a given host id
Parameter hostId
Id of the layer host
Parameter layer
Layer instance

function unregisterLayerHost

unregisterLayerHost: (hostId: string, layerHost: ILayerHost) => void;

Unregisters a Layer Host from the associated hostId.
Parameter hostId
Id of the layer host
Parameter layerHost
layer host instance

function updateA

updateA: (color: IColor, a: number) => IColor;

Gets a color with the given alpha value and the same other components as color. Does not modify the original color.

function updateH

updateH: (color: IColor, h: number) => IColor;

Gets a color with the same saturation and value as color and the other components updated to match the given hue.
Does not modify the original color and does not supply a default alpha value.

function updateRGB

updateRGB: (color: IColor, component: keyof IRGB, value: number) => IColor;

Gets a color with a single RGBA component updated to a new value. Does not modify the original color. Alpha defaults to 100 if not set.

function updateSV

updateSV: (color: IColor, s: number, v: number) => IColor;

Gets a color with the same hue as color and other components updated to match the given saturation and value.
Does not modify the original color and does not supply a default alpha value.

function updateT

updateT: (color: IColor, t: number) => IColor;

Gets a color with the given transparency value and the same other components as color. Does not modify the original color.

function useKeytipRef

useKeytipRef: <TElement extends HTMLElement = HTMLElement>(
    options: KeytipDataOptions
) => React.Ref<TElement>;

Hook that creates a ref which is used for passing to Keytip target element. The ref will handle setting the attributes needed for Keytip to work.

function useResponsiveMode

useResponsiveMode: (elementRef: React.RefObject<HTMLElement>) => ResponsiveMode;

Hook to get the current responsive mode (window size category).

function withResponsiveMode

withResponsiveMode: <TProps extends { responsiveMode?: ResponsiveMode }, TState>(
    ComposedComponent: new (props: TProps, ...args: any[]) => React.Component<
        TProps,
        TState
    >
) => any;

function withViewport

withViewport: <TProps extends { viewport?: IViewport }, TState>(
    ComposedComponent: new (props: TProps, ...args: any[]) => React.Component<
        TProps,
        TState
    >
) => any;

A decorator to update decorated component on viewport or window resize events.
Parameter ComposedComponent
decorated React component reference.

Classes

class ActionButton

class ActionButton extends React.Component<IButtonProps, {}> {}

method render

render: () => JSX.Element;

class ActivityItem

class ActivityItem extends React.Component<IActivityItemProps, {}> {}

constructor

constructor(props: IActivityItemProps);

method render

render: () => JSX.Element;

class AnnouncedBase

class AnnouncedBase extends React.Component<IAnnouncedProps> {}

property defaultProps

static defaultProps: Partial<IAnnouncedProps>;

method render

render: () => JSX.Element;

class Autofill

class Autofill
    extends React.Component<IAutofillProps, IAutofillState>
    implements IAutofill {}

constructor

constructor(props: IAutofillProps);

property cursorLocation

readonly cursorLocation: number;

property defaultProps

static defaultProps: { enableAutofillOnKeyPress: number[] };

property inputElement

readonly inputElement: HTMLInputElement;

property isValueSelected

readonly isValueSelected: boolean;

property selectionEnd

readonly selectionEnd: number;

property selectionStart

readonly selectionStart: number;

property value

readonly value: string;

method clear

clear: () => void;

method componentDidUpdate

componentDidUpdate: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method focus

focus: () => void;

method render

render: () => JSX.Element;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (nextProps: IAutofillProps) => void;

class BaseAutoFill

class BaseAutoFill extends Autofill {}

Deprecated
do not use.

class BaseButton

class BaseButton
    extends React.Component<IBaseButtonProps, IBaseButtonState>
    implements IButton {}

constructor

constructor(props: IBaseButtonProps);

property defaultProps

static defaultProps: Partial<IBaseButtonProps>;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (
    prevProps: IBaseButtonProps,
    prevState: IBaseButtonState
) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method dismissMenu

dismissMenu: () => void;

method focus

focus: () => void;

method openMenu

openMenu: (
    shouldFocusOnContainer?: boolean,
    shouldFocusOnMount?: boolean
) => void;

method render

render: () => JSX.Element;

class BaseExtendedPeoplePicker

class BaseExtendedPeoplePicker extends BaseExtendedPicker<
    IPersonaProps,
    IExtendedPeoplePickerProps
> {}

class BaseExtendedPicker

class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>>
    extends React.Component<P, IBaseExtendedPickerState<T>>
    implements IBaseExtendedPicker<T> {}

constructor

constructor(basePickerProps: IBaseExtendedPickerProps<T>);

property floatingPicker

floatingPicker: React.RefObject<
    BaseFloatingPicker<T, IBaseFloatingPickerProps<T>>
>;

property floatingPickerProps

protected floatingPickerProps: IBaseFloatingPickerProps<T>;

property highlightedItems

readonly highlightedItems: T[];

property input

protected input: React.RefObject<Autofill>;

property inputElement

readonly inputElement: HTMLInputElement;

property items

readonly items: any;

property onBackspace

protected onBackspace: (ev: React.KeyboardEvent<HTMLElement>) => void;

property onCopy

protected onCopy: (ev: React.ClipboardEvent<HTMLElement>) => void;

property onInputChange

protected onInputChange: (
    value: string,
    composing?: boolean | undefined
) => void;

property onInputClick

protected onInputClick: (
    ev: React.MouseEvent<HTMLInputElement | Autofill, MouseEvent>
) => void;

property onInputFocus

protected onInputFocus: (
    ev: React.FocusEvent<HTMLInputElement | Autofill>
) => void;

property onPaste

protected onPaste: (
    ev: React.ClipboardEvent<HTMLInputElement | Autofill>
) => void;

property onSelectionChange

protected onSelectionChange: () => void;

property root

protected root: React.RefObject<HTMLDivElement>;

property selectedItemsList

selectedItemsList: React.RefObject<
    BaseSelectedItemsList<T, IBaseSelectedItemsListProps<T>>
>;

property selectedItemsListProps

protected selectedItemsListProps: IBaseSelectedItemsListProps<T>;

property selection

protected selection: Selection;

method canAddItems

protected canAddItems: () => boolean;

method clearInput

clearInput: () => void;

method componentDidMount

componentDidMount: () => void;

method focus

focus: () => void;

method render

render: () => JSX.Element;

method renderFloatingPicker

protected renderFloatingPicker: () => JSX.Element;

method renderSelectedItemsList

protected renderSelectedItemsList: () => JSX.Element;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (newProps: P) => void;

class BaseFloatingPeoplePicker

class BaseFloatingPeoplePicker extends BaseFloatingPicker<
    IPersonaProps,
    IPeopleFloatingPickerProps
> {}

class BaseFloatingPicker

class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>>
    extends React.Component<P, IBaseFloatingPickerState>
    implements IBaseFloatingPicker {}

constructor

constructor(basePickerProps: IBaseFloatingPickerProps<T>);

property completeSuggestion

completeSuggestion: () => void;

property currentPromise

protected currentPromise: PromiseLike<T[]>;

property currentSelectedSuggestionIndex

readonly currentSelectedSuggestionIndex: number;

property hidePicker

hidePicker: () => void;

property inputText

readonly inputText: string;

property isComponentMounted

protected isComponentMounted: boolean;

property isSuggestionsShown

readonly isSuggestionsShown: boolean;

property onKeyDown

protected onKeyDown: (ev: MouseEvent) => void;

property onQueryStringChanged

onQueryStringChanged: (queryString: string) => void;

property onSuggestionClick

protected onSuggestionClick: (
    ev: React.MouseEvent<HTMLElement, MouseEvent>,
    item: T,
    index: number
) => void;

property onSuggestionRemove

protected onSuggestionRemove: (
    ev: React.MouseEvent<HTMLElement, MouseEvent>,
    item: T,
    index: number
) => void;

property root

protected root: React.RefObject<HTMLDivElement>;

property selection

protected selection: Selection;

property showPicker

showPicker: (updateValue?: boolean) => void;

property suggestions

readonly suggestions: any[];

property suggestionsControl

protected suggestionsControl: React.RefObject<SuggestionsControl<T>>;

property SuggestionsControlOfProperType

protected SuggestionsControlOfProperType: new (
    props: ISuggestionsControlProps<T>
) => SuggestionsControl<T>;

property suggestionStore

protected suggestionStore: SuggestionsStore<T>;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method forceResolveSuggestion

forceResolveSuggestion: () => void;

method onChange

protected onChange: (item: T) => void;

method onSelectionChange

protected onSelectionChange: () => void;

method render

render: () => JSX.Element;

method renderSuggestions

protected renderSuggestions: () => JSX.Element | null;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (
    newProps: IBaseFloatingPickerProps<T>
) => void;

method updateSuggestions

updateSuggestions: (suggestions: T[], forceUpdate?: boolean) => void;

method updateSuggestionsList

protected updateSuggestionsList: (suggestions: T[] | PromiseLike<T[]>) => void;

method updateSuggestionWithZeroState

protected updateSuggestionWithZeroState: () => void;

method updateValue

protected updateValue: (updatedValue: string) => void;

class BasePeoplePicker

class BasePeoplePicker extends BasePicker<IPersonaProps, IPeoplePickerProps> {}

class BasePeopleSelectedItemsList

class BasePeopleSelectedItemsList extends BaseSelectedItemsList<
    IExtendedPersonaProps,
    ISelectedPeopleProps
> {}

class BasePicker

class BasePicker<T, P extends IBasePickerProps<T>>
    extends React.Component<P, IBasePickerState>
    implements IBasePicker<T> {}

constructor

constructor(basePickerProps: IBasePickerProps<T>);

property addItem

protected addItem: (item: T) => void;

property addItemByIndex

protected addItemByIndex: (index: number) => void;

property completeSelection

protected completeSelection: (item: T) => void;

property currentPromise

protected currentPromise: PromiseLike<any>;

property dismissSuggestions

dismissSuggestions: (ev?: any) => void;

property focusZone

protected focusZone: React.RefObject<IFocusZone>;

property input

protected input: React.RefObject<IAutofill>;

property items

readonly items: T[];

property onBlur

protected onBlur: (ev: React.FocusEvent<HTMLElement | Autofill>) => void;

property onClick

protected onClick: (ev: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;

Reveals suggestions any time the user clicks on the input element without shifting focus.

property onGetMoreResults

protected onGetMoreResults: () => void;

property onInputBlur

protected onInputBlur: (
    ev: React.FocusEvent<HTMLInputElement | Autofill>
) => void;

property onInputChange

protected onInputChange: (value: string) => void;

property onInputFocus

protected onInputFocus: (
    ev: React.FocusEvent<HTMLInputElement | Autofill>
) => void;

property onItemChange

protected onItemChange: (changedItem: T, index: number) => void;

property onKeyDown

protected onKeyDown: (ev: React.KeyboardEvent<HTMLElement>) => void;

property onSuggestionClick

protected onSuggestionClick: (
    ev: React.MouseEvent<HTMLElement, MouseEvent>,
    item: any,
    index: number
) => void;

property onSuggestionRemove

protected onSuggestionRemove: (
    ev: React.MouseEvent<HTMLElement, MouseEvent>,
    item: T,
    index: number
) => void;

property refocusSuggestions

refocusSuggestions: (keyCode: number) => void;

property removeItem

protected removeItem: (
    item: IPickerItemProps<T>,
    focusNextItem?: boolean | undefined
) => void;

property removeItems

protected removeItems: (itemsToRemove: any[]) => void;

property root

protected root: React.RefObject<HTMLDivElement>;

property selection

protected selection: Selection;

property suggestionElement

protected suggestionElement: React.RefObject<ISuggestions<T>>;

property SuggestionOfProperType

protected SuggestionOfProperType: new (
    props: ISuggestionsProps<T>
) => Suggestions<T>;

Deprecated
this is no longer necessary as typescript now supports generic elements

property suggestionStore

protected suggestionStore: SuggestionsController<T>;

method canAddItems

protected canAddItems: () => boolean;

method completeSuggestion

completeSuggestion: (forceComplete?: boolean) => void;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (oldProps: P, oldState: IBasePickerState) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method focus

focus: () => void;

method focusInput

focusInput: () => void;

method getActiveDescendant

protected getActiveDescendant: () => string | undefined;

method getDerivedStateFromProps

static getDerivedStateFromProps: (
    newProps: IBasePickerProps<any>
) => { items: any[] } | null;

method getSuggestionsAlert

protected getSuggestionsAlert: (
    suggestionAlertClassName?: string
) => JSX.Element | undefined;

method onBackspace

protected onBackspace: (ev: React.KeyboardEvent<HTMLElement>) => void;

method onChange

protected onChange: (items?: T[]) => void;

method onEmptyInputFocus

protected onEmptyInputFocus: () => 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

method onSelectionChange

protected onSelectionChange: () => void;

method onSuggestionSelect

protected onSuggestionSelect: () => void;

method render

render: () => JSX.Element;

method renderItems

protected renderItems: () => JSX.Element[];

method renderSuggestions

protected renderSuggestions: () => JSX.Element | null;

method resetFocus

protected resetFocus: (index?: number) => void;

method resolveNewValue

protected resolveNewValue: (updatedValue: string, suggestions: T[]) => void;

method updateSuggestions

protected updateSuggestions: (suggestions: any[]) => void;

method updateSuggestionsList

protected updateSuggestionsList: (
    suggestions: T[] | PromiseLike<T[]>,
    updatedValue?: string
) => void;

method updateValue

protected updateValue: (updatedValue: string) => void;

class BasePickerListBelow

class BasePickerListBelow<T, P extends IBasePickerProps<T>> extends BasePicker<
    T,
    P
> {}

method onBackspace

protected onBackspace: (ev: React.KeyboardEvent<HTMLElement>) => void;

method render

render: () => JSX.Element;

class BaseSelectedItemsList

class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
    extends React.Component<P, IBaseSelectedItemsListState<T>>
    implements IBaseSelectedItemsList<T> {}

constructor

constructor(basePickerProps: IBaseSelectedItemsListProps<T>);

property addItems

addItems: (items: T[]) => void;

property items

readonly items: T[];

property onCopy

onCopy: (ev: React.ClipboardEvent<HTMLElement>) => void;

property onItemChange

protected onItemChange: (changedItem: T, index: number) => void;

property onSelectionChanged

protected onSelectionChanged: () => void;

property removeItem

removeItem: (item: T) => void;

property removeItemAt

removeItemAt: (index: number) => void;

property removeItems

removeItems: (itemsToRemove: any[]) => void;

property renderItems

protected renderItems: () => JSX.Element[];

property replaceItem

replaceItem: (itemToReplace: T, itemsToReplaceWith: T[]) => void;

property root

protected root: HTMLElement;

property selection

protected selection: Selection;

method componentDidMount

componentDidMount: () => void;

method copyItems

protected copyItems: (items: T[]) => void;

method hasSelectedItems

hasSelectedItems: () => boolean;

method highlightedItems

highlightedItems: () => T[];

method onChange

protected onChange: (items?: T[]) => void;

method removeSelectedItems

removeSelectedItems: () => void;

method render

render: () => any;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (newProps: P) => void;

method UNSAFE_componentWillUpdate

UNSAFE_componentWillUpdate: (
    newProps: P,
    newState: IBaseSelectedItemsListState
) => void;

method unselectAll

unselectAll: () => void;

method updateItems

updateItems: (items: T[], focusIndex?: number) => 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.

class BreadcrumbBase

class BreadcrumbBase extends React.Component<IBreadcrumbProps, any> {}

constructor

constructor(props: IBreadcrumbProps);

property defaultProps

static defaultProps: IBreadcrumbProps;

method focus

focus: () => void;

Sets focus to the first breadcrumb link.

method render

render: () => JSX.Element;

class Button

class Button extends React.Component<IButtonProps, {}> {}

This class is deprecated. Use the individual *Button components instead.
Deprecated
Use the individual *Button components instead.

constructor

constructor(props: IButtonProps);

method render

render: () => JSX.Element;

class ButtonGridCell

class ButtonGridCell<T, P extends IButtonGridCellProps<T>> extends React.Component<
    P,
    {}
> {}

property defaultProps

static defaultProps: { disabled: boolean };

method render

render: () => JSX.Element;

class Calendar

class Calendar
    extends React.Component<ICalendarProps, ICalendarState>
    implements ICalendar {}

constructor

constructor(props: ICalendarProps);

property defaultProps

static defaultProps: ICalendarProps;

method componentDidUpdate

componentDidUpdate: () => void;

method focus

focus: () => void;

method render

render: () => JSX.Element;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (nextProps: ICalendarProps) => void;

class Callout

class Callout extends React.Component<ICalloutProps, ICalloutState> {}

method render

render: () => JSX.Element;

class CalloutContentBase

class CalloutContentBase extends React.Component<ICalloutProps, ICalloutState> {}

constructor

constructor(props: ICalloutProps);

property defaultProps

static defaultProps: {
    preventDismissOnLostFocus: boolean;
    preventDismissOnScroll: boolean;
    preventDismissOnResize: boolean;
    isBeakVisible: boolean;
    beakWidth: number;
    gapSpace: number;
    minPagePadding: number;
    directionalHint: 7;
};

property dismiss

dismiss: (
    ev?:
        | Event
        | React.MouseEvent<HTMLElement, MouseEvent>
        | React.KeyboardEvent<HTMLElement>
        | undefined
) => void;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => JSX.Element | null;

method shouldComponentUpdate

shouldComponentUpdate: (
    newProps: ICalloutProps,
    newState: ICalloutState
) => boolean;

method UNSAFE_componentWillMount

UNSAFE_componentWillMount: () => void;

method UNSAFE_componentWillUpdate

UNSAFE_componentWillUpdate: (newProps: ICalloutProps) => void;

class CheckboxBase

class CheckboxBase
    extends React.Component<ICheckboxProps, ICheckboxState>
    implements ICheckbox {}

constructor

constructor(props: ICheckboxProps, context?: any);

Initialize a new instance of the Checkbox
Parameter props
Props for the component
Parameter context
Context or initial state for the base component.

property checked

readonly checked: boolean;

property defaultProps

static defaultProps: ICheckboxProps;

property indeterminate

readonly indeterminate: boolean;

method focus

focus: () => void;

method getDerivedStateFromProps

static getDerivedStateFromProps: (
    nextProps: Readonly<ICheckboxProps>,
    prevState: Readonly<ICheckboxState>
) => ICheckboxState | null;

method render

render: () => JSX.Element;

Render the Checkbox based on passed props

class ChoiceGroupBase

class ChoiceGroupBase
    extends React.Component<IChoiceGroupProps, IChoiceGroupState>
    implements IChoiceGroup {}

constructor

constructor(props: IChoiceGroupProps);

property checkedOption

readonly checkedOption: IChoiceGroupOption;

Gets the current checked option.

method componentDidUpdate

componentDidUpdate: (
    prevProps: IChoiceGroupProps,
    prevState: IChoiceGroupState
) => void;

method focus

focus: () => void;

method render

render: () => JSX.Element;

class CoachmarkBase

class CoachmarkBase
    extends React.Component<ICoachmarkProps, ICoachmarkState>
    implements ICoachmark {}

constructor

constructor(props: ICoachmarkProps);

property defaultProps

static defaultProps: Partial<ICoachmarkProps>;

property dismiss

dismiss: (
    ev?:
        | Event
        | React.MouseEvent<HTMLElement, MouseEvent>
        | React.KeyboardEvent<HTMLElement>
        | undefined
) => void;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (
    prevProps: ICoachmarkProps,
    prevState: ICoachmarkState
) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => JSX.Element;

method shouldComponentUpdate

shouldComponentUpdate: (
    newProps: ICoachmarkProps,
    newState: ICoachmarkState
) => boolean;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (newProps: ICoachmarkProps) => void;

class ColorPickerBase

class ColorPickerBase
    extends React.Component<IColorPickerProps, IColorPickerState>
    implements IColorPicker {}

constructor

constructor(props: IColorPickerProps);

property color

readonly color: IColor;

property defaultProps

static defaultProps: Partial<IColorPickerProps>;

method componentDidUpdate

componentDidUpdate: (
    prevProps: Readonly<IColorPickerProps>,
    prevState: Readonly<IColorPickerState>
) => void;

method render

render: () => JSX.Element;

class ColorPickerGridCellBase

class ColorPickerGridCellBase extends React.PureComponent<
    IColorPickerGridCellProps,
    {}
> {}

property defaultProps

static defaultProps: Partial<IColorPickerGridCellProps>;

method render

render: () => JSX.Element;

class ComboBox

class ComboBox extends React.Component<IComboBoxProps, IComboBoxState> {}

constructor

constructor(props: IComboBoxProps);

property defaultProps

static defaultProps: IComboBoxProps;

property dismissMenu

dismissMenu: () => void;

Close menu callout if it is open

property focus

focus: (
    shouldOpenOnFocus?: boolean | undefined,
    useFocusAsync?: boolean | undefined
) => void;

property selectedOptions

readonly selectedOptions: IComboBoxOption[];

All selected options

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (
    prevProps: IComboBoxProps,
    prevState: IComboBoxState
) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => JSX.Element;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (newProps: IComboBoxProps) => void;

class CommandBarBase

class CommandBarBase
    extends React.Component<ICommandBarProps, {}>
    implements ICommandBar {}

constructor

constructor(props: ICommandBarProps);

property defaultProps

static defaultProps: ICommandBarProps;

method focus

focus: () => void;

method remeasure

remeasure: () => void;

method render

render: () => JSX.Element;

class CommandBarButton

class CommandBarButton extends React.Component<IButtonProps, {}> {}

method render

render: () => JSX.Element;

class CompactPeoplePickerBase

class CompactPeoplePickerBase extends BasePeoplePicker {}

Compact layout. It uses personas without secondary text when displaying search results.

property defaultProps

static defaultProps: {
    onRenderItem: (props: IPeoplePickerItemSelectedProps) => JSX.Element;
    onRenderSuggestionsItem: (
        personaProps: IPersonaProps,
        suggestionsProps?: IBasePickerSuggestionsProps<any> | undefined
    ) => JSX.Element;
    createGenericItem: typeof createGenericItem;
};

Default props for CompactPeoplePicker.

class CompoundButton

class CompoundButton extends React.Component<IButtonProps, {}> {}

method render

render: () => JSX.Element;

class ContextualMenuBase

class ContextualMenuBase extends React.Component<
    IContextualMenuProps,
    IContextualMenuState
> {}

constructor

constructor(props: IContextualMenuProps);

property defaultProps

static defaultProps: IContextualMenuProps;

property dismiss

dismiss: (ev?: any, dismissAll?: boolean | undefined) => void;

method componentDidMount

componentDidMount: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => JSX.Element | null;

method shouldComponentUpdate

shouldComponentUpdate: (
    newProps: IContextualMenuProps,
    newState: IContextualMenuState
) => boolean;

method UNSAFE_componentWillMount

UNSAFE_componentWillMount: () => void;

method UNSAFE_componentWillUpdate

UNSAFE_componentWillUpdate: (newProps: IContextualMenuProps) => void;

class ContextualMenuItemBase

class ContextualMenuItemBase extends React.Component<IContextualMenuItemProps, {}> {}

constructor

constructor(props: IContextualMenuItemProps);

property dismissMenu

dismissMenu: (dismissAll?: boolean | undefined) => void;

property dismissSubMenu

dismissSubMenu: () => void;

property openSubMenu

openSubMenu: () => void;

method render

render: () => JSX.Element;

class DatePickerBase

class DatePickerBase
    extends React.Component<IDatePickerProps, IDatePickerState>
    implements IDatePicker {}

constructor

constructor(props: IDatePickerProps);

property defaultProps

static defaultProps: IDatePickerProps;

method componentDidUpdate

componentDidUpdate: (
    prevProps: IDatePickerProps,
    prevState: IDatePickerState
) => void;

method focus

focus: () => void;

method render

render: () => JSX.Element;

method reset

reset: () => void;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (nextProps: IDatePickerProps) => void;

class DefaultButton

class DefaultButton extends React.Component<IButtonProps, {}> {}

method render

render: () => JSX.Element;

class DetailsColumnBase

class DetailsColumnBase extends React.Component<IDetailsColumnProps> {}

Component for rendering columns in a DetailsList.

constructor

constructor(props: IDetailsColumnProps);

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => JSX.Element;

class DetailsHeaderBase

class DetailsHeaderBase
    extends React.Component<IDetailsHeaderBaseProps, IDetailsHeaderState>
    implements IDetailsHeader {}

constructor

constructor(props: IDetailsHeaderBaseProps);

property defaultProps

static defaultProps: {
    selectAllVisibility: SelectAllVisibility;
    collapseAllVisibility: CollapseAllVisibility;
    useFastIcons: boolean;
};

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (prevProps: IDetailsHeaderBaseProps) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method focus

focus: () => boolean;

Set focus to the active thing in the focus area.

method render

render: () => JSX.Element;

class DetailsListBase

class DetailsListBase
    extends React.Component<IDetailsListProps, IDetailsListState>
    implements IDetailsList {}

constructor

constructor(props: IDetailsListProps);

property defaultProps

static defaultProps: {
    layoutMode: DetailsListLayoutMode;
    selectionMode: SelectionMode;
    constrainMode: ConstrainMode;
    checkboxVisibility: CheckboxVisibility;
    isHeaderVisible: boolean;
    compact: boolean;
    useFastIcons: boolean;
};

method componentDidUpdate

componentDidUpdate: (
    prevProps: IDetailsListProps,
    prevState: IDetailsListState
) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method focusIndex

focusIndex: (
    index: number,
    forceIntoFirstElement?: boolean,
    measureItem?: (itemIndex: number) => number,
    scrollToMode?: ScrollToMode
) => void;

method forceUpdate

forceUpdate: () => void;

method getDerivedStateFromProps

static getDerivedStateFromProps: (
    nextProps: IDetailsListProps,
    previousState: IDetailsListState
) => IDetailsListState;

method getStartItemIndexInView

getStartItemIndexInView: () => number;

method render

render: () => JSX.Element;

method scrollToIndex

scrollToIndex: (
    index: number,
    measureItem?: (itemIndex: number) => number,
    scrollToMode?: ScrollToMode
) => void;

class DetailsRowBase

class DetailsRowBase extends React.Component<
    IDetailsRowBaseProps,
    IDetailsRowState
> {}

constructor

constructor(props: IDetailsRowBaseProps);

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (previousProps: IDetailsRowBaseProps) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method focus

focus: (forceIntoFirstElement?: boolean) => boolean;

method getDerivedStateFromProps

static getDerivedStateFromProps: (
    nextProps: IDetailsRowBaseProps,
    previousState: IDetailsRowState
) => IDetailsRowState;

method measureCell

measureCell: (index: number, onMeasureDone: (width: number) => void) => void;

measure cell at index. and call the call back with the measured cell width when finish measure
Parameter index
The cell index
Parameter onMeasureDone
The call back function when finish measure

method render

render: () => JSX.Element;

method shouldComponentUpdate

shouldComponentUpdate: (
    nextProps: IDetailsRowBaseProps,
    nextState: IDetailsRowState
) => boolean;

class DialogBase

class DialogBase extends React.Component<IDialogProps, {}> {}

constructor

constructor(props: IDialogProps);

property defaultProps

static defaultProps: IDialogProps;

method render

render: () => JSX.Element;

class DialogContentBase

class DialogContentBase extends React.Component<IDialogContentProps, {}> {}

constructor

constructor(props: IDialogContentProps);

property defaultProps

static defaultProps: IDialogContentProps;

method render

render: () => JSX.Element;

class DialogFooterBase

class DialogFooterBase extends React.Component<IDialogFooterProps, {}> {}

constructor

constructor(props: IDialogFooterProps);

method render

render: () => JSX.Element;

class DragDropHelper

class DragDropHelper implements IDragDropHelper {}

constructor

constructor(params: IDragDropHelperParams);

method dispose

dispose: () => void;

subscribe: (
    root: HTMLElement,
    events: EventGroup,
    dragDropOptions: IDragDropOptions
) => { key: string; dispose(): void };

method unsubscribe

unsubscribe: (root: HTMLElement, key: string) => void;

class DropdownBase

class DropdownBase
    extends React.Component<IDropdownInternalProps, IDropdownState>
    implements IDropdown {}

constructor

constructor(props: IDropdownProps);

property defaultProps

static defaultProps: { options: any[] };

property selectedOptions

readonly selectedOptions: IDropdownOption[];

All selected options

method componentDidUpdate

componentDidUpdate: (
    prevProps: IDropdownProps,
    prevState: IDropdownState
) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method focus

focus: (shouldOpenOnFocus?: boolean) => void;

method render

render: () => JSX.Element;

method setSelectedIndex

setSelectedIndex: (
    event: React.FormEvent<HTMLDivElement>,
    index: number
) => void;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (newProps: IDropdownProps) => void;

class ExpandingCardBase

class ExpandingCardBase extends React.Component<
    IExpandingCardProps,
    IExpandingCardState
> {}

constructor

constructor(props: IExpandingCardProps);

property defaultProps

static defaultProps: {
    compactCardHeight: number;
    expandedCardHeight: number;
    directionalHintFixed: boolean;
};

method componentDidMount

componentDidMount: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => JSX.Element;

class ExtendedPeoplePicker

class ExtendedPeoplePicker extends BaseExtendedPeoplePicker {}

class ExtendedSelectedItem

class ExtendedSelectedItem extends React.Component<
    ISelectedPeopleItemProps,
    IPeoplePickerItemState
> {}

constructor

constructor(props: ISelectedPeopleItemProps);

property persona

protected persona: React.RefObject<HTMLDivElement>;

method render

render: () => JSX.Element;

class FabricBase

class FabricBase extends React.Component<IFabricProps> {}

method componentDidMount

componentDidMount: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => JSX.Element;

class FacepileBase

class FacepileBase extends React.Component<IFacepileProps, {}> {}

FacePile with no default styles. [Use the styles API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Component-Styling)

constructor

constructor(props: IFacepileProps);

property defaultProps

static defaultProps: IFacepileProps;

method onRenderAriaDescription

protected onRenderAriaDescription: () => '' | JSX.Element | undefined;

method render

render: () => JSX.Element;

class FloatingPeoplePicker

class FloatingPeoplePicker extends BaseFloatingPeoplePicker {}

property defaultProps

static defaultProps: any;

class FocusTrapZone

class FocusTrapZone
    extends React.Component<IFocusTrapZoneProps, {}>
    implements IFocusTrapZone {}

constructor

constructor(props: IFocusTrapZoneProps);

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (prevProps: IFocusTrapZoneProps) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method focus

focus: () => void;

method render

render: () => JSX.Element;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (nextProps: IFocusTrapZoneProps) => void;

class GroupedListBase

class GroupedListBase
    extends React.Component<IGroupedListProps, IGroupedListState>
    implements IGroupedList {}

constructor

constructor(props: IGroupedListProps);

property defaultProps

static defaultProps: {
    selectionMode: SelectionMode;
    isHeaderVisible: boolean;
    groupProps: {};
    compact: boolean;
};

method componentDidMount

componentDidMount: () => void;

method forceUpdate

forceUpdate: () => void;

method getDerivedStateFromProps

static getDerivedStateFromProps: (
    nextProps: IGroupedListProps,
    previousState: IGroupedListState
) => IGroupedListState;

method getStartItemIndexInView

getStartItemIndexInView: () => number;

method render

render: () => JSX.Element;

method scrollToIndex

scrollToIndex: (
    index: number,
    measureItem?: (itemIndex: number) => number,
    scrollToMode?: ScrollToMode
) => void;

method toggleCollapseAll

toggleCollapseAll: (allCollapsed: boolean) => void;

class GroupedListSection

class GroupedListSection extends React.Component<
    IGroupedListSectionProps,
    IGroupedListSectionState
> {}

constructor

constructor(props: IGroupedListSectionProps);

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (previousProps: IGroupedListSectionProps) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method forceListUpdate

forceListUpdate: () => void;

method forceUpdate

forceUpdate: () => void;

method render

render: () => JSX.Element;

class GroupedListV2Wrapper

class GroupedListV2Wrapper
    extends React.Component<IGroupedListV2Props, IGroupedListV2State>
    implements IGroupedList {}

constructor

constructor(props: IGroupedListV2Props);

property displayName

static displayName: string;

method forceUpdate

forceUpdate: () => void;

method getDerivedStateFromProps

static getDerivedStateFromProps: (
    nextProps: IGroupedListV2Props,
    previousState: IGroupedListV2State
) => IGroupedListV2State;

method getStartItemIndexInView

getStartItemIndexInView: () => number;

method render

render: () => JSX.Element;

method scrollToIndex

scrollToIndex: (
    index: number,
    measureItem?: (itemIndex: number) => number,
    scrollToMode?: ScrollToMode
) => void;

method toggleCollapseAll

toggleCollapseAll: (allCollapsed: boolean) => void;

class HoverCardBase

class HoverCardBase
    extends React.Component<IHoverCardProps, IHoverCardState>
    implements IHoverCard {}

constructor

constructor(props: IHoverCardProps);

property defaultProps

static defaultProps: {
    cardOpenDelay: number;
    cardDismissDelay: number;
    expandedCardOpenDelay: number;
    instantOpenOnClick: boolean;
    setInitialFocus: boolean;
    openHotKey: number;
    type: HoverCardType;
};

property dismiss

dismiss: (withTimeOut?: boolean | undefined) => void;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (
    prevProps: IHoverCardProps,
    prevState: IHoverCardState
) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => JSX.Element;

class IconBase

class IconBase extends React.Component<IIconProps, IIconState> {}

constructor

constructor(props: IIconProps);

method render

render: () => JSX.Element;

class IconButton

class IconButton extends React.Component<IButtonProps, {}> {}

method render

render: () => JSX.Element;

class ImageBase

class ImageBase extends React.Component<IImageProps, IImageState> {}

constructor

constructor(props: IImageProps);

property defaultProps

static defaultProps: { shouldFadeIn: boolean };

method componentDidUpdate

componentDidUpdate: (prevProps: IImageProps, prevState: IImageState) => void;

method render

render: () => JSX.Element;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (nextProps: IImageProps) => void;

class Keytip

class Keytip extends React.Component<IKeytipProps, {}> {}

A callout corresponding to another Fabric component to describe a key sequence that will activate that component

method render

render: () => JSX.Element;

class KeytipLayerBase

class KeytipLayerBase extends React.Component<
    IKeytipLayerProps,
    IKeytipLayerState
> {}

A layer that holds all keytip items

constructor

constructor(props: IKeytipLayerProps, context: any);

property defaultProps

static defaultProps: IKeytipLayerProps;

method componentDidMount

componentDidMount: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method getCurrentSequence

getCurrentSequence: () => string;

method getKeytipTree

getKeytipTree: () => KeytipTree;

method processInput

processInput: (key: string, ev?: React.KeyboardEvent<HTMLElement>) => void;

Processes inputs from the document listener and traverse the keytip tree
Parameter key
Key pressed by the user

method processTransitionInput

processTransitionInput: (
    transitionKey: IKeytipTransitionKey,
    ev?: React.KeyboardEvent<HTMLElement>
) => void;

Processes an IKeytipTransitionKey entered by the user
Parameter transitionKey
IKeytipTransitionKey received by the layer to process

method render

render: () => JSX.Element;

method showKeytips

showKeytips: (ids: string[]) => void;

Show the given keytips and hide all others
Parameter ids
Keytip IDs to show

class KeytipManager

class KeytipManager {}

This class is responsible for handling registering, updating, and unregistering of keytips

property delayUpdatingKeytipChange

delayUpdatingKeytipChange: boolean;

property inKeytipMode

inKeytipMode: boolean;

property keytips

keytips: { [key: string]: IUniqueKeytip };

property persistedKeytips

persistedKeytips: { [key: string]: IUniqueKeytip };

property sequenceMapping

sequenceMapping: { [key: string]: IKeytipProps };

property shouldEnterKeytipMode

shouldEnterKeytipMode: boolean;

method addParentOverflow

addParentOverflow: (keytipProps: IKeytipProps) => IKeytipProps;

Adds the overflowSetSequence to the keytipProps if its parent keytip also has it
Parameter keytipProps
Keytip props to add overflowSetSequence to if necessary
Returns
- Modified keytip props, if needed to be modified

method enterKeytipMode

enterKeytipMode: () => void;

Manual call to enter keytip mode

method exitKeytipMode

exitKeytipMode: () => void;

Manual call to exit keytip mode

method getInstance

static getInstance: () => KeytipManager;

Static function to get singleton KeytipManager instance
Returns
Singleton KeytipManager instance

method getKeytips

getKeytips: () => IKeytipProps[];

Gets all IKeytipProps from this.keytips
Returns
All keytips stored in the manager

method init

init: (delayUpdatingKeytipChange: boolean) => void;

Initialization code to set set parameters to define how the KeytipManager handles keytip data.
Parameter delayUpdatingKeytipChange
T/F if we should delay notifiying keytip subscribers of keytip changes

method menuExecute

menuExecute: (
    overflowButtonSequences: string[],
    keytipSequences: string[]
) => void;

Public function to bind for overflow items that have a submenu

method register

register: (keytipProps: IKeytipProps, persisted?: boolean) => string;

Registers a keytip
Parameter keytipProps
Keytip to register
Parameter persisted
T/F if this keytip should be persisted, default is false
Returns
Unique ID for this keytip

method unregister

unregister: (
    keytipToRemove: IKeytipProps,
    uniqueID: string,
    persisted?: boolean
) => void;

Unregisters a keytip
Parameter keytipToRemove
IKeytipProps of the keytip to remove
Parameter uniqueID
Unique ID of this keytip
Parameter persisted
T/F if this keytip should be persisted, default is false

method update

update: (keytipProps: IKeytipProps, uniqueID: string) => void;

Update a keytip
Parameter keytipProps
Keytip to update
Parameter uniqueID
Unique ID of this keytip

class LabelBase

class LabelBase extends React.Component<ILabelProps, {}> {}

method render

render: () => JSX.Element;

class LayerBase

class LayerBase extends React.Component<ILayerProps, ILayerBaseState> {}

constructor

constructor(props: ILayerProps);

property defaultProps

static defaultProps: ILayerProps;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => React.ReactNode;

class LayerHost

class LayerHost extends React.Component<ILayerHostProps> implements ILayerHost {}

constructor

constructor(props: ILayerHostProps);

property hostId

hostId: string;

property rootRef

rootRef: React.RefObject<HTMLDivElement>;

method componentDidMount

componentDidMount: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method notifyLayersChanged

notifyLayersChanged: () => void;

method render

render: () => JSX.Element;

method shouldComponentUpdate

shouldComponentUpdate: () => boolean;

class LinkBase

class LinkBase extends React.Component<ILinkProps, {}> implements ILink {}

constructor

constructor(props: ILinkProps);

method focus

focus: () => void;

method render

render: () => JSX.Element;

class List

class List<T = any>
    extends React.Component<IListProps<T>, IListState<T>>
    implements IList {}

The List renders virtualized pages of items. Each page's item count is determined by the getItemCountForPage callback if provided by the caller, or 10 as default. Each page's height is determined by the getPageHeight callback if provided by the caller, or by cached measurements if available, or by a running average, or a default fallback.
The algorithm for rendering pages works like this:
1. Predict visible pages based on "current measure data" (page heights, surface position, visible window) 2. If changes are necessary, apply changes (add/remove pages) 3. For pages that are added, measure the page heights if we need to using getBoundingClientRect 4. If measurements don't match predictions, update measure data and goto step 1 asynchronously
Measuring too frequently can pull performance down significantly. To compensate, we cache measured values so that we can avoid re-measuring during operations that should not alter heights, like scrolling.
To optimize glass rendering performance, onShouldVirtualize can be set. When onShouldVirtualize return false, List will run in fast mode (not virtualized) to render all items without any measurements to improve page load time. And we start doing measurements and rendering in virtualized mode when items grows larger than this threshold.
However, certain operations can make measure data stale. For example, resizing the list, or passing in new props, or forcing an update change cause pages to shrink/grow. When these operations occur, we increment a measureVersion number, which we associate with cached measurements and use to determine if a remeasure should occur.

constructor

constructor(props: IListProps<T>);

property defaultProps

static defaultProps: {
    startIndex: number;
    onRenderCell: (
        item: any,
        index: number,
        containsFocus: boolean
    ) => JSX.Element;
    onRenderCellConditional: undefined;
    renderedWindowsAhead: number;
    renderedWindowsBehind: number;
};

property pageRefs

readonly pageRefs: Readonly<Record<string, unknown>>;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (
    previousProps: IListProps,
    previousState: IListState<T>
) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method forceUpdate

forceUpdate: () => void;

method getDerivedStateFromProps

static getDerivedStateFromProps: <U = any>(
    nextProps: IListProps<U>,
    previousState: IListState<U>
) => IListState<U>;

method getStartItemIndexInView

getStartItemIndexInView: (measureItem?: (itemIndex: number) => number) => number;

method getTotalListHeight

getTotalListHeight: () => number;

Get the current height the list and it's pages.

method render

render: () => JSX.Element | null;

method scrollToIndex

scrollToIndex: (
    index: number,
    measureItem?: (itemIndex: number) => number,
    scrollToMode?: ScrollToMode
) => void;

Scroll to the given index. By default will bring the page the specified item is on into the view. If a callback to measure the height of an individual item is specified, will only scroll to bring the specific item into view.
Note: with items of variable height and no passed in getPageHeight method, the list might jump after scrolling when windows before/ahead are being rendered, and the estimated height is replaced using actual elements.
Parameter index
Index of item to scroll to
Parameter measureItem
Optional callback to measure the height of an individual item
Parameter scrollToMode
Optional defines where in the window the item should be positioned to when scrolling

method shouldComponentUpdate

shouldComponentUpdate: (
    newProps: IListProps<T>,
    newState: IListState<T>
) => boolean;

class ListPeoplePickerBase

class ListPeoplePickerBase extends MemberListPeoplePicker {}

MemberList layout. The selected people show up below the search box.

property defaultProps

static defaultProps: {
    onRenderItem: (props: IPeoplePickerItemSelectedProps) => JSX.Element;
    onRenderSuggestionsItem: (
        personaProps: IPersonaProps,
        suggestionsProps?: IBasePickerSuggestionsProps<any> | undefined
    ) => JSX.Element;
    createGenericItem: typeof createGenericItem;
};

Default props for ListPeoplePicker.

class MaskedTextField

class MaskedTextField
    extends React.Component<IMaskedTextFieldProps, IMaskedTextFieldState>
    implements ITextField {}

constructor

constructor(props: IMaskedTextFieldProps);

property defaultProps

static defaultProps: IMaskedTextFieldProps;

property selectionEnd

readonly selectionEnd: number;

property selectionStart

readonly selectionStart: number;

property value

readonly value: string;

Returns
The value of all filled format characters or undefined if not all format characters are filled

method blur

blur: () => void;

method componentDidUpdate

componentDidUpdate: () => void;

method focus

focus: () => void;

method render

render: () => JSX.Element;

method select

select: () => void;

method setSelectionEnd

setSelectionEnd: (value: number) => void;

method setSelectionRange

setSelectionRange: (start: number, end: number) => void;

method setSelectionStart

setSelectionStart: (value: number) => void;

method setValue

setValue: (newValue: string) => void;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (newProps: IMaskedTextFieldProps) => void;

class MemberListPeoplePicker

class MemberListPeoplePicker extends BasePickerListBelow<
    IPersonaProps,
    IPeoplePickerProps
> {}

class MessageBarBase

class MessageBarBase extends React.Component<IMessageBarProps, IMessageBarState> {}

constructor

constructor(props: IMessageBarProps);

property defaultProps

static defaultProps: IMessageBarProps;

method render

render: () => JSX.Element;

class MessageBarButton

class MessageBarButton extends React.Component<IButtonProps, {}> {}

method render

render: () => JSX.Element;

class ModalBase

class ModalBase
    extends React.Component<IModalProps, IDialogState>
    implements IModal {}

constructor

constructor(props: IModalProps);

property defaultProps

static defaultProps: IModalProps;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (prevProps: IModalProps, prevState: IDialogState) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method focus

focus: () => void;

method render

render: () => JSX.Element | null;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (newProps: IModalProps) => void;

class NavBase

class NavBase extends React.Component<INavProps, INavState> implements INav {}

constructor

constructor(props: INavProps);

property defaultProps

static defaultProps: INavProps;

property selectedKey

readonly selectedKey: string;

method focus

focus: (forceIntoFirstElement?: boolean) => boolean;

Sets focus to the first tabbable item in the zone.
Parameter forceIntoFirstElement
If true, focus will be forced into the first element, even if focus is already in the focus zone.
Returns
True if focus could be set to an active element, false if no operation was taken.

method render

render: () => JSX.Element | null;

class NormalPeoplePickerBase

class NormalPeoplePickerBase extends BasePeoplePicker {}

Standard People Picker.

property defaultProps

static defaultProps: {
    onRenderItem: (props: IPeoplePickerItemSelectedProps) => JSX.Element;
    onRenderSuggestionsItem: (
        personaProps: IPersonaProps,
        suggestionsProps?: IBasePickerSuggestionsProps<any> | undefined
    ) => JSX.Element;
    createGenericItem: typeof createGenericItem;
};

Default props for NormalPeoplePicker.

class OverflowSetBase

class OverflowSetBase
    extends React.Component<IOverflowSetProps, {}>
    implements IOverflowSet {}

constructor

constructor(props: IOverflowSetProps);

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method focus

focus: (forceIntoFirstElement?: boolean) => boolean;

Sets focus to the first tabbable item in the OverflowSet.
Parameter forceIntoFirstElement
If true, focus will be forced into the first element, even if focus is already in theOverflowSet
Returns
True if focus could be set to an active element, false if no operation was taken.

method focusElement

focusElement: (childElement?: HTMLElement) => boolean;

Sets focus to a specific child element within the OverflowSet.
Parameter childElement
The child element within the zone to focus.
Returns
True if focus could be set to an active element, false if no operation was taken.

method render

render: () => JSX.Element;

method UNSAFE_componentWillUpdate

UNSAFE_componentWillUpdate: () => void;

class OverlayBase

class OverlayBase extends React.Component<IOverlayProps, {}> {}

constructor

constructor(props: IOverlayProps);

method componentDidMount

componentDidMount: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => JSX.Element;

class PanelBase

class PanelBase
    extends React.Component<IPanelProps, IPanelState>
    implements IPanel {}

constructor

constructor(props: IPanelProps);

property defaultProps

static defaultProps: IPanelProps;

property dismiss

dismiss: (ev?: React.SyntheticEvent<HTMLElement, Event> | undefined) => void;

property isActive

readonly isActive: boolean;

isActive is true when panel is open or opening.

method close

close: () => void;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (
    previousProps: IPanelProps,
    previousState: IPanelState
) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method getDerivedStateFromProps

static getDerivedStateFromProps: (
    nextProps: Readonly<IPanelProps>,
    prevState: Readonly<IPanelState>
) => Partial<IPanelState> | null;

method open

open: () => void;

method render

render: () => JSX.Element | null;

class PersonaBase

class PersonaBase extends React.Component<IPersonaProps, {}> {}

Persona with no default styles. [Use the styles API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)

constructor

constructor(props: IPersonaProps);

property defaultProps

static defaultProps: IPersonaProps;

method render

render: () => JSX.Element;

class PersonaCoinBase

class PersonaCoinBase extends React.Component<IPersonaCoinProps, IPersonaState> {}

PersonaCoin with no default styles. [Use the getStyles API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)

constructor

constructor(props: IPersonaCoinProps);

property defaultProps

static defaultProps: IPersonaCoinProps;

method render

render: () => JSX.Element | null;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (nextProps: IPersonaCoinProps) => void;

class PivotBase

class PivotBase extends React.Component<IPivotProps, IPivotState> {}

Usage:
Pivot #1 Pivot #2 Pivot #3

constructor

constructor(props: IPivotProps);

method focus

focus: () => void;

Sets focus to the first pivot tab.

method render

render: () => JSX.Element;

class PivotItem

class PivotItem extends React.Component<IPivotItemProps, {}> {}

constructor

constructor(props: IPivotItemProps);

method render

render: () => JSX.Element;

class PlainCardBase

class PlainCardBase extends React.Component<IPlainCardProps, {}> {}

constructor

constructor(props: IPlainCardProps);

method render

render: () => JSX.Element;

class Popup extends React.Component<IPopupProps, IPopupState> {}

This adds accessibility to Dialog and Panel controls

constructor(props: IPopupProps);

static defaultProps: IPopupProps;

componentDidMount: () => void;

componentDidUpdate: () => void;

componentWillUnmount: () => void;

render: () => JSX.Element;

UNSAFE_componentWillMount: () => void;

class PositioningContainer

class PositioningContainer
    extends React.Component<IPositioningContainerProps, IPositioningContainerState>
    implements PositioningContainer {}

constructor

constructor(props: IPositioningContainerProps);

property defaultProps

static defaultProps: IPositioningContainerProps;

property dismiss

dismiss: (
    ev?:
        | Event
        | React.MouseEvent<HTMLElement, MouseEvent>
        | React.KeyboardEvent<HTMLElement>
        | undefined
) => void;

Deprecated, use onResize instead.
Deprecated
Use onResize instead.

property onResize

onResize: (
    ev?:
        | Event
        | React.MouseEvent<HTMLElement, MouseEvent>
        | React.KeyboardEvent<HTMLElement>
        | undefined
) => void;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => JSX.Element | null;

method UNSAFE_componentWillMount

UNSAFE_componentWillMount: () => void;

method UNSAFE_componentWillUpdate

UNSAFE_componentWillUpdate: (newProps: IPositioningContainerProps) => void;

class PrimaryButton

class PrimaryButton extends React.Component<IButtonProps, {}> {}

method render

render: () => JSX.Element;

class ProgressIndicatorBase

class ProgressIndicatorBase extends React.Component<IProgressIndicatorProps, {}> {}

ProgressIndicator with no default styles. [Use the styles API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)

constructor

constructor(props: IProgressIndicatorProps);

property defaultProps

static defaultProps: { label: string; description: string; width: number };

method render

render: () => JSX.Element;

class RatingBase

class RatingBase extends React.Component<IRatingProps, IRatingState> {}

constructor

constructor(props: IRatingProps);

property defaultProps

static defaultProps: IRatingProps;

method render

render: () => JSX.Element;

class ResizeGroupBase

class ResizeGroupBase extends React.Component<
    IResizeGroupProps,
    IResizeGroupState
> {}

constructor

constructor(props: IResizeGroupProps);

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (prevProps: IResizeGroupProps) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method remeasure

remeasure: () => void;

method render

render: () => JSX.Element;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (nextProps: IResizeGroupProps) => void;

class ScrollablePaneBase

class ScrollablePaneBase
    extends React.Component<IScrollablePaneProps, IScrollablePaneState>
    implements IScrollablePane {}

constructor

constructor(props: IScrollablePaneProps);

property addSticky

addSticky: (sticky: Sticky) => void;

property contentContainer

readonly contentContainer: HTMLDivElement;

property getScrollPosition

getScrollPosition: () => number;

property notifySubscribers

notifySubscribers: () => void;

property removeSticky

removeSticky: (sticky: Sticky) => void;

property root

readonly root: HTMLDivElement;

property sortSticky

sortSticky: (sticky: Sticky, sortAgain?: boolean | undefined) => void;

property stickyAbove

readonly stickyAbove: HTMLDivElement;

property stickyBelow

readonly stickyBelow: HTMLDivElement;

subscribe: (handler: Function) => void;

property syncScrollSticky

syncScrollSticky: (sticky: Sticky) => void;

property unsubscribe

unsubscribe: (handler: Function) => void;

property updateStickyRefHeights

updateStickyRefHeights: () => void;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (
    prevProps: IScrollablePaneProps,
    prevState: IScrollablePaneState
) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method forceLayoutUpdate

forceLayoutUpdate: () => void;

method render

render: () => JSX.Element;

method setStickiesDistanceFromTop

setStickiesDistanceFromTop: () => void;

method shouldComponentUpdate

shouldComponentUpdate: (
    nextProps: IScrollablePaneProps,
    nextState: IScrollablePaneState
) => boolean;

class SearchBoxBase

class SearchBoxBase extends React.Component<ISearchBoxProps, ISearchBoxState> {}

constructor

constructor(props: ISearchBoxProps);

property defaultProps

static defaultProps: Pick<
    ISearchBoxProps,
    'disableAnimation' | 'clearButtonProps'
>;

method focus

focus: () => void;

Sets focus to the search box input field

method hasFocus

hasFocus: () => boolean;

Returns whether or not the SearchBox has focus

method render

render: () => JSX.Element;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (newProps: ISearchBoxProps) => void;

class SelectedPeopleList

class SelectedPeopleList extends BasePeopleSelectedItemsList {}

Standard People Picker.

property defaultProps

static defaultProps: any;

property renderItems

protected renderItems: () => JSX.Element[];

class SelectionZone

class SelectionZone extends React.Component<
    ISelectionZoneProps,
    ISelectionZoneState
> {}

constructor

constructor(props: ISelectionZoneProps);

property defaultProps

static defaultProps: {
    isSelectedOnFocus: boolean;
    toggleWithoutModifierPressed: boolean;
    selectionMode: SelectionMode;
    selectionClearedOnEscapePress: boolean;
};

property ignoreNextFocus

ignoreNextFocus: () => void;

In some cases, the consuming scenario requires to set focus on a row without having SelectionZone react to the event. Note that focus events in IE <= 11 will occur asynchronously after .focus() has been called on an element, so we need a flag to store the idea that we will bypass the "next" focus event that occurs. This method does that.

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (previousProps: ISelectionZoneProps) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method getDerivedStateFromProps

static getDerivedStateFromProps: (
    nextProps: ISelectionZoneProps,
    prevState: ISelectionZoneState
) => ISelectionZoneState;

method render

render: () => JSX.Element;

class ShimmerBase

class ShimmerBase extends React.Component<IShimmerProps, IShimmerState> {}

constructor

constructor(props: IShimmerProps);

property defaultProps

static defaultProps: IShimmerProps;

method componentDidUpdate

componentDidUpdate: (prevProps: IShimmerProps) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => JSX.Element;

class ShimmeredDetailsListBase

class ShimmeredDetailsListBase extends React.Component<
    IShimmeredDetailsListProps,
    {}
> {}

constructor

constructor(props: IShimmeredDetailsListProps);

method render

render: () => JSX.Element;

class SliderBase

class SliderBase
    extends React.Component<ISliderProps, ISliderState>
    implements ISlider {}

constructor

constructor(props: ISliderProps);

property defaultProps

static defaultProps: ISliderProps;

property lowerValue

readonly lowerValue: number;

property range

readonly range: [number, number];

property value

readonly value: number;

method componentWillUnmount

componentWillUnmount: () => void;

method focus

focus: () => void;

method render

render: () => React.ReactElement<{}>;

class SpinButton

class SpinButton
    extends React.Component<ISpinButtonProps, ISpinButtonState>
    implements ISpinButton {}

constructor

constructor(props: ISpinButtonProps);

property defaultProps

static defaultProps: Required<
    Pick<
        ISpinButtonProps,
        | 'disabled'
        | 'label'
        | 'step'
        | 'min'
        | 'max'
        | 'labelPosition'
        | 'incrementButtonIcon'
        | 'decrementButtonIcon'
    >
>;

property value

readonly value: string;

Gets the value of the spin button.

method componentWillUnmount

componentWillUnmount: () => void;

method focus

focus: () => void;

method render

render: () => JSX.Element;

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (newProps: ISpinButtonProps) => void;

Invoked when a component is receiving new props. This method is not called for the initial render.

class SpinnerBase

class SpinnerBase extends React.Component<ISpinnerProps, any> {}

property defaultProps

static defaultProps: ISpinnerProps;

method render

render: () => JSX.Element;

class Sticky

class Sticky extends React.Component<IStickyProps, IStickyState> {}

constructor

constructor(props: IStickyProps);

property canStickyBottom

readonly canStickyBottom: boolean;

property canStickyTop

readonly canStickyTop: boolean;

property contextType

static contextType: React.Context<IScrollablePaneContext>;

property defaultProps

static defaultProps: IStickyProps;

property nonStickyContent

readonly nonStickyContent: HTMLDivElement;

property placeholder

readonly placeholder: HTMLDivElement;

property root

readonly root: HTMLDivElement;

property stickyContentBottom

readonly stickyContentBottom: HTMLDivElement;

property stickyContentTop

readonly stickyContentTop: HTMLDivElement;

property syncScroll

syncScroll: (container: HTMLElement) => void;

method addSticky

addSticky: (stickyContent: HTMLDivElement) => void;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (prevProps: IStickyProps, prevState: IStickyState) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => JSX.Element;

method resetSticky

resetSticky: () => void;

method setDistanceFromTop

setDistanceFromTop: (container: HTMLDivElement) => void;

method shouldComponentUpdate

shouldComponentUpdate: (
    nextProps: IStickyProps,
    nextState: IStickyState
) => boolean;

class Suggestions

class Suggestions<T> extends React.Component<
    ISuggestionsProps<T>,
    ISuggestionsState
> {}

constructor

constructor(suggestionsProps: ISuggestionsProps<T>);

property tryHandleKeyDown

tryHandleKeyDown: (keyCode: number, currentSuggestionIndex: number) => boolean;

Returns true if the event was handled, false otherwise

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: () => void;

method executeSelectedAction

executeSelectedAction: () => void;

method focusAboveSuggestions

focusAboveSuggestions: () => void;

method focusBelowSuggestions

focusBelowSuggestions: () => void;

method focusSearchForMoreButton

focusSearchForMoreButton: () => void;

method hasSuggestedAction

hasSuggestedAction: () => boolean;

method hasSuggestedActionSelected

hasSuggestedActionSelected: () => boolean;

method render

render: () => JSX.Element;

method scrollSelected

scrollSelected: () => void;

class SuggestionsControl

class SuggestionsControl<T> extends React.Component<
    ISuggestionsControlProps<T>,
    ISuggestionsControlState<T>
> {}

Class when used with SuggestionsStore, renders a suggestions control with customizable headers and footers

constructor

constructor(suggestionsProps: ISuggestionsControlProps<T>);

property currentSuggestion

readonly currentSuggestion: ISuggestionModel<T>;

property currentSuggestionIndex

readonly currentSuggestionIndex: number;

property selectedElement

readonly selectedElement: HTMLDivElement;

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method executeSelectedAction

executeSelectedAction: () => void;

method handleKeyDown

handleKeyDown: (keyCode: number) => boolean;

Handles the key down, returns true, if the event was handled, false otherwise
Parameter keyCode
The keyCode to handle

method hasSelection

hasSelection: () => boolean;

method hasSuggestionSelected

hasSuggestionSelected: () => boolean;

method removeSuggestion

removeSuggestion: (index?: number) => void;

method render

render: () => JSX.Element;

method renderFooterItems

protected renderFooterItems: () => JSX.Element | null;

method renderHeaderItems

protected renderHeaderItems: () => JSX.Element | null;

method resetSelectedItem

protected resetSelectedItem: () => void;

Resets the selected state and selects the first selectable item

method scrollSelected

scrollSelected: () => void;

method selectFirstItem

protected selectFirstItem: () => void;

Selects the first item

method selectLastItem

protected selectLastItem: () => void;

Selects the last item

method selectNextItem

protected selectNextItem: (
    itemType: SuggestionItemType,
    originalItemType?: SuggestionItemType
) => void;

Selects the next selectable item

method selectPreviousItem

protected selectPreviousItem: (
    itemType: SuggestionItemType,
    originalItemType?: SuggestionItemType
) => void;

Selects the previous selectable item

method UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps: (
    newProps: ISuggestionsControlProps<T>
) => void;

class SuggestionsController

class SuggestionsController<T> {}

constructor

constructor();

property currentIndex

currentIndex: number;

property currentSuggestion

currentSuggestion: ISuggestionModel<T>;

property suggestions

suggestions: ISuggestionModel<T>[];

method convertSuggestionsToSuggestionItems

convertSuggestionsToSuggestionItems: (
    suggestions: Array<ISuggestionModel<T> | T>
) => ISuggestionModel<T>[];

method createGenericSuggestion

createGenericSuggestion: (itemToConvert: ISuggestionModel<T> | T) => void;

method deselectAllSuggestions

deselectAllSuggestions: () => void;

method getCurrentItem

getCurrentItem: () => ISuggestionModel<T>;

method getSuggestionAtIndex

getSuggestionAtIndex: (index: number) => ISuggestionModel<T>;

method getSuggestions

getSuggestions: () => ISuggestionModel<T>[];

method hasSelectedSuggestion

hasSelectedSuggestion: () => boolean;

method nextSuggestion

nextSuggestion: () => boolean;

Increments the suggestion index and gets the next suggestion in the list.

method previousSuggestion

previousSuggestion: () => boolean;

Decrements the suggestion index and gets the previous suggestion in the list.

method removeSuggestion

removeSuggestion: (index: number) => void;

method setSelectedSuggestion

setSelectedSuggestion: (index: number) => void;

method updateSuggestions

updateSuggestions: (newSuggestions: T[], selectedIndex?: number) => void;

class SuggestionsCore

class SuggestionsCore<T> extends React.Component<ISuggestionsCoreProps<T>, {}> {}

Class when used with SuggestionsStore, renders a basic suggestions control

constructor

constructor(suggestionsProps: ISuggestionsCoreProps<T>);

property currentIndex

currentIndex: number;

property currentSuggestion

currentSuggestion: ISuggestionModel<T>;

property selectedElement

readonly selectedElement: HTMLDivElement;

method componentDidUpdate

componentDidUpdate: () => void;

method deselectAllSuggestions

deselectAllSuggestions: () => void;

method getCurrentItem

getCurrentItem: () => ISuggestionModel<T>;

method getSuggestionAtIndex

getSuggestionAtIndex: (index: number) => ISuggestionModel<T>;

method hasSuggestionSelected

hasSuggestionSelected: () => boolean;

method nextSuggestion

nextSuggestion: () => boolean;

Increments the selected suggestion index

method previousSuggestion

previousSuggestion: () => boolean;

Decrements the selected suggestion index

method removeSuggestion

removeSuggestion: (index: number) => void;

method render

render: () => JSX.Element;

method scrollSelected

scrollSelected: () => void;

method setSelectedSuggestion

setSelectedSuggestion: (index: number) => void;

class SuggestionsHeaderFooterItem

class SuggestionsHeaderFooterItem extends React.Component<
    ISuggestionsHeaderFooterItemProps,
    {}
> {}

constructor

constructor(props: ISuggestionsHeaderFooterItemProps);

method render

render: () => JSX.Element;

class SuggestionsItem

class SuggestionsItem<T> extends React.Component<ISuggestionItemProps<T>, {}> {}

constructor

constructor(props: ISuggestionItemProps<T>);

method render

render: () => JSX.Element;

class SuggestionsStore

class SuggestionsStore<T> {}

constructor

constructor(options?: SuggestionsStoreOptions<T>);

property suggestions

suggestions: ISuggestionModel<T>[];

method convertSuggestionsToSuggestionItems

convertSuggestionsToSuggestionItems: (
    suggestions: Array<ISuggestionModel<T> | T>
) => ISuggestionModel<T>[];

method getSuggestionAtIndex

getSuggestionAtIndex: (index: number) => ISuggestionModel<T>;

method getSuggestions

getSuggestions: () => ISuggestionModel<T>[];

method removeSuggestion

removeSuggestion: (index: number) => void;

method updateSuggestions

updateSuggestions: (newSuggestions: T[]) => void;

class SwatchColorPickerBase

class SwatchColorPickerBase extends React.Component<
    ISwatchColorPickerProps,
    ISwatchColorPickerState
> {}

constructor

constructor(props: ISwatchColorPickerProps);

property defaultProps

static defaultProps: ISwatchColorPickerProps;

method componentWillUnmount

componentWillUnmount: () => void;

method getDerivedStateFromProps

static getDerivedStateFromProps: (
    newProps: ISwatchColorPickerProps,
    state: ISwatchColorPickerState
) => { selectedIndex: number | undefined } | null;

method render

render: () => JSX.Element | null;

class TagPickerBase

class TagPickerBase extends BasePicker<ITag, ITagPickerProps> {}

constructor

constructor(props: ITagPickerProps);

property defaultProps

static defaultProps: {
    onRenderItem: (props: ITagItemProps) => JSX.Element;
    onRenderSuggestionsItem: (props: ITag) => JSX.Element;
};

class TeachingBubbleBase

class TeachingBubbleBase extends React.Component<
    ITeachingBubbleProps,
    ITeachingBubbleState
> {}

constructor

constructor(props: ITeachingBubbleProps);

property defaultProps

static defaultProps: {
    calloutProps: {
        beakWidth: number;
        gapSpace: number;
        setInitialFocus: boolean;
        doNotLayer: boolean;
        directionalHint: 12;
    };
};

property rootElement

rootElement: React.RefObject<HTMLDivElement>;

method focus

focus: () => void;

method render

render: () => JSX.Element;

class TeachingBubbleContentBase

class TeachingBubbleContentBase extends React.Component<
    ITeachingBubbleProps,
    ITeachingBubbleState
> {}

constructor

constructor(props: ITeachingBubbleProps);

property rootElement

rootElement: React.RefObject<HTMLDivElement>;

method componentDidMount

componentDidMount: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method focus

focus: () => void;

method render

render: () => JSX.Element;

class TextFieldBase

class TextFieldBase
    extends React.Component<ITextFieldProps, ITextFieldState, ITextFieldSnapshot>
    implements ITextField {}

constructor

constructor(props: ITextFieldProps);

property defaultProps

static defaultProps: ITextFieldProps;

property selectionEnd

readonly selectionEnd: number;

Gets the selection end of the text field

property selectionStart

readonly selectionStart: number;

Gets the selection start of the text field

property value

readonly value: string;

Gets the current value of the text field.

method blur

blur: () => void;

Blurs the text field.

method componentDidMount

componentDidMount: () => void;

method componentDidUpdate

componentDidUpdate: (
    prevProps: ITextFieldProps,
    prevState: ITextFieldState,
    snapshot: ITextFieldSnapshot
) => void;

method componentWillUnmount

componentWillUnmount: () => void;

method focus

focus: () => void;

Sets focus on the text field

method getSnapshotBeforeUpdate

getSnapshotBeforeUpdate: (
    prevProps: ITextFieldProps,
    prevState: ITextFieldState
) => ITextFieldSnapshot | null;

method render

render: () => JSX.Element;

method select

select: () => void;

Selects the text field

method setSelectionEnd

setSelectionEnd: (value: number) => void;

Sets the selection end of the text field to a specified value

method setSelectionRange

setSelectionRange: (start: number, end: number) => void;

Sets the start and end positions of a selection in a text field.
Parameter start
Index of the start of the selection.
Parameter end
Index of the end of the selection.

method setSelectionStart

setSelectionStart: (value: number) => void;

Sets the selection start of the text field to a specified value

class ThemeGenerator

class ThemeGenerator {}

method getThemeAsCode

static getThemeAsCode: (slotRules: IThemeRules) => any;

Gets code-formatted load theme blob that can be copy and pasted. Only used for the old theme designer, where loadTheme usage is acceptable, unlike in the new theme designer.

method getThemeAsCodeWithCreateTheme

static getThemeAsCodeWithCreateTheme: (slotRules: IThemeRules) => any;

Gets code-formatted load theme blob, specifically for the new theme designer, aka.ms/themedesigner. Shouldn't use loadTheme like the old theme designer since it's deprecated. We want to use the theme object from createTheme and use the Customizations.applySettings API instead.

method getThemeAsJson

static getThemeAsJson: (slotRules: IThemeRules) => any;

Gets the JSON-formatted blob that describes the theme, usable with the REST request endpoints:

{ [theme slot name as string] : [color as string],
 "tokenName": "#f00f00",
 "tokenName2": "#ba2ba2",
  ... }

method getThemeAsSass

static getThemeAsSass: (slotRules: IThemeRules) => any;

Gets the theme as a list of SASS variables that can be used in code

$tokenName: "[theme:tokenName, default:#f00f00]";
$tokenName2: "[theme:tokenName2, default:#ba2ba2]";
...

method getThemeForPowerShell

static getThemeForPowerShell: (slotRules: IThemeRules) => any;

Gets the theme formatted for PowerShell scripts

@{
"tokenName" = "#f00f00";
"tokenName2" = "#ba2ba2";
...
}

method insureSlots

static insureSlots: (slotRules: IThemeRules, isInverted: boolean) => void;

Sets the color of each slot based on its rule. Slots that don't inherit must have a color already. If this completes without error, then the theme is ready to use. (All slots will have a color.) setSlot() can be called before this, but this must be called before getThemeAs*(). Does not override colors of rules where isCustomized is true (i.e. doesn't override existing customizations).

method setSlot

static setSlot: (
    rule: IThemeSlotRule,
    color: string | IColor,
    isInverted?: boolean,
    isCustomization?: boolean,
    overwriteCustomColor?: boolean
) => void;

Sets an IThemeSlotRule to the given color and cascades it to the rest of the theme, updating other IThemeSlotRules in the theme that inherit from that color.
Parameter isInverted
whether it's a dark theme or not, which affects the algorithm used to generate shades
Parameter isCustomization
should be true only if it's a user action, and indicates overwriting the slot's inheritance (if any)
Parameter overwriteCustomColor
A slot could have a generated color based on its inheritance rules (isCustomized is false), or a custom color based on user input (isCustomized is true). This bool tells us whether to override existing customized colors.

class ToggleBase

class ToggleBase
    extends React.Component<IToggleProps, IToggleState>
    implements IToggle {}

constructor

constructor(props: IToggleProps);

property checked

readonly checked: boolean;

Gets the current checked state of the toggle.

method focus

focus: () => void;

method getDerivedStateFromProps

static getDerivedStateFromProps: (
    nextProps: Readonly<IToggleProps>,
    prevState: Readonly<IToggleState>
) => Partial<IToggleState> | null;

method render

render: () => JSX.Element;

class TooltipBase

class TooltipBase extends React.Component<ITooltipProps, any> {}

property defaultProps

static defaultProps: Partial<ITooltipProps>;

method render

render: () => JSX.Element;

class TooltipHostBase

class TooltipHostBase
    extends React.Component<ITooltipHostProps, ITooltipHostState>
    implements ITooltipHost {}

constructor

constructor(props: ITooltipHostProps);

property defaultProps

static defaultProps: { delay: TooltipDelay };

property dismiss

dismiss: () => void;

property show

show: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => JSX.Element;

class VirtualizedComboBox

class VirtualizedComboBox
    extends React.Component<IComboBoxProps, {}>
    implements IComboBox {}

constructor

constructor(props: IComboBoxProps);

property selectedOptions

readonly selectedOptions: IComboBoxOption[];

All selected options

method dismissMenu

dismissMenu: () => void;

method focus

focus: (shouldOpenOnFocus?: boolean, useFocusAsync?: boolean) => boolean;

method render

render: () => JSX.Element;

Interfaces

interface IAccessiblePopupProps

interface IAccessiblePopupProps {}

property closeButtonAriaLabel

closeButtonAriaLabel?: string;

Aria label on close button.

property elementToFocusOnDismiss

elementToFocusOnDismiss?: HTMLElement;

Sets the element to focus on when exiting the control's FocusTrapZone.

property firstFocusableSelector

firstFocusableSelector?: string | (() => string);

Class name (not actual selector) for first focusable item. Do not append a dot.

property forceFocusInsideTrap

forceFocusInsideTrap?: boolean;

Whether control should force focus inside its focus trap zone.

property ignoreExternalFocusing

ignoreExternalFocusing?: boolean;

If false (the default), the control's FocusTrapZone will restore focus to the element which activated it once the trap zone is unmounted or disabled. Set to true to disable this behavior.

property isClickableOutsideFocusTrap

isClickableOutsideFocusTrap?: boolean;

Whether this control will allow clicks outside its FocusTrapZone.

interface IActivityItemClassNames

interface IActivityItemClassNames {}

property activityContent

activityContent?: string;

property activityPersona

activityPersona?: string;

property activityText

activityText?: string;

property activityTypeIcon

activityTypeIcon?: string;

property commentText

commentText?: string;

property personaContainer

personaContainer?: string;

property pulsingBeacon

pulsingBeacon?: string;

property root

root?: string;

property timeStamp

timeStamp?: string;

interface IActivityItemProps

interface IActivityItemProps extends React.AllHTMLAttributes<HTMLElement> {}

property activityDescription

activityDescription?: React.ReactNode[] | React.ReactNode;

An element describing the activity that took place. If no activityDescription, activityDescriptionText, or onRenderActivityDescription are included, no description of the activity is shown.

property activityDescriptionText

activityDescriptionText?: string;

Text describing the activity that occurred and naming the people involved in it. Deprecated, use activityDescription instead.
Deprecated
Use activityDescription instead.

property activityIcon

activityIcon?: React.ReactNode;

An element containing an icon shown next to the activity item.

property activityPersonas

activityPersonas?: Array<IPersonaSharedProps>;

If activityIcon is not set, then the persona props in this array will be used as the icon for this activity item.

property animateBeaconSignal

animateBeaconSignal?: boolean;

Enables/Disables the beacon that radiates from the center of the center of the activity icon. Signals an activity has started.

property beaconColorOne

beaconColorOne?: string;

Beacon color one

property beaconColorTwo

beaconColorTwo?: string;

Beacon color two

property comments

comments?: React.ReactNode[] | React.ReactNode;

An element containing the text of comments or @mention messages. If no comments, commentText, or onRenderComments are included, no comments are shown.

property commentText

commentText?: string;

Text of comments or @mention messages. Deprecated, use comments instead.
Deprecated
Use comments instead.

property isCompact

isCompact?: boolean;

Indicated if the compact styling should be used.

property onRenderActivityDescription

onRenderActivityDescription?: IRenderFunction<IActivityItemProps>;

A renderer for the description of the current activity.

property onRenderComments

onRenderComments?: IRenderFunction<IActivityItemProps>;

A renderer that adds the text of a comment below the activity description.

property onRenderIcon

onRenderIcon?: IRenderFunction<IActivityItemProps>;

A renderer to create the icon next to the activity item.

property onRenderTimeStamp

onRenderTimeStamp?: IRenderFunction<IActivityItemProps>;

A renderer adds a time stamp. If not included, timeStamp is shown as plain text below the activity.

property styles

styles?: IActivityItemStyles;

Optional styling for the elements within the Activity Item.

property timeStamp

timeStamp?: string | React.ReactNode[] | React.ReactNode;

Element shown as a timestamp on this activity. If not included, no timestamp is shown.

interface IActivityItemStyles

interface IActivityItemStyles {}

property activityContent

activityContent?: IStyle;

Styles applied to the main container of the activity's description.

property activityPersona

activityPersona?: IStyle;

Styles applied to the persona of the user that did this activity.

property activityText

activityText?: IStyle;

Styles applied to the activity's description.

property activityTypeIcon

activityTypeIcon?: IStyle;

Styles applied to the icon indicating the type of the activity. Only shown when personas are unavailable.

property commentText

commentText?: IStyle;

Styles applied to the text of comments.

property doublePersona

doublePersona?: IStyle;

Styles applied to personas when two users are involved in a single activity.

property isCompactContent

isCompactContent?: IStyle;

Styles applied to main text container in the compact variant.

property isCompactIcon

isCompactIcon?: IStyle;

Styles applied to personas and icons in the compact variant.

property isCompactPersona

isCompactPersona?: IStyle;

Styles applied to personas in the compact variant.

property isCompactPersonaContainer

isCompactPersonaContainer?: IStyle;

Styles applied to a wrapper around personas in the compact variant.

property isCompactRoot

isCompactRoot?: IStyle;

Styles applied to root in the compact variant.

property isCompactTimeStamp

isCompactTimeStamp?: IStyle;

Styles applied to the timestamp in compact mode. This can occur if a host overrides the render behavior to force the timestamp to render.

property personaContainer

personaContainer?: IStyle;

Styles applied to the container of the persona image or activity type icon.

property pulsingBeacon

pulsingBeacon?: IStyle;

Styles applied to the root activity item container.

property root

root?: IStyle;

Styles applied to the root activity item container.

property timeStamp

timeStamp?: IStyle;

Styles applied to the timestamp at the end of each activity item.

interface IAnnouncedProps

interface IAnnouncedProps
    extends React.Props<AnnouncedBase>,
        React.HTMLAttributes<HTMLDivElement> {}

property 'aria-live'

'aria-live'?: 'off' | 'polite' | 'assertive';

Priority with which the screen reader should treat updates to this region 'polite'

property as

as?: React.ElementType;

Optionally render the root of this component as another component type or primitive. The custom type **must** preserve any children or native props passed in. 'div'

property message

message?: string;

The status message provided as screen reader output

property styles

styles?: IStyleFunctionOrObject<{}, IAnnouncedStyles>;

Call to provide customized styling that will layer on top of the variant rules.

interface IAnnouncedStyles

interface IAnnouncedStyles {}

property root

root: IStyle;

Style override for the root element.

property screenReaderText

screenReaderText: IStyle;

Style override for the screen reader text.

interface IAutofill

interface IAutofill {}

property cursorLocation

cursorLocation: number | null;

The current index of the cursor in the input area. Returns -1 if the input element is not ready.

property inputElement

inputElement: HTMLInputElement | null;

The current input element.

property isValueSelected

isValueSelected: boolean;

A boolean for whether or not there is a value selected in the input area.

property selectionEnd

selectionEnd: number | null;

the current index of where the selection ends. Returns -1 if the input element is not ready.

property selectionStart

selectionStart: number | null;

The current index of where the selection starts. Returns -1 if the input element is not ready.

property value

value: string;

The current text value that the user has entered.

method clear

clear: () => void;

Clear all text in the input. Sets value to '';

method focus

focus: () => void;

Focus the input element.

interface IAutofillProps

interface IAutofillProps
    extends React.InputHTMLAttributes<HTMLInputElement | Autofill> {}

property componentRef

componentRef?: IRefObject<IAutofill>;

Gets the compoonent ref.

property defaultVisibleValue

defaultVisibleValue?: string;

The default value to be visible. This is different from placeholder because it actually sets the current value of the picker Note: This will only be set upon component creation and will not update with subsequent prop updates.

property enableAutofillOnKeyPress

enableAutofillOnKeyPress?: KeyCodes[];

When the user uses left arrow, right arrow, clicks, or deletes text autofill is disabled Since the user has taken control. It is automatically reenabled when the user enters text and the cursor is at the end of the text in the input box. This specifies other key presses that will reenabled autofill.

property onInputChange

onInputChange?: (value: string, composing: boolean) => string;

A callback used to modify the input string.
Parameter composing
true if the change event was triggered while the inner input was in the middle of a multi-character composition. (for example, jp-hiragana IME input)

property onInputValueChange

onInputValueChange?: (newValue?: string, composing?: boolean) => void;

A callback for when the current input value changes.
Parameter composing
true if the change event was triggered while the inner input was in the middle of a multi-character composition. (for example, jp-hiragana IME input)

property preventValueSelection

preventValueSelection?: boolean;

Should the value of the input be selected? True if we're focused on our input, false otherwise. We need to explicitly not select the text in the autofill if we are no longer focused. In IE11, selecting a input will also focus the input, causing other element's focus to be stolen.

property shouldSelectFullInputValueInComponentDidUpdate

shouldSelectFullInputValueInComponentDidUpdate?: () => boolean;

Handler for checking if the full value of the input should be seleced in componentDidUpdate
Returns
- should the full value of the input be selected?

property suggestedDisplayValue

suggestedDisplayValue?: string;

The suggested autofill value that will display.

property updateValueInWillReceiveProps

updateValueInWillReceiveProps?: () => string | null;

Handler for checking and updating the value if needed in componentWillReceiveProps
Returns
- the updated value to set, if needed

interface IAutofillState

interface IAutofillState {}

property displayValue

displayValue?: string;

interface IBaseAutoFill

interface IBaseAutoFill extends IAutofill {}

Deprecated, do not use.
Deprecated
do not use, will be removed in 6.0

interface IBaseAutoFillProps

interface IBaseAutoFillProps extends IAutofillProps {}

Deprecated, do not use.
Deprecated
do not use, will be removed in 6.0

interface IBaseButtonProps

interface IBaseButtonProps extends IButtonProps {}

property baseClassName

baseClassName?: string;

property variantClassName

variantClassName?: string;

interface IBaseButtonState

interface IBaseButtonState {}

property menuHidden

menuHidden: boolean;

interface IBaseExtendedPicker

interface IBaseExtendedPicker<T> {}

property focus

focus: () => void;

Sets focus to the input.

property forceResolve

forceResolve?: () => void;

Forces the picker to resolve

property items

items: T[] | undefined;

Gets the current value of the input.

interface IBaseExtendedPickerProps

interface IBaseExtendedPickerProps<T> {}

property className

className?: string;

ClassName for the picker.

property componentRef

componentRef?: IRefObject<IBaseExtendedPicker<T>>;

Ref of the component

property currentRenderedQueryString

currentRenderedQueryString?: string;

Current rendered query string that's corealte to current rendered result

property defaultSelectedItems

defaultSelectedItems?: T[];

Initial items that have already been selected and should appear in the people picker.

property disabled

disabled?: boolean;

Flag for disabling the picker.

property floatingPickerProps

floatingPickerProps: IBaseFloatingPickerProps<T>;

Floating picker properties

property focusZoneProps

focusZoneProps?: IFocusZoneProps;

Focus zone props

property headerComponent

headerComponent?: JSX.Element;

Header/title element for the picker

property inputProps

inputProps?: IInputProps;

Autofill input native props

property itemLimit

itemLimit?: number;

Restrict the amount of selectable items.

property onBlur

onBlur?: React.FocusEventHandler<HTMLInputElement | Autofill>;

A callback for when the user moves the focus away from the picker

property onChange

onChange?: (items?: T[]) => void;

A callback for when the selected list of items changes.

property onFocus

onFocus?: React.FocusEventHandler<HTMLInputElement | Autofill>;

A callback for when the user put focus on the picker

property onItemAdded

onItemAdded?: (addedItem: T) => void;

A callback on when an item was added to the selected item list

property onItemSelected

onItemSelected?: (selectedItem?: T) => T | PromiseLike<T>;

A callback to process a selection after the user selects a suggestion from the picker. The returned item will be added to the selected items list

property onItemsRemoved

onItemsRemoved?: (removedItems: T[]) => void;

A callback on when an item or items were removed from the selected item list

property onPaste

onPaste?: (pastedText: string) => T[];

A callback for when text is pasted into the input

property onRenderFloatingPicker

onRenderFloatingPicker: React.ComponentType<IBaseFloatingPickerProps<T>>;

Function that specifies how the floating picker will appear.

property onRenderSelectedItems

onRenderSelectedItems: React.ComponentType<IBaseSelectedItemsListProps<T>>;

Function that specifies how the floating picker will appear.

property selectedItems

selectedItems?: T[];

If using as a controlled component use selectedItems here instead of the SelectedItemsList

property selectedItemsListProps

selectedItemsListProps: IBaseSelectedItemsListProps<T>;

Selected items list properties

property suggestionItems

suggestionItems?: T[];

If using as a controlled component use suggestionItems here instead of FloatingPicker

interface IBaseExtendedPickerState

interface IBaseExtendedPickerState<T> {}

property queryString

queryString: string | null;

property selectedItems

selectedItems: T[] | null;

property suggestionItems

suggestionItems: T[] | null;

interface IBaseFloatingPicker

interface IBaseFloatingPicker {}

property hidePicker

hidePicker: () => void;

Hides the picker

property inputText

inputText: string;

Gets the input text

property isSuggestionsShown

isSuggestionsShown: boolean;

Whether the suggestions are shown

property onQueryStringChanged

onQueryStringChanged: (input: string) => void;

On queryString changed

property showPicker

showPicker: (updateValue?: boolean) => void;

Shows the picker
Parameter updateValue
Optional param to indicate whether to update the query string

property suggestions

suggestions: any[];

Gets the suggestions

interface IBaseFloatingPickerProps

interface IBaseFloatingPickerProps<T> extends React.ClassAttributes<any> {}

property calloutWidth

calloutWidth?: number;

Width for the suggestions callout

property className

className?: string;

ClassName for the picker.

property componentRef

componentRef?: IRefObject<IBaseFloatingPicker>;

property createGenericItem

createGenericItem?: (input: string, isValid: boolean) => ISuggestionModel<T>;

Function that specifies how arbitrary text entered into the well is handled.

property getTextFromItem

getTextFromItem?: (item: T, currentValue?: string) => string;

A callback to get text from an item. Used to autofill text in the pickers.

property inputElement

inputElement?: HTMLInputElement | null;

The input element to listen on events

property onChange

onChange?: (item: T) => void;

A callback for when a suggestion is clicked

property onInputChanged

onInputChanged?: (filter: string) => void;

A callback for when the input has been changed

property onRemoveSuggestion

onRemoveSuggestion?: (item: T) => void;

A callback for when an item is removed from the suggestion list

property onRenderSuggestionsItem

onRenderSuggestionsItem?: (
    props: T,
    itemProps: ISuggestionItemProps<T>
) => JSX.Element;

Function that specifies how an individual suggestion item will appear.

property onResolveSuggestions

onResolveSuggestions: (
    filter: string,
    selectedItems?: T[]
) => T[] | PromiseLike<T[]> | null;

A callback for what should happen when a person types text into the input. Returns the already selected items so the resolver can filter them out. If used in conjunction with resolveDelay this will only kick off after the delay throttle. Return null if using as a controlled component

property onSuggestionsHidden

onSuggestionsHidden?: () => void;

The callback that should be called when the suggestions are hiden

property onSuggestionsShown

onSuggestionsShown?: () => void;

The callback that should be called when the suggestions are shown

property onValidateInput

onValidateInput?: (input: string) => boolean;

A function used to validate if raw text entered into the well can be added

property onZeroQuerySuggestion

onZeroQuerySuggestion?: (selectedItems?: T[]) => T[] | PromiseLike<T[]> | null;

The suggestions to show on zero query, return null if using as a controlled component

property pickerCalloutProps

pickerCalloutProps?: ICalloutProps;

The properties that will get passed to the Callout component.

property pickerSuggestionsProps

pickerSuggestionsProps?: IBaseFloatingPickerSuggestionProps;

The properties that will get passed to the Suggestions component.

property resolveDelay

resolveDelay?: number;

The delay time in ms before resolving suggestions, which is kicked off when input has been changed. e.g. If a second input change happens within the resolveDelay time, the timer will start over. Only until after the timer completes will onResolveSuggestions be called.

property searchingText

searchingText?: ((props: { input: string }) => string) | string;

The text to display while searching for more results in a limited suggestions list

property selectedItems

selectedItems?: T[];

The items that the base picker should currently display as selected. If this is provided then the picker will act as a controlled component.

property showForceResolve

showForceResolve?: () => boolean;

The callback that should be called to see if the force resolve command should be shown

property suggestionItems

suggestionItems?: T[];

If using as a controlled component, the items to show in the suggestion list

property suggestionsStore

suggestionsStore: SuggestionsStore<T>;

The suggestions store

interface IBaseFloatingPickerState

interface IBaseFloatingPickerState {}

property didBind

didBind: boolean;

property queryString

queryString: string;

property suggestionsVisible

suggestionsVisible?: boolean;

interface IBasePicker

interface IBasePicker<T> {}

BasePicker component.

property completeSuggestion

completeSuggestion: (forceComplete?: boolean) => void;

When called, will take the currently selected suggestion and complete it. If called with forceComplete true, it will attempt to force the current suggestion to complete, must provide both createGenericSuggestion, so the text can be turned into an object in the right shape, and onValidateInput, so the object knows if it's correct or not.

property focus

focus: () => void;

Sets focus to the focus zone.

property focusInput

focusInput: () => void;

Set focus to the input

property items

items: T[] | undefined;

Gets the current value of the input.

interface IBasePickerProps

interface IBasePickerProps<T> extends React.Props<any> {}

Type T is the type of the item that is displayed and searched for by the picker. For example, if the picker is displaying persona's then type T could either be of Persona or IPersona props

property ['aria-label']

['aria-label']?: string;

Aria label for the picker component. Will be applied to the element with role="combobox" If it's supplied, the input element with also have aria-labelledby added and point to the element with role=combobox

property className

className?: string;

ClassName for the picker.

property componentRef

componentRef?: IRefObject<IBasePicker<T>>;

Optional callback to access the IBasePicker interface. Use this instead of ref for accessing the public methods and properties of the component.

property createGenericItem

createGenericItem?: (
    input: string,
    ValidationState: ValidationState
) => ISuggestionModel<T> | T;

Function that specifies how arbitrary text entered into the well is handled.

property defaultSelectedItems

defaultSelectedItems?: T[];

Initial items that have already been selected and should appear in the people picker.

property disabled

disabled?: boolean;

Flag for disabling the picker.

property enableSelectedSuggestionAlert

enableSelectedSuggestionAlert?: boolean;

Adds an additional alert for the currently selected suggestion. This prop should be set to true for IE11 and below, as it enables proper screen reader behavior for each suggestion (since aria-activedescendant does not work with IE11). It should not be set for modern browsers (Edge, Chrome).

property getTextFromItem

getTextFromItem?: (item: T, currentValue?: string) => string;

A callback to get text from an item. Used to autofill text in the pickers.

property inputProps

inputProps?: IInputProps;

AutoFill input native props

property itemLimit

itemLimit?: number;

Restrict the amount of selectable items.

property onBlur

onBlur?: React.FocusEventHandler<HTMLInputElement | Autofill>;

A callback for when the user moves the focus away from the picker

property onChange

onChange?: (items?: T[]) => void;

A callback for when the selected list of items changes.

property onDismiss

onDismiss?: (ev?: any, selectedItem?: T) => boolean | void;

A callback to override the default behavior of adding the selected suggestion on dismiss. If it returns true or nothing, the selected item will be added on dismiss. If false, the selected item will not be added on dismiss.

property onEmptyInputFocus

onEmptyInputFocus?: (selectedItems?: T[]) => T[] | PromiseLike<T[]>;

A callback for what should happen when a user clicks within the input area.
Deprecated
Please use onEmptyResolveSuggestions instead, as the suggestions aren't about setting focus as they are about resolving suggestions when there is no input.

property onEmptyResolveSuggestions

onEmptyResolveSuggestions?: (selectedItems?: T[]) => T[] | PromiseLike<T[]>;

A callback for what should happen when suggestions are shown without input provided. Returns the already selected items so the resolver can filter them out. If used in conjunction with resolveDelay this will only kick off after the delay throttle.

property onFocus

onFocus?: React.FocusEventHandler<HTMLInputElement | Autofill>;

A callback for when the user put focus on the picker
Deprecated
Use inputProps.onFocus instead

property onGetMoreResults

onGetMoreResults?: (
    filter: string,
    selectedItems?: T[]
) => T[] | PromiseLike<T[]>;

A callback that gets the rest of the results when a user clicks get more results.

property onInputChange

onInputChange?: (input: string) => string;

A callback used to modify the input string.

property onItemSelected

onItemSelected?: (selectedItem?: T) => T | PromiseLike<T> | null;

A callback to process a selection after the user selects something from the picker. If the callback returns null, the item will not be added to the picker.

property onRemoveSuggestion

onRemoveSuggestion?: (item: T) => void;

A callback for when an item is removed from the suggestion list

property onRenderItem

onRenderItem?: (props: IPickerItemProps<T>) => JSX.Element;

Function that specifies how the selected item will appear.

property onRenderSuggestionsItem

onRenderSuggestionsItem?: (
    props: T,
    itemProps: ISuggestionItemProps<T>
) => JSX.Element;

Function that specifies how an individual suggestion item will appear.

property onResolveSuggestions

onResolveSuggestions: (
    filter: string,
    selectedItems?: T[]
) => T[] | PromiseLike<T[]>;

A callback for what should happen when a person types text into the input. Returns the already selected items so the resolver can filter them out. If used in conjunction with resolveDelay this will only kick off after the delay throttle.

property onValidateInput

onValidateInput?: (input: string) => ValidationState;

A function used to validate if raw text entered into the well can be added into the selected items list

property pickerCalloutProps

pickerCalloutProps?: ICalloutProps;

The properties that will get passed to the Callout component.

property pickerSuggestionsProps

pickerSuggestionsProps?: IBasePickerSuggestionsProps;

The properties that will get passed to the Suggestions component.

property removeButtonAriaLabel

removeButtonAriaLabel?: string;

Aria label for the "X" button in the selected item component.

property resolveDelay

resolveDelay?: number;

The delay time in ms before resolving suggestions, which is kicked off when input has been changed. e.g. If a second input change happens within the resolveDelay time, the timer will start over. Only until after the timer completes will onResolveSuggestions be called.

property searchingText

searchingText?: ((props: { input: string }) => string) | string;

The text to display while searching for more results in a limited suggestions list

property selectedItems

selectedItems?: T[];

The items that the base picker should currently display as selected. If this is provided then the picker will act as a controlled component.

property styles

styles?: IStyleFunctionOrObject<IBasePickerStyleProps, IBasePickerStyles>;

Call to provide customized styling that will layer on top of the variant rules.

property theme

theme?: ITheme;

Theme provided by styled() function.

interface IBasePickerState

interface IBasePickerState {}

property isFocused

isFocused?: boolean;

property isMostRecentlyUsedVisible

isMostRecentlyUsedVisible?: boolean;

property isResultsFooterVisible

isResultsFooterVisible?: boolean;

property isSearching

isSearching?: boolean;

property items

items?: any;

property moreSuggestionsAvailable

moreSuggestionsAvailable?: boolean;

property selectedIndices

selectedIndices?: number[];

property suggestedDisplayValue

suggestedDisplayValue?: string;

property suggestionsLoading

suggestionsLoading?: boolean;

property suggestionsVisible

suggestionsVisible?: boolean;

interface IBasePickerStyles

interface IBasePickerStyles {}

Represents the stylable areas of the control.

property input

input: IStyle;

Refers to the input were to type new selections (picks).

property itemsWrapper

itemsWrapper: IStyle;

Refers to the items already selected (picked).

property root

root: IStyle;

Root element of any picker extending from BasePicker (wraps all the elements).

property screenReaderText

screenReaderText: IStyle;

Refers to helper element used for accessibility tools (hidden from view on screen).

property text

text: IStyle;

Refers to the elements already selected (picked) wrapped by itemsWrapper along with the input to type a new selection.

interface IBasePickerSuggestionsProps

interface IBasePickerSuggestionsProps<T = any>
    extends Pick<
        ISuggestionsProps<T>,
        | 'onRenderNoResultFound'
        | 'suggestionsHeaderText'
        | 'mostRecentlyUsedHeaderText'
        | 'noResultsFoundText'
        | 'className'
        | 'suggestionsClassName'
        | 'suggestionsItemClassName'
        | 'searchForMoreIcon'
        | 'searchForMoreText'
        | 'forceResolveText'
        | 'loadingText'
        | 'searchingText'
        | 'resultsFooterFull'
        | 'resultsFooter'
        | 'resultsMaximumNumber'
        | 'showRemoveButtons'
        | 'suggestionsAvailableAlertText'
        | 'suggestionsContainerAriaLabel'
        | 'showForceResolve'
    > {}

Subset of picker options that may be legally passed through a picker to its internal Suggestions component.

interface IBaseSelectedItemsList

interface IBaseSelectedItemsList<T> {}

property addItems

addItems: (items: T[]) => void;

property items

items: T[] | undefined;

Gets the current value of the input.

interface IBaseSelectedItemsListProps

interface IBaseSelectedItemsListProps<T> extends React.ClassAttributes<any> {}

property canRemoveItem

canRemoveItem?: (item: T) => boolean;

A callback on whether this item can be deleted

property componentRef

componentRef?: IRefObject<IBaseSelectedItemsList<T>>;

property createGenericItem

createGenericItem?: (
    input: string,
    ValidationState: ValidationState
) => ISuggestionModel<T>;

Function that specifies how arbitrary text entered into the well is handled.

property defaultSelectedItems

defaultSelectedItems?: T[];

Initial items that have already been selected and should appear in the people picker.

property onChange

onChange?: (items?: T[]) => void;

A callback for when the selected list of items changes.

property onCopyItems

onCopyItems?: (items: T[]) => string;

A callback for when items are copied

property onItemDeleted

onItemDeleted?: (deletedItem: T) => void;

A callback when an item is deleted
Deprecated
Use onItemsDeleted instead.

property onItemsDeleted

onItemsDeleted?: (deletedItems: T[]) => void;

A callback when and item or items are deleted

property onItemSelected

onItemSelected?: (selectedItem?: T) => T | PromiseLike<T>;

A callback to process a selection after the user selects something from the picker.

property onRenderItem

onRenderItem?: (props: ISelectedItemProps<T>) => JSX.Element;

Function that specifies how the selected item will appear.

property removeButtonAriaLabel

removeButtonAriaLabel?: string;

Aria label for the 'X' button in the selected item component.

property selectedItems

selectedItems?: T[];

The items that the base picker should currently display as selected. If this is provided then the picker will act as a controlled component.

property selection

selection?: Selection;

The selection

interface IBaseSelectedItemsListState

interface IBaseSelectedItemsListState<T = any> {}

property items

items: T[];

interface IBreadcrumb

interface IBreadcrumb {}

method focus

focus: () => void;

Sets focus to the first breadcrumb link.

interface IBreadcrumbData

interface IBreadcrumbData {}

property props

props: IBreadcrumbProps;

property renderedItems

renderedItems: IBreadcrumbItem[];

property renderedOverflowItems

renderedOverflowItems: IBreadcrumbItem[];

interface IBreadcrumbItem

interface IBreadcrumbItem extends React.AllHTMLAttributes<HTMLElement> {}

property as

as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'a';

Optional prop to render the item as a heading of your choice.
You can also use this to force items to render as links instead of buttons (by default, any item with a href renders as a link, and any item without a href renders as a button). This is not generally recommended because it may prevent activating the link using the keyboard.

property href

href?: string;

Url to navigate to when this breadcrumb item is clicked.

property isCurrentItem

isCurrentItem?: boolean;

Whether this is the breadcrumb item the user is currently navigated to. If true, aria-current="page" will be applied to this breadcrumb item.

property key

key: string;

Arbitrary unique string associated with the breadcrumb item.

property onClick

onClick?: (ev?: React.MouseEvent<HTMLElement>, item?: IBreadcrumbItem) => void;

Callback issued when the breadcrumb item is selected.

property onRender

onRender?: IRenderFunction<IBreadcrumbItem>;

A function to render the outer content of the crumb (the link).

property onRenderContent

onRenderContent?: IRenderFunction<IBreadcrumbItem>;

A function to render the inner content of the crumb (the text inside the link).

property role

role?: string;

Optional role for the breadcrumb item (which renders as a button by default)

property text

text: string;

Text to display to the user for the breadcrumb item.

interface IBreadcrumbProps

interface IBreadcrumbProps extends React.HTMLAttributes<HTMLElement> {}

property ariaLabel

ariaLabel?: string;

Aria label for the root element of the breadcrumb (which is a navigation landmark).

property className

className?: string;

Optional class for the root breadcrumb element.

property componentRef

componentRef?: IRefObject<IBreadcrumb>;

Optional callback to access the IBreadcrumb interface. Use this instead of ref for accessing the public methods and properties of the component.

property dividerAs

dividerAs?: IComponentAs<IDividerAsProps>;

Render a custom divider in place of the default chevron >

property focusZoneProps

focusZoneProps?: IFocusZoneProps;

Extra props for the root FocusZone.

property items

items: IBreadcrumbItem[];

Collection of breadcrumbs to render

property maxDisplayedItems

maxDisplayedItems?: number;

The maximum number of breadcrumbs to display before coalescing. If not specified, all breadcrumbs will be rendered.

property onGrowData

onGrowData?: (data: IBreadcrumbData) => IBreadcrumbData | undefined;

Method that determines how to group the length of the breadcrumb. Return undefined to never increase breadcrumb length.

property onReduceData

onReduceData?: (data: IBreadcrumbData) => IBreadcrumbData | undefined;

Method that determines how to reduce the length of the breadcrumb. Return undefined to never reduce breadcrumb length.

property onRenderItem

onRenderItem?: IRenderFunction<IBreadcrumbItem>;

Custom render function to render each crumb. Default renders as a link.

property onRenderItemContent

onRenderItemContent?: IRenderFunction<IBreadcrumbItem>;

Custom render function to render the content within a crumb. Default renders the text.

property onRenderOverflowIcon

onRenderOverflowIcon?: IRenderFunction<IButtonProps>;

Render a custom overflow icon in place of the default icon ...

property overflowAriaLabel

overflowAriaLabel?: string;

Aria label for the overflow button.

property overflowButtonAs

overflowButtonAs?: IComponentAs<IButtonProps>;

Custom component for the overflow button.

property overflowIndex

overflowIndex?: number;

Optional index where overflow items will be collapsed. Defaults to 0.

property styles

styles?: IStyleFunctionOrObject<IBreadcrumbStyleProps, IBreadcrumbStyles>;

property theme

theme?: ITheme;

property tooltipHostProps

tooltipHostProps?: ITooltipHostProps;

Extra props for the TooltipHost which wraps each breadcrumb item.

interface IBreadcrumbStyleProps

interface IBreadcrumbStyleProps {}

property className

className?: string;

property theme

theme: ITheme;

interface IBreadcrumbStyles

interface IBreadcrumbStyles {}

property chevron

chevron: IStyle;

property item

item: IStyle;

property itemLink

itemLink: IStyle;

property list

list: IStyle;

property listItem

listItem: IStyle;

property overflow

overflow: IStyle;

property overflowButton

overflowButton: IStyle;

property root

root: IStyle;

interface IButton

interface IButton {}

property dismissMenu

dismissMenu: () => void;

If there is a menu associated with this button and it is visible, this will dismiss the menu

property focus

focus: () => void;

Sets focus to the button.

property openMenu

openMenu: (
    shouldFocusOnContainer?: boolean,
    shouldFocusOnMount?: boolean
) => void;

If there is a menu associated with this button and it is visible, this will open the menu. Params are optional overrides to the ones defined in menuProps to apply to just this instance of opening the menu.
Parameter shouldFocusOnContainer
override to the ContextualMenu shouldFocusOnContainer prop. BaseButton implementation defaults to 'undefined'.
Parameter shouldFocusOnMount
override to the ContextualMenu shouldFocusOnMount prop. BaseButton implementation defaults to true.

interface IButtonClassNames

interface IButtonClassNames {}

property description

description?: string;

property flexContainer

flexContainer?: string;

property icon

icon?: string;

property label

label?: string;

property menuIcon

menuIcon?: string;

property root

root?: string;

property screenReaderText

screenReaderText?: string;

property textContainer

textContainer?: string;

interface IButtonGrid

interface IButtonGrid {}

interface IButtonGridCellProps

interface IButtonGridCellProps<T> {}

property cellDisabledStyle

cellDisabledStyle?: string[];

Optional, the CSS class used for when the cell is disabled

property cellIsSelectedStyle

cellIsSelectedStyle?: string[];

Optional, the CSS class used for when the cell is selected

property className

className?: string;

Optional, className(s) to apply

property disabled

disabled?: boolean;

Optional, if the this option should be diabled

property getClassNames

getClassNames?: (
    theme: ITheme,
    className: string,
    variantClassName: string,
    iconClassName: string | undefined,
    menuIconClassName: string | undefined,
    disabled: boolean,
    checked: boolean,
    expanded: boolean,
    isSplit: boolean | undefined
) => IButtonClassNames;

Method to provide the classnames to style a button. The default value for this prop is the getClassnames func defined in BaseButton.classnames.

property id

id: string;

Arbitrary unique string associated with this option

property index

index?: number;

Index for this option

property item

item: T;

The option that will be made available to the user

property label

label?: string;

The label for this item. Visible text if this item is a header, tooltip if is this item is normal

property onClick

onClick?: (item: T) => void;

The on click handler

property onFocus

onFocus?: (item: T) => void;

Optional, the onFocus handler

property onHover

onHover?: (item?: T) => void;

Optional, the onHover handler

property onKeyDown

onKeyDown?: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;

Optional, onkeydown handler

property onMouseEnter

onMouseEnter?: (ev: React.MouseEvent<HTMLButtonElement>) => boolean;

Optional, mouseEnter handler.
Returns
true if the event should be processed, false otherwise

property onMouseLeave

onMouseLeave?: (ev: React.MouseEvent<HTMLButtonElement>) => void;

Optional, mouseLeave handler

property onMouseMove

onMouseMove?: (ev: React.MouseEvent<HTMLButtonElement>) => boolean;

Optional, mouseMove handler
Returns
true if the event should be processed, false otherwise

property onRenderItem

onRenderItem: (item: T) => JSX.Element;

The render callback to handle rendering the item

property onWheel

onWheel?: (ev: React.MouseEvent<HTMLButtonElement>) => void;

Optional, onWheel handler

property role

role?: string;

The accessible role for this option

property selected

selected?: boolean;

Optional, if the cell is currently selected

interface IButtonGridProps

interface IButtonGridProps extends React.TableHTMLAttributes<HTMLTableElement> {}

property ariaPosInSet

ariaPosInSet?: number;

Position this ButtonGrid is in the parent set (index in a parent menu, for example)

property ariaSetSize

ariaSetSize?: number;

Size of the parent set (size of parent menu, for example)

property columnCount

columnCount: number;

The number of columns.

property componentRef

componentRef?: IRefObject<IButtonGrid>;

Gets the component ref.

property containerClassName

containerClassName?: string;

Class name for the FocusZone container for the ButtonGrid.
Deprecated
Use styles.focusedContainer to define styling for the focus zone container

property doNotContainWithinFocusZone

doNotContainWithinFocusZone?: boolean;

If false (the default), the ButtonGrid is contained inside a FocusZone. If true, a FocusZone is not used. false

property items

items: any[];

Items to display in a ButtonGrid with the specified number of columns.

property onBlur

onBlur?: () => void;

Handler for when focus leaves the ButtonGrid.

property onRenderItem

onRenderItem: (item: any, index: number) => JSX.Element;

Custom renderer for the individual items.

property positionInSet

positionInSet?: number;

Deprecated
Use ariaPosInSet

property setSize

setSize?: number;

Deprecated
Use ariaSetSize

property shouldFocusCircularNavigate

shouldFocusCircularNavigate?: boolean;

Whether focus should cycle back to the beginning once the user navigates past the end (and vice versa). Only relevant if doNotContainWithinFocusZone is not true.

property styles

styles?: IStyleFunctionOrObject<IButtonGridStyleProps, IButtonGridStyles>;

Optional styles for the component.

property theme

theme?: ITheme;

Theme to apply to the component.

interface IButtonGridStyleProps

interface IButtonGridStyleProps {}

Properties required to build the styles for the ButtonGrid component.

property theme

theme: ITheme;

Theme to apply to the ButtonGrid.

interface IButtonGridStyles

interface IButtonGridStyles {}

Styles for the ButtonGrid Component.

property focusedContainer

focusedContainer?: IStyle;

Style for the FocusZone container for the ButtonGrid.

property root

root: IStyle;

Style for the table container of a ButtonGrid.

property tableCell

tableCell: IStyle;

Style for the table cells of the ButtonGrid.

interface IButtonProps

interface IButtonProps
    extends React.AllHTMLAttributes<
        | HTMLAnchorElement
        | HTMLButtonElement
        | HTMLDivElement
        | BaseButton
        | Button
        | HTMLSpanElement
    > {}

property allowDisabledFocus

allowDisabledFocus?: boolean;

Whether the button can have focus in disabled mode

property ariaDescription

ariaDescription?: string;

Detailed description of the button for the benefit of screen readers.
Besides the compound button, other button types will need more information provided to screen reader.

property ariaHidden

ariaHidden?: boolean;

If provided and is true it adds an 'aria-hidden' attribute instructing screen readers to ignore the element.

property ariaLabel

ariaLabel?: string;

The aria label of the button for the benefit of screen readers.

property buttonType

buttonType?: ButtonType;

Deprecated at v1.2.3, to be removed at >= v2.0.0. Use specific button component instead.
Deprecated
Use specific button component instead.

property checked

checked?: boolean;

Whether the button is checked

property className

className?: string;

If provided, additional class name to provide on the root element.

property componentRef

componentRef?: IRefObject<IButton>;

Optional callback to access the IButton interface. Use this instead of ref for accessing the public methods and properties of the component.

property data

data?: any;

Any custom data the developer wishes to associate with the menu item.

property defaultRender

defaultRender?: any;

yet unknown docs

property description

description?: IStyle;

Style for the description text if applicable (for compound buttons.) Deprecated, use secondaryText instead.
Deprecated
Use secondaryText instead.

property disabled

disabled?: boolean;

Whether the button is disabled

property elementRef

elementRef?: React.Ref<HTMLElement>;

Optional callback to access the root DOM element.
Deprecated
Temporary solution which will be replaced with ref in the V8 release.

property getClassNames

getClassNames?: (
    theme: ITheme,
    className: string,
    variantClassName: string,
    iconClassName: string | undefined,
    menuIconClassName: string | undefined,
    disabled: boolean,
    checked: boolean,
    expanded: boolean,
    hasMenu: boolean,
    isSplit: boolean | undefined,
    allowDisabledFocus: boolean
) => IButtonClassNames;

Method to provide the classnames to style a button. The default value for this prop is the getClassnames func defined in BaseButton.classnames.

property getSplitButtonClassNames

getSplitButtonClassNames?: (
    disabled: boolean,
    expanded: boolean,
    checked: boolean,
    allowDisabledFocus: boolean
) => ISplitButtonClassNames;

Method to provide the classnames to style a button. The default value for this prop is the getClassnames func defined in BaseButton.classnames.

property href

href?: string;

If provided, this component will be rendered as an anchor.

property iconProps

iconProps?: IIconProps;

The props for the icon shown in the button.

property keytipProps

keytipProps?: IKeytipProps;

Optional keytip for this button

property menuAs

menuAs?: IComponentAs<IContextualMenuProps>;

Render a custom menu in place of the normal one.

property menuIconProps

menuIconProps?: IIconProps;

The props for the icon shown when providing a menu dropdown.

property menuProps

menuProps?: IContextualMenuProps;

Props for button menu. Providing this will default to showing the menu icon. See menuIconProps for overriding how the default icon looks. Providing this in addition of onClick and setting the split property to true will render a SplitButton.

property menuTriggerKeyCode

menuTriggerKeyCode?: KeyCodes | null;

Provides a custom KeyCode that can be used to open the button menu. The default KeyCode is the down arrow. A value of null can be provided to disable the key codes for opening the button menu.

property onAfterMenuDismiss

onAfterMenuDismiss?: () => void;

Callback that runs after Button's contextual menu was closed (removed from the DOM)

property onMenuClick

onMenuClick?: (
    ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
    button?: IButtonProps
) => void;

Optional callback when menu is clicked.

property onRenderAriaDescription

onRenderAriaDescription?: IRenderFunction<IButtonProps>;

Custom render function for the aria description element.

property onRenderChildren

onRenderChildren?: IRenderFunction<IButtonProps>;

Custom render function for rendering the button children.

property onRenderDescription

onRenderDescription?: IRenderFunction<IButtonProps>;

Custom render function for the desciption text.

property onRenderIcon

onRenderIcon?: IRenderFunction<IButtonProps>;

Custom render function for the icon

property onRenderMenu

onRenderMenu?: IRenderFunction<IContextualMenuProps>;

Deprecated at v6.3.2, to be removed at >= v7.0.0. Use menuAs instead.
Deprecated
Use menuAs instead.

property onRenderMenuIcon

onRenderMenuIcon?: IRenderFunction<IButtonProps>;

Custom render function for button menu icon

property onRenderText

onRenderText?: IRenderFunction<IButtonProps>;

Custom render function for the label text.

property persistMenu

persistMenu?: boolean;

Menu will not be created or destroyed when opened or closed, instead it will be hidden. This will improve perf of the menu opening but could potentially impact overall perf by having more elements in the dom. Should only be used when perf is important. Note: This may increase the amount of time it takes for the button itself to mount.

property primary

primary?: boolean;

Changes the visual presentation of the button to be emphasized (if defined)

property primaryActionButtonProps

primaryActionButtonProps?: IButtonProps;

Optional props to be applied only to the primary action button of SplitButton and not to the overall SplitButton container

property primaryDisabled

primaryDisabled?: boolean;

If set to true and if this is a splitButton (split == true) then the primary action of a split button is disabled.

property renderPersistedMenuHiddenOnMount

renderPersistedMenuHiddenOnMount?: boolean;

If true, the persisted menu is rendered hidden when the button initially mounts. Non-persisted menus will not be in the component tree unless they are being shown
Note: This increases the time the button will take to mount, but can improve perceived menu open perf. when the user opens the menu.
Deprecated
There is known bug in Edge when this prop is true where scrollbars overlap with the content when a menu is first rendered hidden. See: https://github.com/microsoft/fluentui/issues/9034 Please do not start using this. If you are already using this, please make sure that you are doing so only in non-Edge browsers

property rootProps

rootProps?:
    | React.ButtonHTMLAttributes<HTMLButtonElement>
    | React.AnchorHTMLAttributes<HTMLAnchorElement>;

Deprecated at v0.56.2, to be removed at >= v1.0.0. Just pass in button props instead. they will be mixed into the button/anchor element rendered by the component.
Deprecated
Use button props instead.

property secondaryText

secondaryText?: string;

Description of the action this button takes. Only used for compound buttons

property split

split?: boolean;

If set to true, and if menuProps and onClick are provided, the button will render as a SplitButton.

property splitButtonAriaLabel

splitButtonAriaLabel?: string;

Accessible label for the dropdown chevron button if this button is split.

property splitButtonMenuProps

splitButtonMenuProps?: IButtonProps;

Experimental prop that get passed into the menuButton that's rendered as part of split button. Anything passed in will likely need to have accompanying style changes.

property styles

styles?: IButtonStyles;

Custom styling for individual elements within the button DOM.

property text

text?: string;

Text to render button label. If text is supplied, it will override any string in button children. Other children components will be passed through after the text.

property theme

theme?: ITheme;

Theme provided by HOC.

property toggle

toggle?: boolean;

Whether button is a toggle button with distinct on and off states. This should be true for buttons that permanently change state when a press event finishes, such as a volume mute button.

property toggled

toggled?: boolean;

Any custom data the developer wishes to associate with the menu item. Deprecated, use checked if setting state.
Deprecated
unused, use checked if setting state.

property uniqueId

uniqueId?: string | number;

Unique id to identify the item. Typically a duplicate of key value.

interface IButtonStyles

interface IButtonStyles {}

property description

description?: IStyle;

Style for the description text if applicable (for compound buttons.)

property descriptionChecked

descriptionChecked?: IStyle;

Style override for the description text when the button is checked.

property descriptionDisabled

descriptionDisabled?: IStyle;

Style override for the description text when the button is disabled.

property descriptionHovered

descriptionHovered?: IStyle;

Style override for the description text when the button is hovered.

property descriptionPressed

descriptionPressed?: IStyle;

Style for the description text when the button is pressed.

property flexContainer

flexContainer?: IStyle;

Style for the flexbox container within the root element.

property icon

icon?: IStyle;

Style for the icon on the near side of the label.

property iconChecked

iconChecked?: IStyle;

Style override for the icon when the button is checked.

property iconDisabled

iconDisabled?: IStyle;

Style override for the icon when the button is disabled.

property iconExpanded

iconExpanded?: IStyle;

Style for the icon on the near side of the label when expanded.

property iconExpandedHovered

iconExpandedHovered?: IStyle;

Style for the icon on the near side of the label when expanded and hovered.

property iconHovered

iconHovered?: IStyle;

Style for the icon on the near side of the label on hover.

property iconPressed

iconPressed?: IStyle;

Style for the icon on the near side of the label when pressed.

property label

label?: IStyle;

Style for the text content of the button.

property labelChecked

labelChecked?: IStyle;

Style override for the text content when the button is checked.

property labelDisabled

labelDisabled?: IStyle;

Style override for the text content when the button is disabled.

property labelHovered

labelHovered?: IStyle;

Style override for the text content when the button is hovered.

property menuIcon

menuIcon?: IStyle;

Style for the menu chevron.

property menuIconChecked

menuIconChecked?: IStyle;

Style override for the menu chevron when the button is checked.

property menuIconDisabled

menuIconDisabled?: IStyle;

Style override for the menu chevron when the button is disabled.

property menuIconExpanded

menuIconExpanded?: IStyle;

Style for the menu chevron when expanded.

property menuIconExpandedHovered

menuIconExpandedHovered?: IStyle;

Style for the menu chevron when expanded and hovered.

property menuIconHovered

menuIconHovered?: IStyle;

Style for the menu chevron on hover.

property menuIconPressed

menuIconPressed?: IStyle;

Style for the menu chevron when pressed.

property root

root?: IStyle;

Style for the root element in the default enabled, non-toggled state.

property rootChecked

rootChecked?: IStyle;

Style override for the root element in a checked state, layered on top of the root style.

property rootCheckedDisabled

rootCheckedDisabled?: IStyle;

Style override applied to the root on hover in a checked, disabled state

property rootCheckedHovered

rootCheckedHovered?: IStyle;

Style override applied to the root on hover in a checked, enabled state

property rootCheckedPressed

rootCheckedPressed?: IStyle;

Style override applied to the root on pressed in a checked, enabled state

property rootDisabled

rootDisabled?: IStyle;

Style override for the root element in a disabled state, layered on top of the root style.

property rootExpanded

rootExpanded?: IStyle;

Style override applied to the root on when menu is expanded in the default, enabled, non-toggled state.

property rootExpandedHovered

rootExpandedHovered?: IStyle;

Style override applied to the root on hover in a expanded state on hover

property rootFocused

rootFocused?: IStyle;

Style override applied to the root on focus in the default, enabled, non-toggled state.

property rootHasMenu

rootHasMenu?: IStyle;

Style override for the root element when it has a menu button, layered on top of the root style.

property rootHovered

rootHovered?: IStyle;

Style override applied to the root on hover in the default, enabled, non-toggled state.

property rootPressed

rootPressed?: IStyle;

Style override applied to the root on pressed in the default, enabled, non-toggled state.

property screenReaderText

screenReaderText?: IStyle;

Style override for the screen reader text.

property secondaryText

secondaryText?: IStyle;

Style for the description text if applicable (for compound buttons.)

property splitButtonContainer

splitButtonContainer?: IStyle;

Style override for the container div around a SplitButton element

property splitButtonContainerChecked

splitButtonContainerChecked?: IStyle;

Style for container div around a SplitButton element when the button is checked.

property splitButtonContainerCheckedHovered

splitButtonContainerCheckedHovered?: IStyle;

Style for container div around a SplitButton element when the button is checked and hovered.

property splitButtonContainerDisabled

splitButtonContainerDisabled?: IStyle;

Style override for the container div around a SplitButton element in a disabled state

property splitButtonContainerFocused

splitButtonContainerFocused?: IStyle;

Style for container div around a SplitButton element when the button is focused.

property splitButtonContainerHovered

splitButtonContainerHovered?: IStyle;

Style for container div around a SplitButton element when the button is hovered.

property splitButtonDivider

splitButtonDivider?: IStyle;

Style override for the divider element that appears between the button and menu button for a split button.

property splitButtonDividerDisabled

splitButtonDividerDisabled?: IStyle;

Style override for the divider element that appears between the button and menu button for a split button in a disabled state.

property splitButtonFlexContainer

splitButtonFlexContainer?: IStyle;

Style override for the SplitButton FlexContainer.

property splitButtonMenuButton

splitButtonMenuButton?: IStyle;

Style override for the SplitButton menu button

property splitButtonMenuButtonChecked

splitButtonMenuButtonChecked?: IStyle;

Style override for the SplitButton menu button element in a checked state

property splitButtonMenuButtonDisabled

splitButtonMenuButtonDisabled?: IStyle;

Style override for the SplitButton menu button element in a disabled state.

property splitButtonMenuButtonExpanded

splitButtonMenuButtonExpanded?: IStyle;

Style override for the SplitButton menu button element in an expanded state

property splitButtonMenuFocused

splitButtonMenuFocused?: IStyle;

Style override for the SplitButton when only primaryButton is in a disabled state

property splitButtonMenuIcon

splitButtonMenuIcon?: IStyle;

Style override for the SplitButton menu icon element

property splitButtonMenuIconDisabled

splitButtonMenuIconDisabled?: IStyle;

Style override for the SplitButton menu icon element in a disabled state

property textContainer

textContainer?: IStyle;

Style for the text container within the flexbox container element (and contains the text and description).

interface ICalendar

interface ICalendar {}

property focus

focus: () => void;

Sets focus to the selected date.

interface ICalendarFormatDateCallbacks

interface ICalendarFormatDateCallbacks {}

property formatDay

formatDay: (date: Date) => string;

Callback to apply formatting to the days in the Day Picker calendar

property formatMonthDayYear

formatMonthDayYear: (date: Date, strings?: ICalendarStrings) => string;

Callback to apply formatting to mmmm d, yyyy formated dates

property formatMonthYear

formatMonthYear: (date: Date, strings?: ICalendarStrings) => string;

Callback to apply formatting to the month and year in the Day Picker header

property formatYear

formatYear: (date: Date) => string;

Callback to apply formatting to the year in the Month Picker header

interface ICalendarIconStrings

interface ICalendarIconStrings {}

property closeIcon

closeIcon?: string;

Close icon

property leftNavigation

leftNavigation?: string;

FabricMDL2Icons name for the left navigation icon. Previous default: ChevronLeft.

property rightNavigation

rightNavigation?: string;

FabricMDL2Icons name for the right navigation icon. Previous default: ChevronRight.

interface ICalendarProps

interface ICalendarProps
    extends IBaseProps<ICalendar>,
        React.HTMLAttributes<HTMLElement> {}

property allFocusable

allFocusable?: boolean;

Allows all dates and buttons to be focused, including disabled ones

property autoNavigateOnSelection

autoNavigateOnSelection?: boolean;

Whether the month view should automatically navigate to the next or previous date range depending on the selected date. If this property is set to true and the currently displayed month is March 2017, if the user clicks on a day outside the month, i.e., April 1st, the picker will automatically navigate to the month of April.

property className

className?: string;

Optional class name to add to the root element.

property componentRef

componentRef?: IRefObject<ICalendar>;

Optional callback to access the ICalendar interface. Use this instead of ref for accessing the public methods and properties of the component.

property dateRangeType

dateRangeType?: DateRangeType;

The date range type indicating how many days should be selected as the user selects days

property dateTimeFormatter

dateTimeFormatter?: ICalendarFormatDateCallbacks;

Apply additional formating to dates, for example localized date formatting.

property firstDayOfWeek

firstDayOfWeek?: DayOfWeek;

The first day of the week for your locale.

property firstWeekOfYear

firstWeekOfYear?: FirstWeekOfYear;

Defines when the first week of the year should start, FirstWeekOfYear.FirstDay, FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values

property highlightCurrentMonth

highlightCurrentMonth?: boolean;

Whether the month picker should highlight the current month

property highlightSelectedMonth

highlightSelectedMonth?: boolean;

Whether the month picker should highlight the selected month

property isDayPickerVisible

isDayPickerVisible?: boolean;

Whether the day picker is shown beside the month picker or hidden.

property isMonthPickerVisible

isMonthPickerVisible?: boolean;

Whether the month picker is shown beside the day picker or hidden.

property maxDate

maxDate?: Date;

If set the Calendar will not allow navigation to or selection of a date later than this value.

property minDate

minDate?: Date;

If set the Calendar will not allow navigation to or selection of a date earlier than this value.

property navigationIcons

navigationIcons?: ICalendarIconStrings;

Customize navigation icons using ICalendarIconStrings

property onDismiss

onDismiss?: () => void;

Callback issued when calendar is closed

property onSelectDate

onSelectDate?: (date: Date, selectedDateRangeArray?: Date[]) => void;

Callback issued when a date is selected
Parameter date
The date the user selected
Parameter selectedDateRangeArray
The resultant list of dates that are selected based on the date range type set for the component.

property restrictedDates

restrictedDates?: Date[];

If set the Calendar will not allow selection of dates in this array.

property selectDateOnClick

selectDateOnClick?: boolean;

When clicking on "Today", select the date and close the calendar.

property shouldFocusOnMount

shouldFocusOnMount?: boolean;

This property has been removed at 0.80.0 in place of the focus method, to be removed @ 1.0.0.
Deprecated
Replaced with the focus method.

property showCloseButton

showCloseButton?: boolean;

Whether the close button should be shown or not

property showGoToToday

showGoToToday?: boolean;

Whether the "Go to today" link should be shown or not

property showMonthPickerAsOverlay

showMonthPickerAsOverlay?: boolean;

Show month picker on top of date picker when visible.

property showSixWeeksByDefault

showSixWeeksByDefault?: boolean;

Whether the calendar should show 6 weeks by default.

property showWeekNumbers

showWeekNumbers?: boolean;

Whether the calendar should show the week number (weeks 1 to 53) before each week row

property strings

strings: ICalendarStrings | null;

Localized strings to use in the Calendar

property today

today?: Date;

Value of today. If null, current time in client machine will be used.

property value

value?: Date;

Default value of the Calendar, if any

property workWeekDays

workWeekDays?: DayOfWeek[];

The days that are selectable when dateRangeType is WorkWeek. If dateRangeType is not WorkWeek this property does nothing.

property yearPickerHidden

yearPickerHidden?: boolean;

Whether the year picker is enabled

interface ICalendarState

interface ICalendarState {}

property isDayPickerVisible

isDayPickerVisible?: boolean;

State used to show/hide day picker

property isMonthPickerVisible

isMonthPickerVisible?: boolean;

State used to show/hide month picker

property navigatedDayDate

navigatedDayDate?: Date;

The currently focused date in the day picker, but not necessarily selected

property navigatedMonthDate

navigatedMonthDate?: Date;

The currently focused date in the month picker, but not necessarily selected

property selectedDate

selectedDate?: Date;

The currently selected date in the calendar

interface ICalendarStrings

interface ICalendarStrings {}

property closeButtonAriaLabel

closeButtonAriaLabel?: string;

Aria-label for the "close" button.

property days

days: string[];

An array of strings for the full names of days of the week. The array is 0-based, so days[0] should be the full name of Sunday.

property goToToday

goToToday: string;

String to render for button to direct the user to today's date.

property monthPickerHeaderAriaLabel

monthPickerHeaderAriaLabel?: string;

Aria-label format string for the header button in the month picker. Should have 1 string param, e.g. "{0}, select to change the year". This aria-label will only be applied if the year picker is enabled; otherwise the label will default to the header string, e.g. "2019".

property months

months: string[];

An array of strings for the full names of months. The array is 0-based, so months[0] should be the full name of January.

property nextMonthAriaLabel

nextMonthAriaLabel?: string;

Aria-label for the "next month" button.

property nextYearAriaLabel

nextYearAriaLabel?: string;

Aria-label for the "next year" button.

property nextYearRangeAriaLabel

nextYearRangeAriaLabel?: string;

Aria-label for the "next year range" button.

property prevMonthAriaLabel

prevMonthAriaLabel?: string;

Aria-label for the "previous month" button.

property prevYearAriaLabel

prevYearAriaLabel?: string;

Aria-label for the "previous year" button.

property prevYearRangeAriaLabel

prevYearRangeAriaLabel?: string;

Aria-label for the "previous year range" button.

property shortDays

shortDays: string[];

An array of strings for the initials of the days of the week. The array is 0-based, so days[0] should be the initial of Sunday.

property shortMonths

shortMonths: string[];

An array of strings for the short names of months. The array is 0-based, so shortMonths[0] should be the short name of January.

property weekNumberFormatString

weekNumberFormatString?: string;

Aria-label format string for the week number header. Should have 1 string param e.g. "week number {0}"

property yearPickerHeaderAriaLabel

yearPickerHeaderAriaLabel?: string;

Aria-label format string for the header button in the year picker. Should have 1 string param, e.g. "{0}, select to change the month"

interface ICalloutBeakPositionedInfo

interface ICalloutBeakPositionedInfo extends IPositionedData {}

property closestEdge

closestEdge: RectangleEdge;

interface ICalloutContentStyleProps

interface ICalloutContentStyleProps {}

property backgroundColor

backgroundColor?: string;

Background color for the beak and callout.

property beakWidth

beakWidth?: number;

Width of Callout beak

property calloutMaxWidth

calloutMaxWidth?: number;

Max width for callout including borders.

property calloutMinWidth

calloutMinWidth?: number;

Min width for callout including borders.

property calloutWidth

calloutWidth?: number;

Width for callout including borders.

property className

className?: string;

CSS class to apply to the callout.

property overflowYHidden

overflowYHidden?: boolean;

Whether or not to clip content of the callout, if it overflows vertically.

property positions

positions?: ICalloutPositionedInfo;

Callout positioning data

property theme

theme: ITheme;

Theme to apply to the calloutContent.

interface ICalloutContentStyles

interface ICalloutContentStyles {}

property beak

beak: IStyle;

Style for callout beak.

property beakCurtain

beakCurtain: IStyle;

Style for callout beak curtain.

property calloutMain

calloutMain: IStyle;

Style for content component of the callout.

property container

container: IStyle;

Style for wrapper of Callout component.

property root

root: IStyle;

Style for callout container root element.

interface ICalloutPositionedInfo

interface ICalloutPositionedInfo extends IPositionedData {}

property beakPosition

beakPosition: ICalloutBeakPositionedInfo;

interface ICalloutPositionProps

interface ICalloutPositionProps extends IPositionProps {}

property beakWidth

beakWidth?: number;

The width of the beak.

property isBeakVisible

isBeakVisible?: boolean;

Whether or not the beak is visible

interface ICalloutProps

interface ICalloutProps extends React.HTMLAttributes<HTMLDivElement> {}

property alignTargetEdge

alignTargetEdge?: boolean;

If true the positioning logic will prefer to flip edges rather than to nudge the rectangle to fit within bounds, thus making sure the element aligns perfectly with target's alignment edge

property ariaDescribedBy

ariaDescribedBy?: string;

Defines the element id referencing the element containing the description for the callout.

property ariaLabel

ariaLabel?: string;

Accessible label text for callout.

property ariaLabelledBy

ariaLabelledBy?: string;

Defines the element id referencing the element containing label text for callout.

property backgroundColor

backgroundColor?: string;

The background color of the Callout in hex format ie. #ffffff.

property beakWidth

beakWidth?: number;

The width of the beak.

property bounds

bounds?:
    | IRectangle
    | ((target?: Target, targetWindow?: Window) => IRectangle | undefined);

The bounding rectangle (or callback that returns a rectangle) for which the contextual menu can appear in.

property calloutMaxHeight

calloutMaxHeight?: number;

Set max height of callout When not set the callout will expand with contents up to the bottom of the screen

property calloutMaxWidth

calloutMaxWidth?: number;

Maximum width for callout including borders. If value is 0, no width is applied.

property calloutMinWidth

calloutMinWidth?: number;

Minimum width for callout including borders. If value is 0, no width is applied.

property calloutWidth

calloutWidth?: number;

Custom width for callout including borders. If value is 0, no width is applied.

property className

className?: string;

CSS class to apply to the callout.

property coverTarget

coverTarget?: boolean;

If true the position returned will have the menu element cover the target. If false then it will position next to the target;

property directionalHint

directionalHint?: DirectionalHint;

How the element should be positioned

property directionalHintFixed

directionalHintFixed?: boolean;

If true the position will not change sides in an attempt to fit the callout within bounds. It will still attempt to align it to whatever bounds are given.

property directionalHintForRTL

directionalHintForRTL?: DirectionalHint;

How the element should be positioned in RTL layouts. If not specified, a mirror of the directionalHint alignment edge will be used instead. This means that DirectionalHint.BottomLeft will change to DirectionalHint.BottomRight but DirectionalHint.LeftAuto will not change.

property dismissOnTargetClick

dismissOnTargetClick?: boolean;

If true then the callout will dismiss when the target element is clicked

property doNotLayer

doNotLayer?: boolean;

If true do not render on a new layer. If false render on a new layer.

property finalHeight

finalHeight?: number;

Specify the final height of the content. To be used when expanding the content dynamically so that callout can adjust its position.

property gapSpace

gapSpace?: number;

The gap between the Callout and the target

property hidden

hidden?: boolean;

If specified, renders the Callout in a hidden state. Use this flag, rather than rendering a callout conditionally based on visibility, to improve rendering performance when it becomes visible. Note: When callout is hidden its content will not be rendered. It will only render once the callout is visible.

property hideOverflow

hideOverflow?: boolean;

Manually set OverflowYHidden style prop to true on calloutMain element A variety of callout load animations will need this to hide the scollbar that can appear

property isBeakVisible

isBeakVisible?: boolean;

If true then the beak is visible. If false it will not be shown.

property layerProps

layerProps?: ILayerProps;

Optional props to pass to the Layer component hosting the panel.

property minPagePadding

minPagePadding?: number;

The minimum distance the callout will be away from the edge of the screen.

property onDismiss

onDismiss?: (ev?: any) => void;

Callback when the Callout tries to close.

property onLayerMounted

onLayerMounted?: () => void;

Optional callback when the layer content has mounted.

property onPositioned

onPositioned?: (positions?: ICalloutPositionedInfo) => void;

Optional callback that is called once the callout has been correctly positioned.
Parameter positions
Gives the user information about how the callout is positioned such as the final edge of the target that it positioned against, the beak position, and the beaks relationship to the edges of the callout.

property onRestoreFocus

onRestoreFocus?: (options: {
    originalElement?: HTMLElement | Window;
    containsFocus: boolean;
    documentContainsFocus: boolean;
}) => void;

Called when the component is unmounting, and focus needs to be restored. Argument passed down contains two variables, the element that the underlying popup believes focus should go to * and whether or not the popup currently contains focus. If this is provided, focus will not be restored automatically, you'll need to call originalElement.focus()

property onScroll

onScroll?: () => void;

Callback when the Callout body is scrolled.

property popupProps

popupProps?: IPopupProps;

Optional props to pass the Popup component that the callout uses.

property preventDismissOnEvent

preventDismissOnEvent?: (
    ev: Event | React.FocusEvent | React.KeyboardEvent | React.MouseEvent
) => boolean;

If defined, then takes priority over preventDismissOnLostFocus, preventDismissOnResize, and preventDismissOnScroll. If it returns true, then callout will not dismiss for this event. If not defined or returns false, callout can dismiss for this event.

property preventDismissOnLostFocus

preventDismissOnLostFocus?: boolean;

If true then the callout will not dismiss when it loses focus
Deprecated
use preventDismissOnEvent callback instead

property preventDismissOnResize

preventDismissOnResize?: boolean;

If true then the callout will not dismiss on resize
Deprecated
use preventDismissOnEvent callback instead

property preventDismissOnScroll

preventDismissOnScroll?: boolean;

If true then the callout will not dismiss on scroll
Deprecated
use preventDismissOnEvent callback instead

property role

role?: string;

Aria role assigned to the callout (Eg. dialog, alertdialog).

property setInitialFocus

setInitialFocus?: boolean;

If true then the callout will attempt to focus the first focusable element that it contains. If it doesn't find an element, no focus will be set and the method will return false. This means that it's the contents responsibility to either set focus or have focusable items.
Returns
True if focus was set, false if it was not.

property shouldDismissOnWindowFocus

shouldDismissOnWindowFocus?: boolean;

If true then the callout will dismiss when the window gets focus

property shouldRestoreFocus

shouldRestoreFocus?: boolean;

If true, when this component is unmounted, focus will be restored to the element that had focus when the component first mounted.
Deprecated
use onRestoreFocus callback instead

property shouldUpdateWhenHidden

shouldUpdateWhenHidden?: boolean;

If true, the component will be updated even when hidden=true. Note that this would consume resources to update even though nothing is being shown to the user. This might be helpful though if your updates are small and you want the callout to be revealed fast to the user when hidden is set to false.

property style

style?: React.CSSProperties;

CSS style to apply to the callout.
If you set overflowY in this object, it provides a performance optimization by preventing Popup (underlying component of Callout) from calculating whether it needs a scroll bar.

property styles

styles?: IStyleFunctionOrObject<
    ICalloutContentStyleProps,
    ICalloutContentStyles
>;

Optional styles for the component.

property target

target?: Target;

The target that the Callout should try to position itself based on. It can be either an Element a querySelector string of a valid Element or a MouseEvent. If MouseEvent is given then the origin point of the event will be used.

property theme

theme?: ITheme;

Optional theme for component

interface ICalloutState

interface ICalloutState {}

property calloutElementRect

calloutElementRect?: ClientRect;

property heightOffset

heightOffset?: number;

property positions

positions?: ICalloutPositionedInfo;

property slideDirectionalClassName

slideDirectionalClassName?: string;

interface ICellStyleProps

interface ICellStyleProps {}

property cellExtraRightPadding

cellExtraRightPadding: number;

property cellLeftPadding

cellLeftPadding: number;

property cellRightPadding

cellRightPadding: number;

interface ICheckbox

interface ICheckbox {}

Checkbox class interface.

property checked

checked: boolean;

Gets the current checked state.

property focus

focus: () => void;

Sets focus to the checkbox.

property indeterminate

indeterminate: boolean;

Gets the current indeterminate state.

interface ICheckboxProps

interface ICheckboxProps
    extends React.ButtonHTMLAttributes<HTMLElement | HTMLInputElement> {}

Checkbox properties.

property ariaDescribedBy

ariaDescribedBy?: string;

ID for element that provides extended information for the checkbox.

property ariaLabel

ariaLabel?: string;

Accessible label for the checkbox.

property ariaLabelledBy

ariaLabelledBy?: string;

ID for element that contains label information for the checkbox.

property ariaPositionInSet

ariaPositionInSet?: number;

The position in the parent set (if in a set) for aria-posinset.

property ariaSetSize

ariaSetSize?: number;

The total size of the parent set (if in a set) for aria-setsize.

property boxSide

boxSide?: 'start' | 'end';

Allows you to set the checkbox to be at the before (start) or after (end) the label.

property checked

checked?: boolean;

Checked state. Mutually exclusive to "defaultChecked". Use this if you control the checked state at a higher level and plan to pass in the correct value based on handling onChange events and re-rendering.

property checkmarkIconProps

checkmarkIconProps?: IIconProps;

Custom icon props for the check mark rendered by the checkbox

property className

className?: string;

Additional class name to provide on the root element, in addition to the ms-Checkbox class.

property componentRef

componentRef?: IRefObject<ICheckbox>;

Optional callback to access the ICheckbox interface. Use this instead of ref for accessing the public methods and properties of the component.

property defaultChecked

defaultChecked?: boolean;

Default checked state. Mutually exclusive to "checked". Use this if you want an uncontrolled component, and want the Checkbox instance to maintain its own state.

property defaultIndeterminate

defaultIndeterminate?: boolean;

Optional uncontrolled indeterminate visual state for checkbox. Setting indeterminate state takes visual precedence over checked or defaultChecked props given but does not affect checked state. This is not a toggleable state. On load the checkbox will receive indeterminate visual state and after the user's first click it will be removed exposing the true state of the checkbox.

property disabled

disabled?: boolean;

Disabled state of the checkbox.

property indeterminate

indeterminate?: boolean;

Optional controlled indeterminate visual state for checkbox. Setting indeterminate state takes visual precedence over checked or defaultChecked props given but does not affect checked state. This should not be a toggleable state. On load the checkbox will receive indeterminate visual state and after the first user click it should be removed by your supplied onChange callback function exposing the true state of the checkbox.

property inputProps

inputProps?: React.ButtonHTMLAttributes<HTMLElement | HTMLButtonElement>;

Optional input props that will be mixed into the input element, *before* other props are applied. This allows you to extend the input element with additional attributes, such as data-automation-id needed for automation. Note that if you provide, for example, "disabled" as well as "inputProps.disabled", the former will take precedence over the later.

property keytipProps

keytipProps?: IKeytipProps;

Optional keytip for this checkbox

property label

label?: string;

Label to display next to the checkbox.

property onChange

onChange?: (
    ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
    checked?: boolean
) => void;

Callback that is called when the checked value has changed.

property onRenderLabel

onRenderLabel?: IRenderFunction<ICheckboxProps>;

Custom render function for the label.

property styles

styles?: IStyleFunctionOrObject<ICheckboxStyleProps, ICheckboxStyles>;

Call to provide customized styling that will layer on top of the variant rules.

property theme

theme?: ITheme;

Theme provided by HOC.

interface ICheckboxState

interface ICheckboxState {}

property isChecked

isChecked?: boolean;

Is true when Uncontrolled control is checked.

property isIndeterminate

isIndeterminate?: boolean;

interface ICheckboxStyleProps

interface ICheckboxStyleProps {}

property checked

checked?: boolean;

property className

className?: string;

property disabled

disabled?: boolean;

property indeterminate

indeterminate?: boolean;

property isUsingCustomLabelRender

isUsingCustomLabelRender: boolean;

property reversed

reversed?: boolean;

property theme

theme: ITheme;

interface ICheckboxStyles

interface ICheckboxStyles {}

property checkbox

checkbox?: IStyle;

Style for checkbox in its default unchecked/enabled state.

property checkmark

checkmark?: IStyle;

Style for the checkmark in the default enabled/unchecked state.

property input

input?: IStyle;

INTERNAL: This is mostly an internal implementation detail which you should avoid styling. This refers to the element that is typically hidden and not rendered on screen.

property label

label?: IStyle;

Style for the label part (contains the customized checkbox + text) when enabled.

property root

root?: IStyle;

Style for the root element (a button) of the checkbox component in the default enabled/unchecked state.

property text

text?: IStyle;

Style for text appearing with the checkbox in its default enabled state.

interface ICheckProps

interface ICheckProps {}

property alwaysShowCheck

alwaysShowCheck?: boolean;

Deprecated
Not used

property checked

checked?: boolean;

Whether or not this menu item is currently checked.

property className

className?: string;

Additional css class to apply to the Check

property componentRef

componentRef?: IRefObject<ICheckProps>;

Gets the component ref.

property styles

styles?: IStyleFunctionOrObject<ICheckStyleProps, ICheckStyles>;

Call to provide customized styling that will layer on top of the variant rules

property theme

theme?: ITheme;

Theme provided by HOC.

property useFastIcons

useFastIcons?: boolean;

Whether to use fast icon components. The icons can't be targeted by customization but are still customizable via class names.

interface ICheckStyles

interface ICheckStyles {}

property check

check: IStyle;

The 'check' icon styles.

property checkHost

checkHost: IStyle;

Check host style
Deprecated
Not used directly within the component. Instead, use CheckGlobalClassNames.checkHost from Check.styles.ts to get the static class name to apply to the parent element of the Check.

property circle

circle: IStyle;

The 'circle' icon styles.

property root

root: IStyle;

Style for the root element.

interface IChoiceGroup

interface IChoiceGroup {}

property checkedOption

checkedOption: IChoiceGroupOption | undefined;

Gets the current checked option.

property focus

focus: () => void;

Sets focus to the checked option or the first enabled option in the ChoiceGroup.

interface IChoiceGroupOption

interface IChoiceGroupOption
    extends React.InputHTMLAttributes<HTMLElement | HTMLInputElement> {}

property ariaLabel

ariaLabel?: string;

Aria label of the option for the benefit of screen reader users.

property checked

checked?: boolean;

Whether or not the option is checked.
Deprecated
Do not track checked state in the options themselves. Instead, either pass defaultSelectedKey to the ChoiceGroup and allow it to track selection state internally (uncontrolled), or pass selectedKey and onChange to the ChoiceGroup to track/update the selection state manually (controlled).

property disabled

disabled?: boolean;

Whether or not the option is disabled.

property iconProps

iconProps?: IIconProps;

Props for an icon to display with this option.

property id

id?: string;

ID used on the option's input element.

property imageAlt

imageAlt?: string;

Alt text if the option is an image. '' (empty string)

property imageSize

imageSize?: {
    width: number;
    height: number;
};

The width and height of the image in px for choice field.

property imageSrc

imageSrc?: string;

Image to display with this option.

property key

key: string;

A required key to uniquely identify the option.

property labelId

labelId?: string;

ID used on the option's label.

property onRenderField

onRenderField?: IRenderFunction<IChoiceGroupOption>;

Used to customize option rendering.

property onRenderLabel

onRenderLabel?: IRenderFunction<IChoiceGroupOption>;

Used to customize label rendering.

property selectedImageSrc

selectedImageSrc?: string;

The src of image for choice field which is selected.

property styles

styles?: IStyleFunctionOrObject<
    IChoiceGroupOptionStyleProps,
    IChoiceGroupOptionStyles
>;

Call to provide customized styling that will layer on top of the variant rules.

property text

text: string;

The text string for the option.

interface IChoiceGroupOptionProps

interface IChoiceGroupOptionProps extends IChoiceGroupOption {}

property componentRef

componentRef?: IRefObject<IChoiceGroupOption>;

Optional callback to access the IChoiceGroup interface. Use this instead of ref for accessing the public methods and properties of the component.

property focused

focused?: boolean;

Indicates if the ChoiceGroupOption should appear focused, visually

property name

name?: string;

This value is used to group each ChoiceGroupOption into the same logical ChoiceGroup

property onBlur

onBlur?: (ev: React.FocusEvent<HTMLElement>, props?: IChoiceGroupOption) => void;

A callback for receiving a notification when the choice has lost focus.

property onChange

onChange?: (
    evt?: React.FormEvent<HTMLElement | HTMLInputElement>,
    props?: IChoiceGroupOption
) => void;

A callback for receiving a notification when the choice has been changed.

property onFocus

onFocus?: (
    ev?: React.FocusEvent<HTMLElement | HTMLInputElement>,
    props?: IChoiceGroupOption
) => void | undefined;

A callback for receiving a notification when the choice has received focus.

property required

required?: boolean;

If true, it specifies that an option must be selected in the ChoiceGroup before submitting the form

property theme

theme?: ITheme;

Theme (provided through customization.)

interface IChoiceGroupOptionStyleProps

interface IChoiceGroupOptionStyleProps {}

Defines props needed to construct styles. This represents the simplified set of immutable things which control the class names.

property checked

checked?: boolean;

Whether the option is checked or not.

property disabled

disabled?: boolean;

Whether the option is disabled or not.

property focused

focused?: boolean;

Whether the option is in focus or not.

property hasIcon

hasIcon?: boolean;

Whether the option has an icon.

property hasImage

hasImage?: boolean;

Whether the option icon is an image.

property imageIsLarge

imageIsLarge?: boolean;

Whether the image width or height are higher than 71.

property imageSize

imageSize?: {
    height: number;
    width: number;
};

Image sizes used when hasImage or hasIcon style props are enabled.

property theme

theme: ITheme;

Theme provided by High-Order Component.

interface IChoiceGroupOptionStyles

interface IChoiceGroupOptionStyles {}

property choiceFieldWrapper

choiceFieldWrapper?: IStyle;

property field

field?: IStyle;

property iconWrapper

iconWrapper?: IStyle;

property imageWrapper

imageWrapper?: IStyle;

property innerField

innerField?: IStyle;

property input

input?: IStyle;

property labelWrapper

labelWrapper?: IStyle;

property root

root?: IStyle;

property selectedImageWrapper

selectedImageWrapper?: IStyle;

interface IChoiceGroupProps

interface IChoiceGroupProps
    extends React.InputHTMLAttributes<HTMLElement | HTMLInputElement> {}

property ariaLabelledBy

ariaLabelledBy?: string;

ID of an element to use as the aria label for this ChoiceGroup.

property componentRef

componentRef?: IRefObject<IChoiceGroup>;

Optional callback to access the IChoiceGroup interface. Use this instead of ref for accessing the public methods and properties of the component.

property defaultSelectedKey

defaultSelectedKey?: string | number;

The key of the option that will be initially checked.

property label

label?: string;

Descriptive label for the choice group.

property onChange

onChange?: (
    ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
    option?: IChoiceGroupOption
) => void;

A callback for receiving a notification when the choice has been changed.

property onChanged

onChanged?: (
    option: IChoiceGroupOption,
    evt?: React.FormEvent<HTMLElement | HTMLInputElement>
) => void;

Deprecated and will be removed by 07/17/2017. Use onChange instead.
Deprecated
Use onChange instead.

property options

options?: IChoiceGroupOption[];

The options for the choice group.

property selectedKey

selectedKey?: string | number;

The key of the selected option. If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.

property styles

styles?: IStyleFunctionOrObject<IChoiceGroupStyleProps, IChoiceGroupStyles>;

Call to provide customized styling that will layer on top of the variant rules.

property theme

theme?: ITheme;

Theme (provided through customization).

interface IChoiceGroupState

interface IChoiceGroupState {}

property keyChecked

keyChecked?: string | number;

Current selected option, for **internal use only**. External users should access IChoiceGroup.checkedOption instead.

property keyFocused

keyFocused?: string | number;

Is set when the control has focus.

interface IChoiceGroupStyleProps

interface IChoiceGroupStyleProps {}

property className

className?: string;

property optionsContainIconOrImage

optionsContainIconOrImage?: boolean;

property theme

theme: ITheme;

interface IChoiceGroupStyles

interface IChoiceGroupStyles {}

property applicationRole

applicationRole?: IStyle;

The actual root of the component.
Deprecated
Styles will be merged with root in a future release.

property flexContainer

flexContainer?: IStyle;

property label

label?: IStyle;

property root

root?: IStyle;

Not currently the actual root of the component (will be fixed in a future release). For now, to style the actual root, use applicationRole.

interface ICircle

interface ICircle extends IShimmerElement {}

Circle element interface

property height

height?: number;

Sets the height of the shimmer circle in pixels. Minimum supported 10px.

interface ICoachmark

interface ICoachmark {}

property dismiss

dismiss?: (ev?: any) => void;

Forces the Coachmark to dismiss

interface ICoachmarkProps

interface ICoachmarkProps extends React.ClassAttributes<CoachmarkBase> {}

Coachmark component props

property ariaAlertText

ariaAlertText?: string;

Text to announce to screen reader / narrator when Coachmark is displayed

property ariaDescribedBy

ariaDescribedBy?: string;

Defines the element id referencing the element containing the description for the Coachmark.

property ariaDescribedByText

ariaDescribedByText?: string;

Defines the text content for the ariaDescribedBy element

property ariaLabelledBy

ariaLabelledBy?: string;

Defines the element id referencing the element containing label text for Coachmark.

property ariaLabelledByText

ariaLabelledByText?: string;

Defines the text content for the ariaLabelledBy element

property beaconColorOne

beaconColorOne?: string;

Beacon color one.

property beaconColorTwo

beaconColorTwo?: string;

Beacon color two.

property beakHeight

beakHeight?: number;

The height of the Beak component.
Deprecated
No longer used.

property beakWidth

beakWidth?: number;

The width of the Beak component.
Deprecated
No longer used.

property className

className?: string;

If provided, additional class name to provide on the root element.

property collapsed

collapsed?: boolean;

The starting collapsed state for the Coachmark. Use isCollapsed instead.
Deprecated
Use isCollapsed instead.

property color

color?: string;

Color of the Coachmark/TeachingBubble.

property componentRef

componentRef?: IRefObject<ICoachmark>;

Optional callback to access the ICoachmark interface. Use this instead of ref for accessing the public methods and properties of the component.

property delayBeforeCoachmarkAnimation

delayBeforeCoachmarkAnimation?: number;

Delay in milliseconds before Coachmark animation appears.

property delayBeforeMouseOpen

delayBeforeMouseOpen?: number;

Delay before allowing mouse movements to open the Coachmark.

property height

height?: number;

The height of the Coachmark.
Deprecated
No longer used.

property isCollapsed

isCollapsed?: boolean;

The starting collapsed state for the Coachmark.

property isPositionForced

isPositionForced?: boolean;

Whether or not to force the Coachmark/TeachingBubble content to fit within the window bounds.

property mouseProximityOffset

mouseProximityOffset?: number;

The distance in pixels the mouse is located before opening up the Coachmark.

property onAnimationOpenEnd

onAnimationOpenEnd?: () => void;

Callback when the opening animation completes.

property onAnimationOpenStart

onAnimationOpenStart?: () => void;

Callback when the opening animation begins.

property onDismiss

onDismiss?: (ev?: any) => void;

Callback when the Coachmark tries to close.

property onMouseMove

onMouseMove?: (e: MouseEvent) => void;

Callback to run when the mouse moves.

property persistentBeak

persistentBeak?: boolean;

If true then the Coachmark beak (arrow pointing towards target) will always be visible as long as Coachmark is visible

property positioningContainerProps

positioningContainerProps?: IPositioningContainerProps;

Props to pass to the PositioningContainer component. Specify the directionalHint to indicate on which edge the Coachmark/TeachingBubble should be positioned.

property preventDismissOnLostFocus

preventDismissOnLostFocus?: boolean;

If true then the Coachmark will not dismiss when it loses focus

property preventFocusOnMount

preventFocusOnMount?: boolean;

If true then focus will not be set to the Coachmark when it mounts. Useful in cases where focus on coachmark is causing other components in page to dismiss upon losing focus.

property styles

styles?: IStyleFunctionOrObject<ICoachmarkStyleProps, ICoachmarkStyles>;

Call to provide customized styling that will layer on top of the variant rules

property target

target: HTMLElement | string | null;

The target that the Coachmark should try to position itself based on.

property teachingBubbleRef

teachingBubbleRef?: ITeachingBubble;

Ref for TeachingBubble
Deprecated
Coachmark uses focusFirstChild utility instead to focus on TeachingBubbleContent

property theme

theme?: ITheme;

Theme provided by higher order component.

property width

width?: number;

The width of the Coachmark.
Deprecated
No longer used.

interface ICoachmarkState

interface ICoachmarkState {}

property alertText

alertText?: string;

ARIA alert text to read aloud with Narrator once the Coachmark is mounted

property beakBottom

beakBottom?: string;

The bottom position of the beak

property beakLeft

beakLeft?: string;

The left position of the beak

property beakRight

beakRight?: string;

The right position of the beak

property beakTop

beakTop?: string;

The right position of the beak

property entityInnerHostRect

entityInnerHostRect: IEntityRect;

Cached width and height of _entityInnerHostElement

property isBeaconAnimating

isBeaconAnimating: boolean;

Enables/Disables the beacon that radiates from the center of the coachmark.

property isCollapsed

isCollapsed: boolean;

Is the Coachmark currently collapsed into a tear drop shape

property isMeasured

isMeasured: boolean;

Is the Coachmark done measuring the hosted entity

property isMeasuring

isMeasuring: boolean;

Is the teaching bubble currently retreiving the original dimensions of the hosted entity.

property isMouseInProximity

isMouseInProximity: boolean;

Is the mouse in proximity of the default target element

property targetAlignment

targetAlignment?: RectangleEdge;

Alignment edge of callout in relation to target

property targetPosition

targetPosition?: RectangleEdge;

Position of Coachmark/TeachingBubble in relation to target

property transformOrigin

transformOrigin?: string;

Transform origin of teaching bubble callout

interface ICoachmarkStyleProps

interface ICoachmarkStyleProps {}

The props needed to construct styles.

property beaconColorOne

beaconColorOne?: string;

Beacon color one

property beaconColorTwo

beaconColorTwo?: string;

Beacon color two

property className

className?: string;

ClassName to provide on the root style area.

property collapsed

collapsed?: boolean;

Is the Coachmark collapsed. Deprecated, use isCollapsed instead.
Deprecated
Use isCollapsed instead.

property color

color?: string;

Color

property delayBeforeCoachmarkAnimation

delayBeforeCoachmarkAnimation?: string;

Delay time for the animation to start

property entityHostHeight

entityHostHeight?: string;

The height measured before the component has been mounted in pixels

property entityHostWidth

entityHostWidth?: string;

The width measured in pixels

property height

height?: string;

Height of the coachmark

property isBeaconAnimating

isBeaconAnimating: boolean;

Is the beacon currently animating.
Deprecated
Property is never used

property isCollapsed

isCollapsed: boolean;

Is the Coachmark collapsed

property isMeasured

isMeasured: boolean;

Is the Coachmark finished measuring the dimensions of innerHostElement
Deprecated
Value is always the inverse of isMeasuring

property isMeasuring

isMeasuring: boolean;

Is the component taking measurements

property theme

theme?: ITheme;

Current theme.

property transformOrigin

transformOrigin?: string;

Transform origin for teaching bubble content

property width

width?: string;

Width of the coachmark

interface ICoachmarkStyles

interface ICoachmarkStyles {}

Represents the stylable areas of the control.

property ariaContainer

ariaContainer?: IStyle;

The styles applied to the ARIA attribute container

property childrenContainer

childrenContainer: IStyle;

The layer that directly contains the TeachingBubbleContent

property collapsed

collapsed?: IStyle;

The styles applied when the Coachmark has collapsed.

property entityHost

entityHost?: IStyle;

The layer that content/components/elements will be hosted in.

property entityInnerHost

entityInnerHost: IStyle;

The inner layer that components will be hosted in and primary purpose is scaling the layer down while the Coachmark collapsed.

property pulsingBeacon

pulsingBeacon?: IStyle;

The pulsing beacon that animates when the Coachmark is collapsed.

property root

root?: IStyle;

Style for the root element in the default enabled/unchecked state.

property rotateAnimationLayer

rotateAnimationLayer?: IStyle;

The layer the Rotate animation will be applied to.

property scaleAnimationLayer

scaleAnimationLayer?: IStyle;

The layer the Scale animation will be applied to.

property translateAnimationContainer

translateAnimationContainer?: IStyle;

The layer, or div, that the translate animation will be applied to.

interface IColor

interface IColor extends IRGB, IHSV {}

property hex

hex: string;

Hex string for the color (excluding alpha component), *not* prefixed with #.

property str

str: string;

CSS color string. If a hex value, it must be prefixed with #.

property t

t?: number;

Transparency value, range 0 (opaque) to 100 (transparent). Usually assumed to be 0 if not specified.

interface IColorCellProps

interface IColorCellProps {}

property color

color?: string;

The CSS-compatible string to describe the color

property id

id: string;

Arbitrary unique string associated with this option

property index

index?: number;

Index for this option

property label

label?: string;

Tooltip and aria label for this item

interface IColorPicker

interface IColorPicker {}

property color

color: IColor;

The currently selected color.

interface IColorPickerGridCellProps

interface IColorPickerGridCellProps {}

property borderWidth

borderWidth?: number;

Width of the border that indicates a selected/hovered cell, in pixels.

property circle

circle?: boolean;

True if this cell should be rendered as a circle, false if it should be a square. true (render as circle)

property color

color?: string;

The CSS-compatible string to describe the color

property disabled

disabled?: boolean;

Whether this cell should be disabled false

property height

height?: number;

Height of the cell, in pixels

property id

id?: string;

Used as a PREFIX for the cell's ID (the cell will not have this literal string as its ID).
Deprecated
Deprecated due to misleading name. Use idPrefix instead.

property idPrefix

idPrefix?: string;

Prefix for this cell's ID. Will be required in a future version once id is removed.

property index

index?: number;

Index for this option

property item

item: IColorCellProps;

Item to render

property label

label?: string;

Tooltip and aria label for this item

property onClick

onClick?: (item: IColorCellProps) => void;

Handler for when a color cell is clicked.

property onFocus

onFocus?: (item: IColorCellProps) => void;

property onHover

onHover?: (item?: IColorCellProps) => void;

property onKeyDown

onKeyDown?: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;

property onMouseEnter

onMouseEnter?: (ev: React.MouseEvent<HTMLButtonElement>) => boolean;

Mouse enter handler. Returns true if the event should be processed, false otherwise.

property onMouseLeave

onMouseLeave?: (ev: React.MouseEvent<HTMLButtonElement>) => void;

property onMouseMove

onMouseMove?: (ev: React.MouseEvent<HTMLButtonElement>) => boolean;

Mouse move handler. Returns true if the event should be processed, false otherwise.

property onWheel

onWheel?: (ev: React.MouseEvent<HTMLButtonElement>) => void;

property selected

selected: boolean;

Whether this cell is currently selected

property styles

styles?: IStyleFunctionOrObject<
    IColorPickerGridCellStyleProps,
    IColorPickerGridCellStyles
>;

Custom styles for the component.

property theme

theme?: ITheme;

The theme object to use for styling.

property width

width?: number;

Width of the cell, in pixels

interface IColorPickerGridCellStyleProps

interface IColorPickerGridCellStyleProps {}

property borderWidth

borderWidth?: number;

The width of the border indicating a hovered or selected cell, in pixels.

property circle

circle?: boolean;

Whether the svg color element should be rendered as a circle or not.

property disabled

disabled?: boolean;

Whether the component is disabled or not.

property height

height?: number;

The height of this cell, in pixels.

property isWhite

isWhite?: boolean;

Whether the color being rendered is white or not. If it is white we show a border around it.

property selected

selected?: boolean;

Whether the cell is currently selected or not.

property theme

theme: ITheme;

Theme to apply to the cell.

property width

width?: number;

The width of this cell, in pixels.

interface IColorPickerGridCellStyles

interface IColorPickerGridCellStyles {}

property colorCell

colorCell: IStyle;

Style to apply to a colorCell in the color picker.

property svg

svg: IStyle;

Style to apply to the svg element that renders the color.

interface IColorPickerProps

interface IColorPickerProps {}

property alphaLabel

alphaLabel?: string;

Label for the alpha textfield.
Deprecated
Use strings

property alphaSliderHidden

alphaSliderHidden?: boolean;

Whether to hide the alpha (or transparency) slider and text field.
Deprecated
Use alphaType: 'none'

property alphaType

alphaType?: 'alpha' | 'transparency' | 'none';

alpha (the default) means display a slider and text field for editing alpha values. transparency also displays a slider and text field but for editing transparency values. none hides these controls.
Alpha represents the opacity of the color, whereas transparency represents the transparentness of the color: i.e. a 30% transparent color has 70% opaqueness.

property blueLabel

blueLabel?: string;

Label for the blue text field.
Deprecated
Use strings

property className

className?: string;

Additional CSS class(es) to apply to the ColorPicker.

property color

color: IColor | string;

Object or CSS-compatible string to describe the color.

property componentRef

componentRef?: IRefObject<IColorPicker>;

Gets the component ref.

property greenLabel

greenLabel?: string;

Label for the green text field.
Deprecated
Use strings

property hexLabel

hexLabel?: string;

Label for the hex text field.
Deprecated
Use strings

property onChange

onChange?: (ev: React.SyntheticEvent<HTMLElement>, color: IColor) => void;

Callback for when the user changes the color. (Not called when the color is changed via props.)

property redLabel

redLabel?: string;

Label for the red text field.
Deprecated
Use strings

property showPreview

showPreview?: boolean;

Whether to show color preview box.

property strings

strings?: IColorPickerStrings;

Labels for elements within the ColorPicker. Defaults are provided in English only.

property styles

styles?: IStyleFunctionOrObject<IColorPickerStyleProps, IColorPickerStyles>;

Call to provide customized styling that will layer on top of the variant rules.

property theme

theme?: ITheme;

Theme (provided through customization).

interface IColorPickerState

interface IColorPickerState {}

property color

color: IColor;

Most recently selected color

property editingColor

editingColor?: {
    /** Which color component is being edited */
    component: ColorComponent;
    /** Currently entered value, which is not valid */
    value: string;
};

Color component currently being edited via a text field (if intermediate value is invalid)

interface IColorPickerStrings

interface IColorPickerStrings {}

property alpha

alpha?: string;

Label for the alpha text field. Also used as the aria label for the alpha slider if alphaAriaLabel is not provided.

property alphaAriaLabel

alphaAriaLabel?: string;

Customized aria-label for the alpha slider.

property blue

blue?: string;

Label for the blue text field.

property green

green?: string;

Label for the green text field.

property hex

hex?: string;

Label for the hex text field.

property hue

hue?: string;

Aria label for the hue slider.
Deprecated
Use hueAriaLabel

property hueAriaLabel

hueAriaLabel?: string;

Aria label for the hue slider.

property red

red?: string;

Label for the red text field.

property rootAriaLabelFormat

rootAriaLabelFormat?: string;

Accessible label for the root of the color picker region. The string should contain a placeholder {0} for the currently selected color.

property svAriaDescription

svAriaDescription?: string;

Detailed description for how to use the color rectangle. Moving the thumb horizontally adjusts saturation and moving it vertically adjusts value (essentially, brightness).

property svAriaLabel

svAriaLabel?: string;

Aria label for the color rectangle, which adjusts saturation and value (brightness).

property svAriaValueFormat

svAriaValueFormat?: string;

Format string for the current values of the color rectangle. The string must include descriptions and two placeholders for the current values: {0} for saturation and {1} for value/brightness.

property transparency

transparency?: string;

Label for the transparency text field.

property transparencyAriaLabel

transparencyAriaLabel?: string;

Customized aria-label for the transparency slider.

interface IColorPickerStyles

interface IColorPickerStyles {}

property colorRectangle

colorRectangle?: IStyle;

Style set for the panel element that contains the color rectangle

property colorSquare

colorSquare?: IStyle;

Color Square

property flexContainer

flexContainer?: IStyle;

flexContainer

property flexPreviewBox

flexPreviewBox?: IStyle;

flexPreviewBox

property flexSlider

flexSlider?: IStyle;

flexSlider

property input

input?: IStyle;

Style set for each text field input.

property panel

panel?: IStyle;

Style set for the panel element that contains the color rectangle, color sliders and inputs .

property root

root?: IStyle;

Style set for the root element.

property table

table?: IStyle;

Style set for the table element that contains the color sliders and inputs.

property tableAlphaCell

tableAlphaCell?: IStyle;

Style set for the table cell that contains the alpha or transparency label.

property tableHeader

tableHeader?: IStyle;

Style set for the table header that contains the labels.

property tableHexCell

tableHexCell?: IStyle;

Style set for the table cell that contains the hex label.

interface IColorRectangle

interface IColorRectangle {}

property color

color: IColor;

Currently selected color.

interface IColorRectangleProps

interface IColorRectangleProps {}

property ariaDescription

ariaDescription?: string;

Detailed description for how to use the color rectangle. Moving the thumb horizontally adjusts saturation and moving it vertically adjusts value (essentially, brightness).

property ariaLabel

ariaLabel?: string;

Label of the ColorRectangle for the benefit of screen reader users.

property ariaValueFormat

ariaValueFormat?: string;

Format string for the color rectangle's current value as read by screen readers. The string must include descriptions and two placeholders for the current values: {0} for saturation and {1} for value/brightness.

property className

className?: string;

Additional CSS class(es) to apply to the ColorRectangle.

property color

color: IColor;

Current color of the rectangle.

property componentRef

componentRef?: IRefObject<IColorRectangle>;

Gets the component ref.

property minSize

minSize?: number;

Minimum width and height.

property onChange

onChange?: (ev: React.MouseEvent | React.KeyboardEvent, color: IColor) => void;

Callback for when the color changes.

property styles

styles?: IStyleFunctionOrObject<
    IColorRectangleStyleProps,
    IColorRectangleStyles
>;

Call to provide customized styling that will layer on top of the variant rules.

property theme

theme?: ITheme;

Theme (provided through customization).

interface IColorRectangleStyleProps

interface IColorRectangleStyleProps {}

property className

className?: string;

Additional CSS class(es) to apply to the ColorRectangle.

property minSize

minSize?: number;

Minimum width and height.

property theme

theme: ITheme;

Theme (provided through customization).

interface IColorRectangleStyles

interface IColorRectangleStyles {}

property dark

dark?: IStyle;

Style set for the dark-colored rectangle.

property description

description?: IStyle;

Style for a hidden detailed description for screen reader users.

property light

light?: IStyle;

Style set for the light-colored rectangle.

property root

root?: IStyle;

Style set for the root element.

property thumb

thumb?: IStyle;

Style set for the draggable thumb element.

interface IColorSlider

interface IColorSlider {}

property value

value: number;

Current value of the slider.

interface IColorSliderProps

interface IColorSliderProps {}

property ariaLabel

ariaLabel?: string;

Label of the ColorSlider for the benefit of screen reader users.

property className

className?: string;

Additional CSS class(es) to apply to the ColorSlider.

property componentRef

componentRef?: IRefObject<IColorSlider>;

Gets the component ref.

property isAlpha

isAlpha?: boolean;

If true, the slider represents an alpha slider and will display a gray checkered pattern in the background. Otherwise, the slider represents a hue slider.
Deprecated
Use type

property maxValue

maxValue?: number;

Maximum value of the slider.
Deprecated
Will be 100 for alpha or transparency sliders, or 359 for hue sliders.

property minValue

minValue?: number;

Minimum value of the slider.
Deprecated
Will always be 0

property onChange

onChange?: (
    event: React.MouseEvent | React.KeyboardEvent,
    newValue?: number
) => void;

Callback issued when the value changes.

property overlayColor

overlayColor?: string;

Hex color to use when rendering an alpha or transparency slider's overlay, *without* the #.

property overlayStyle

overlayStyle?: React.CSSProperties;

Custom style for the overlay element.
Deprecated
Use overlayColor instead

property styles

styles?: IStyleFunctionOrObject<IColorSliderStyleProps, IColorSliderStyles>;

Call to provide customized styling that will layer on top of the variant rules.

property theme

theme?: ITheme;

Theme (provided through customization).

property thumbColor

thumbColor?: string;

CSS-compatible string for the color of the thumb element.
Deprecated
Not used. Use styles.sliderThumb instead.

property type

type?: 'hue' | 'alpha' | 'transparency';

Type of slider to display.

property value

value?: number;

Current value of the slider.

interface IColorSliderStyles

interface IColorSliderStyles {}

property root

root?: IStyle;

Style set for the root element.

property sliderOverlay

sliderOverlay?: IStyle;

Style set for the overlay element.

property sliderThumb

sliderThumb?: IStyle;

Style set for the draggable thumb element.

interface IColumn

interface IColumn {}

property ariaLabel

ariaLabel?: string;

Accessible label for the column. The column name will still be used as the primary label, but this text (if specified) will be read after the column name.

property calculatedWidth

calculatedWidth?: number;

Internal only value.

property className

className?: string;

Class name to apply to the column cell within each row.

property columnActionsMode

columnActionsMode?: ColumnActionsMode;

Defines how the column's header should render.

property currentWidth

currentWidth?: number;

Internal only value. Remembers the actual width of the column in any case. calculatedWidth is only saved when it's defined by user, not for justified calculations.

property data

data?: any;

Arbitrary data passthrough which can be used by the caller.

property fieldName

fieldName?: string;

The field to pull the text value from for the column. Can be unset if a custom onRender method is provided.

property filterAriaLabel

filterAriaLabel?: string;

Accessible label for the status of this column when filtered.

property flexGrow

flexGrow?: number;

If specified, the width of the column is a portion of the available space equal to this value divided by the sum of all proportional column widths in the list. For example, if there is a list with two proportional columns that have widths of 1 and 3, they will respectively occupy (1/4) = 25% and (3/4) = 75% of the remaining space. Note that this relies on viewport measures and will not work well with skipViewportMeasures.

property getValueKey

getValueKey?: (item?: any, index?: number, column?: IColumn) => string;

Custom override for the parent list's getCellValueKey.

property groupAriaLabel

groupAriaLabel?: string;

Accessible label for the status of this column when grouped.

property headerClassName

headerClassName?: string;

Class name to apply to the column header cell.

property iconClassName

iconClassName?: string;

Class name for the icon within the header.

property iconName

iconName?: string;

Custom icon to use in the column header.

property isCollapsable

isCollapsable?: boolean;

If true, allow the column to be collapsed when rendered in justified layout.
Deprecated
Use isCollapsible

property isCollapsible

isCollapsible?: boolean;

If true, allow the column to be collapsed when rendered in justified layout.

property isFiltered

isFiltered?: boolean;

Whether the list is filtered by this column. If true, shows a filter icon next to this column's name.

property isGrouped

isGrouped?: boolean;

Whether the list is grouped by this column. If true, shows a grouped icon next to this column's name.

property isIconOnly

isIconOnly?: boolean;

Whether only the icon should be displayed in the column header. If true, the column name and dropdown chevron will not be displayed.

property isMenuOpen

isMenuOpen?: boolean;

Whether a dropdown menu is open so that the appropriate ARIA attributes are rendered.

property isMultiline

isMultiline?: boolean;

Determines if the column can render multi-line text.

property isPadded

isPadded?: boolean;

If true, add additional LTR padding-right to column and cells.

property isResizable

isResizable?: boolean;

Determines if the column can be resized.

property isRowHeader

isRowHeader?: boolean;

Whether the column is a header for the given row. There should be only one column with this set to true.

property isSorted

isSorted?: boolean;

Determines if the column is currently sorted. Renders a sort arrow in the column header.

property isSortedDescending

isSortedDescending?: boolean;

Determines if the sort arrow is pointed down (descending) or up.

property key

key: string;

A unique key for identifying the column.

property maxWidth

maxWidth?: number;

Maximum width for the column, if stretching is allowed in justified scenarios.

property minWidth

minWidth: number;

Minimum width for the column.

property name

name: string;

Name to render on the column header.

property onColumnClick

onColumnClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => void;

Callback for when the user clicks on the column header.

property onColumnContextMenu

onColumnContextMenu?: (
    column?: IColumn,
    ev?: React.MouseEvent<HTMLElement>
) => void;

Callback for when the user opens the column header context menu.

property onColumnResize

onColumnResize?: (width?: number) => void;

Callback for when the column is resized (width is the current width).
Prefer this over DetailsList's onColumnResize if you require the IColumn to report its width after every resize event. Consider debouncing the callback if resize events occur frequently.

property onRender

onRender?: (item?: any, index?: number, column?: IColumn) => any;

Custom renderer for cell content, instead of the default text rendering.

property onRenderDivider

onRenderDivider?: IRenderFunction<IDetailsColumnProps>;

Custom renderer for column header divider.

property onRenderFilterIcon

onRenderFilterIcon?: IRenderFunction<IDetailsColumnFilterIconProps>;

Custom renderer for filter icon.

property onRenderHeader

onRenderHeader?: IRenderFunction<IDetailsColumnProps>;

Custom renderer for column header content, instead of the default text rendering.

property sortAscendingAriaLabel

sortAscendingAriaLabel?: string;

Accessible label for indicating that the list is sorted by this column in ascending order. This will be read after the main column header label.

property sortDescendingAriaLabel

sortDescendingAriaLabel?: string;

Accessible label for indicating that the list is sorted by this column in descending order. This will be read after the main column header label.

property styles

styles?: IStyleFunctionOrObject<IDetailsColumnStyleProps, IDetailsColumnStyles>;

Custom overrides to the themed or default styles.

property targetWidthProportion

targetWidthProportion?: number;

If specified, the width of the column is a portion of the available space equal to this value divided by the sum of all proportional column widths in the list. For example, if there is a list with two proportional columns that have widths of 1 and 3, they will respectively occupy (1/4) = 25% and (2/4) = 75% of the remaining space. Note that this relies on viewport measures and will not work well with skipViewportMeasures.

interface IColumnDragDropDetails

interface IColumnDragDropDetails {}

property draggedIndex

draggedIndex: number;

Specifies the source column index

property targetIndex

targetIndex: number;

Specifies the target column index

interface IColumnReorderHeaderProps

interface IColumnReorderHeaderProps extends IColumnReorderOptions {}

property onColumnDragEnd

onColumnDragEnd?: (
    props: {
        dropLocation?: ColumnDragEndLocation;
    },
    event: MouseEvent
) => void;

Callback to notify the column dragEnd event to List Need this to check whether the dragEnd has happened on corresponding list or outside of the list

interface IColumnReorderOptions

interface IColumnReorderOptions {}

property frozenColumnCountFromEnd

frozenColumnCountFromEnd?: number;

Specifies the number fixed columns from right

property frozenColumnCountFromStart

frozenColumnCountFromStart?: number;

Specifies the number fixed columns from left

property handleColumnReorder

handleColumnReorder?: (draggedIndex: number, targetIndex: number) => void;

Callback to handle column reordering. draggedIndex is the source column index, which should be placed at targetIndex.
Deprecated
Use onColumnDrop instead.

property onColumnDragStart

onColumnDragStart?: (dragStarted: boolean) => void;

Callback to handle when dragging on this column's DetailsHeader has started.

property onColumnDrop

onColumnDrop?: (dragDropDetails: IColumnDragDropDetails) => void;

Callback to handle column reordering. draggedIndex is the source column index, which should be placed at targetIndex.

property onDragEnd

onDragEnd?: (columnDropLocationDetails: ColumnDragEndLocation) => void;

Callback to handle when dragging on this column's DetailsHeader has finished.

interface IColumnResizeDetails

interface IColumnResizeDetails {}

property columnIndex

columnIndex: number;

property columnMinWidth

columnMinWidth: number;

property originX

originX?: number;

interface IComboBox

interface IComboBox {}

property dismissMenu

dismissMenu: () => void;

If there is a menu open this will dismiss the menu.

property selectedOptions

readonly selectedOptions: IComboBoxOption[];

All selected options.

method focus

focus: (shouldOpenOnFocus?: boolean, useFocusAsync?: boolean) => boolean;

Sets focus to the input in the ComboBox
Parameter shouldOpenOnFocus
Determines if we should open the ComboBox menu when the input gets focus.
Parameter useFocusAsync
Determines if we should focus the input asynchronously.
Returns
True if focus could be set, false if no operation was taken.

interface IComboBoxClassNames

interface IComboBoxClassNames {}

property callout

callout: string;

property container

container: string;

property divider

divider: string;

property errorMessage

errorMessage: string;

header: string;

property input

input: string;

property label

label: string;

property optionsContainer

optionsContainer: string;

property optionsContainerWrapper

optionsContainerWrapper: string;

property root

root: string;

property screenReaderText

screenReaderText: string;

interface IComboBoxOption

interface IComboBoxOption extends ISelectableOption {}

property styles

styles?: Partial<IComboBoxOptionStyles>;

Specific styles for each ComboBox option. To give common styles to all options, use IComboBoxProps.comboBoxOptionStyles instead.

property useAriaLabelAsText

useAriaLabelAsText?: boolean;

Whether to use the ariaLabel prop instead of the text prop to set the preview text as well as the aria-label. This is for scenarios where the text prop is used for embedded data.

interface IComboBoxOptionClassNames

interface IComboBoxOptionClassNames {}

property optionText

optionText: string;

property optionTextWrapper

optionTextWrapper: string;

property root

root: string;

interface IComboBoxOptionStyles

interface IComboBoxOptionStyles extends IButtonStyles {}

property optionText

optionText: IStyle;

Styles for the text inside the ComboBox option. This should be used instead of the description in IButtonStyles because we custom render the text in the ComboBox options.

property optionTextWrapper

optionTextWrapper: IStyle;

Styles for the ComboBox option text's wrapper.

interface IComboBoxProps

interface IComboBoxProps
    extends ISelectableDroppableTextProps<IComboBox, IComboBox> {}

property allowFreeform

allowFreeform?: boolean;

Whether the ComboBox allows freeform user input, rather than restricting to the provided options.

property ariaDescribedBy

ariaDescribedBy?: string;

Optional ID of an element providing a description of the ComboBox for screen reader users.

property autoComplete

autoComplete?: 'on' | 'off';

Whether the ComboBox auto completes. As the user is entering text, potential matches will be suggested from the list of options. If the ComboBox is expanded, this will also scroll to the suggested option and give it a selected style.

property autofill

autofill?: IAutofillProps;

Props to pass through to the Autofill component (the input field) inside the ComboBox.

property buttonIconProps

buttonIconProps?: IIconProps;

The IconProps to use for the caret button of the ComboBox.

property caretDownButtonStyles

caretDownButtonStyles?: Partial<IButtonStyles>;

Styles for the caret down button.

property comboBoxOptionStyles

comboBoxOptionStyles?: Partial<IComboBoxOptionStyles>;

Default styles that should be applied to ComboBox options.

property componentRef

componentRef?: IRefObject<IComboBox>;

Optional callback to access the IComboBox interface. Use this instead of ref for accessing the public methods and properties of the component.

property dropdownMaxWidth

dropdownMaxWidth?: number;

Custom max width for the options list dropdown.

property dropdownWidth

dropdownWidth?: number;

Custom width for options list dropdown. Mutually exclusive with useComboBoxAsMenuWidth.

property getClassNames

getClassNames?: (
    theme: ITheme,
    isOpen: boolean,
    disabled: boolean,
    required: boolean,
    focused: boolean,
    allowFreeForm: boolean,
    hasErrorMessage: boolean,
    className?: string
) => IComboBoxClassNames;

Custom function for providing the classNames for the ComboBox. Can be used to provide all styles for the component instead of applying them on top of the default styles.

property iconButtonProps

iconButtonProps?: IButtonProps;

Additional props for the caret button.

property isButtonAriaHidden

isButtonAriaHidden?: boolean;

Sets the aria-hidden attribute on the ComboBox's caret button element. This element is hidden from screen readers by default because all functionality is handled by the input element and the arrow button is only meant to be decorative.

property keytipProps

keytipProps?: IKeytipProps;

Optional keytip for this ComboBox.

property multiSelectDelimiter

multiSelectDelimiter?: string;

When multiple items are selected, this will be used to separate values in the ComboBox input.

property onChange

onChange?: (
    event: React.FormEvent<IComboBox>,
    option?: IComboBoxOption,
    index?: number,
    value?: string
) => void;

Callback for when either: 1) The selected option changes. 2) A manually edited value is submitted. In this case there may not be a matched option if allowFreeform is also true (and hence only value would be provided; the other parameters would be unspecified).

property onInputValueChange

onInputValueChange?: (text: string) => void;

Called when the user types in to the input of the combo box
Ideal if you want to be notified of raw text input

property onItemClick

onItemClick?: (
    event: React.FormEvent<IComboBox>,
    option?: IComboBoxOption,
    index?: number
) => void;

Callback for when a ComboBox item is clicked.

property onMenuDismiss

onMenuDismiss?: () => void;

Callback for before the menu gets dismissed.

property onMenuDismissed

onMenuDismissed?: () => void;

Callback for when the ComboBox menu is dismissed.

property onMenuOpen

onMenuOpen?: () => void;

Called when the ComboBox menu is launched.

property onPendingValueChanged

onPendingValueChanged?: (
    option?: IComboBoxOption,
    index?: number,
    value?: string
) => void;

Called when the user changes the pending value in ComboBox, either by typing in the input or hovering over options. When typing, the behavior varies depending on autoComplete and allowFreeform settings.
In all cases, when the pending value is reset, all parameters will be undefined.
When hovering options: option and index will be provided, and value will be undefined.
Typing with allowFreeform on: If there's an option matching the input (an exact match if autoComplete is off, or a prefix match otherwise), option and index are provided and value is undefined. Otherwise only value is provided.
Typing with allowFreeform off (or unspecified): If autoComplete is on (or unspecified), and the user types text matching the start of an option within a timeout, option and index are provided and value is undefined. If autoComplete is off, typing does nothing.
If you simply want to be notified of raw text input, use the prop onInputValueChange.

property onRenderLabel

onRenderLabel?: IRenderFunction<IOnRenderComboBoxLabelProps>;

Custom render function for the label text.

property onRenderLowerContent

onRenderLowerContent?: IRenderFunction<IComboBoxProps>;

Add additional content below the option list in the callout.

property onRenderUpperContent

onRenderUpperContent?: IRenderFunction<IComboBoxProps>;

Add additional content above the option list in the callout.

property onResolveOptions

onResolveOptions?: (
    options: IComboBoxOption[]
) => IComboBoxOption[] | PromiseLike<IComboBoxOption[]>;

Callback for when the options should be resolved, if they have been updated or if they need to be passed in the first time.

property onScrollToItem

onScrollToItem?: (itemIndex: number) => void;

Callback for when the ComboBox requests the list to scroll to a specific element.

property options

options: IComboBoxOption[];

Collection of options for this ComboBox.

property persistMenu

persistMenu?: boolean;

Whether to show/hide the menu when it's opened/closed (rather than creating/destroying it). This will improve perf of the menu opening but could potentially have a negative impact on overall perf by increasing initial render time (since the ComboBox will render the menu hidden on mount) and keeping more elements in the DOM. Should only be used when perf to open/close the menu is important.

property scrollSelectedToTop

scrollSelectedToTop?: boolean;

When the options list is scrollable, whether to position the selected option at the top of the callout when it is opened (unless it has reached the end of the scrollbar).

property shouldRestoreFocus

shouldRestoreFocus?: boolean;

Whether the options list callout should restore focus after being dismissed. Set to false to prevent the menu from trying to re-focus the element that had focus before the menu was opened.

property styles

styles?: Partial<IComboBoxStyles>;

Custom styles for this component.

property text

text?: string;

Value to show in the input (does not have to map to a ComboBox option).

property theme

theme?: ITheme;

Theme provided by HOC.

property useComboBoxAsMenuWidth

useComboBoxAsMenuWidth?: boolean;

Whether to use the ComboBox field width as the menu's width.

interface IComboBoxState

interface IComboBoxState {}

property currentOptions

currentOptions: IComboBoxOption[];

The options currently available for the callout

property currentPendingValue

currentPendingValue?: string;

When taking input, this will store the actual text that is being entered

property currentPendingValueValidIndex

currentPendingValueValidIndex: number;

When taking input, this will store the index that the options input matches (-1 if no input or match)

property currentPendingValueValidIndexOnHover

currentPendingValueValidIndexOnHover: number;

Stores the hovered over value in the dropdown (used for styling the options without updating the input)

property focusState

focusState?: 'none' | 'focused' | 'focusing';

The focused state of the comboBox

property isOpen

isOpen?: boolean;

The open state

property selectedIndices

selectedIndices?: number[];

The currently selected indices

property suggestedDisplayValue

suggestedDisplayValue?: string;

This value is used for the autocomplete hint value

interface IComboBoxStyles

interface IComboBoxStyles {}

property callout

callout: IStyle;

Styles for the callout.

property container

container: IStyle;

Style for the container which has the ComboBox and the label. (In most other components this would be called root.)

property divider

divider: IStyle;

Styles for a divider in the options.

property errorMessage

errorMessage: IStyle;

Styles for the error message text of the ComboBox.

header: IStyle;

Styles for a header in the options.

property input

input: IStyle;

Base styles for the input element which contains the currently selected option.

property inputDisabled

inputDisabled: IStyle;

Style override for the input element when ComboBox is disabled.

property label

label: IStyle;

Style for the label element of the ComboBox.

property labelDisabled

labelDisabled: IStyle;

Style for the label element of the ComboBox in the disabled state.

property optionsContainer

optionsContainer: IStyle;

Styles for the container of all the ComboBox options. Includes the headers and dividers.

property optionsContainerWrapper

optionsContainerWrapper: IStyle;

Styles for the options list container element.

property root

root: IStyle;

Base styles for the wrapper element containing the input field and caret button, applied to all state variants.
Unlike in most components, this is NOT the actual root element which also contains the label as well as the field; for that, use container.

property rootDisabled

rootDisabled: IStyle;

Styles for the wrapper element containing the input field and caret button, applied when the ComboBox is disabled. These override all the other styles.
NOTE: Hover/focused/active styles are not applied for disabled ComboBoxes.

property rootDisallowFreeForm

rootDisallowFreeForm: IStyle;

Styles for the wrapper element containing the input field and caret button, applied when IComboBoxProps.allowFreeform is false.

property rootError

rootError: IStyle;

Styles for the wrapper element containing the input field and caret button, applied when the ComboBox has an error message.

property rootFocused

rootFocused: IStyle;

Styles for the wrapper element containing the input field and caret button, applied any time the ComboBox is focused (unless it's disabled).

property rootHovered

rootHovered: IStyle;

Styles for the wrapper element containing the input field and caret button, applied any time the ComboBox is hovered (unless it's disabled).

property rootPressed

rootPressed: IStyle;

Styles for the wrapper element containing the input field and caret button, applied any time the ComboBox is active (unless it's disabled).

property screenReaderText

screenReaderText: IStyle;

Styles for hidden screen reader text.

interface ICommandBar

interface ICommandBar {}

method focus

focus: () => void;

Sets focus to the active command in the list.

method remeasure

remeasure: () => void;

Remeasures the available space.

interface ICommandBarData

interface ICommandBarData {}

property cacheKey

cacheKey: string;

Unique string used to cache the width of the command bar

property farItems

farItems: ICommandBarItemProps[] | undefined;

Items being rendered on the far side

property minimumOverflowItems

minimumOverflowItems: number;

Length of original overflowItems to ensure that they are not moved into primary region on resize

property overflowItems

overflowItems: ICommandBarItemProps[];

Items being rendered in the overflow

property primaryItems

primaryItems: ICommandBarItemProps[];

Items being rendered in the primary region

interface ICommandBarItemProps

interface ICommandBarItemProps extends IContextualMenuItem {}

ICommandBarItemProps extends IContextualMenuItem and adds a few CommandBar-specific props.

property buttonStyles

buttonStyles?: IButtonStyles;

Custom styles for individual button

property cacheKey

cacheKey?: string;

A custom cache key to be used for this item. If cacheKey is changed, the cache will invalidate. Defaults to key value.

property commandBarButtonAs

commandBarButtonAs?: IComponentAs<ICommandBarItemProps>;

Method to override the render of the individual command bar button. Not used when item is rendered in overflow.

property iconOnly

iconOnly?: boolean;

Show only an icon for this item, not text. Does not apply if item is in the overflow.

property renderedInOverflow

renderedInOverflow?: boolean;

Context under which the item is being rendered. This value is mutated by the CommandBar and is useful for adjusting the onRender function.

property tooltipHostProps

tooltipHostProps?: ITooltipHostProps;

Props for the tooltip when in iconOnly mode.

interface ICommandBarProps

interface ICommandBarProps extends React.HTMLAttributes<HTMLDivElement> {}

property ariaLabel

ariaLabel?: string;

Accessibility text to be read by the screen reader when the user's focus enters the command bar. The screen reader will read this text after reading information about the first focusable item in the command bar.

property buttonAs

buttonAs?: IComponentAs<IButtonProps>;

Custom component for the near and far item buttons. Not used for overflow menu items.

property className

className?: string;

Additional css class to apply to the command bar

property componentRef

componentRef?: IRefObject<ICommandBar>;

Optional callback to access the ICommandBar interface. Use this instead of ref for accessing the public methods and properties of the component.

property dataDidRender

dataDidRender?: (renderedData: any) => void;

Function to be called every time data is rendered. It provides the data that was actually rendered. A use case would be adding telemetry when a particular control is shown in an overflow or dropped as a result of onReduceData, or to count the number of renders that an implementation of onReduceData triggers.

property farItems

farItems?: ICommandBarItemProps[];

Items to render on the right side (or left, in RTL). ICommandBarItemProps extends IContextualMenuItem.

property items

items: ICommandBarItemProps[];

Items to render. ICommandBarItemProps extends IContextualMenuItem.

property onDataGrown

onDataGrown?: (movedItem: ICommandBarItemProps) => void;

Callback invoked when data has been grown.

property onDataReduced

onDataReduced?: (movedItem: ICommandBarItemProps) => void;

Callback invoked when data has been reduced.

property onGrowData

onGrowData?: (data: ICommandBarData) => ICommandBarData | undefined;

Custom function to grow data if items are too small for the given space. Return undefined if no more steps can be taken to avoid infinate loop.

property onReduceData

onReduceData?: (data: ICommandBarData) => ICommandBarData | undefined;

Custom function to reduce data if items do not fit in given space. Return undefined if no more steps can be taken to avoid infinate loop.

property overflowButtonAs

overflowButtonAs?: IComponentAs<IButtonProps>;

Custom component for the overflow button.

property overflowButtonProps

overflowButtonProps?: IButtonProps;

Props to be passed to overflow button. If menuProps are passed through this prop, any items provided will be prepended to any computed overflow items.

property overflowItems

overflowItems?: ICommandBarItemProps[];

Default items to have in the overflow menu. ICommandBarItemProps extends IContextualMenuItem.

property shiftOnReduce

shiftOnReduce?: boolean;

When true, items will be 'shifted' off the front of the array when reduced, and unshifted during grow.

property styles

styles?: IStyleFunctionOrObject<ICommandBarStyleProps, ICommandBarStyles>;

Customized styling that will layer on top of the variant rules.

property theme

theme?: ITheme;

Theme provided by HOC.

interface ICommandBarStyleProps

interface ICommandBarStyleProps {}

property className

className?: string;

property theme

theme: ITheme;

interface ICommandBarStyles

interface ICommandBarStyles {}

property primarySet

primarySet?: IStyle;

property root

root?: IStyle;

property secondarySet

secondarySet?: IStyle;

interface IContextualMenu

interface IContextualMenu {}

interface IContextualMenuClassNames

interface IContextualMenuClassNames {}

Deprecated
in favor of mergeStyles API.

property container

container?: string;

property header

header?: string;

property list

list?: string;

property root

root?: string;

property subComponentStyles

subComponentStyles?: IContextualMenuSubComponentStyles;

property title

title?: string;

interface IContextualMenuItem

interface IContextualMenuItem {}

property ariaDescription

ariaDescription?: string;

Detailed description of the menu item for the benefit of screen readers.

property ariaLabel

ariaLabel?: string;

Custom accessible label for the element. If no override is specified, the aria-label attribute will contain the item name.

property canCheck

canCheck?: boolean;

Whether or not this menu item can be checked

property checked

checked?: boolean;

Whether or not this menu item is currently checked.

property className

className?: string;

Additional CSS class to apply to the menu item.

property componentRef

componentRef?: IRefObject<IContextualMenuRenderItem>;

Optional callback to access the IContextualMenuRenderItem interface. This will get passed down to ContextualMenuItem.

property customOnRenderListLength

customOnRenderListLength?: number;

When rendering a custom menu component that is passed in, the component might also be a list of elements. We want to keep track of the correct index our menu is using based off of the length of the custom list. It is up to the user to increment the count for their list.

property data

data?: any;

Any custom data the developer wishes to associate with the menu item.

property disabled

disabled?: boolean;

Whether the menu item is disabled

property getItemClassNames

getItemClassNames?: (
    theme: ITheme,
    disabled: boolean,
    expanded: boolean,
    checked: boolean,
    isAnchorLink: boolean,
    knownIcon: boolean,
    itemClassName?: string,
    dividerClassName?: string,
    iconClassName?: string,
    subMenuClassName?: string,
    primaryDisabled?: boolean
) => IMenuItemClassNames;

Method to provide the classnames to style the individual items inside a menu.
Deprecated
Use styles prop of IContextualMenuItemProps to leverage mergeStyles API.

property getSplitButtonVerticalDividerClassNames

getSplitButtonVerticalDividerClassNames?: (
    theme: ITheme
) => IVerticalDividerClassNames;

Method to provide the classnames to style the Vertical Divider of a split button inside a menu. Default value is the getSplitButtonVerticalDividerClassNames func defined in ContextualMenu.classnames.ts.

property href

href?: string;

Navigate to this URL when the menu item is clicked.

property iconProps

iconProps?: IIconProps;

Props for an icon to display next to the item.

property inactive

inactive?: boolean;

This prop is no longer used. All contextual menu items are now focusable when disabled.
Deprecated
in 6.38.2 will be removed in 7.0.0

property itemProps

itemProps?: Partial<IContextualMenuItemProps>;

Optional IContextualMenuItemProps overrides to customize behaviors such as item styling via styles.

property items

items?: IContextualMenuItem[];

Deprecated
Use subMenuProps.items instead.

property itemType

itemType?: ContextualMenuItemType;

property key

key: string;

Unique id to identify the item

property keytipProps

keytipProps?: IKeytipProps;

Keytip for this contextual menu item

property name

name?: string;

Text of the menu item.
Deprecated
Use text instead.

property onClick

onClick?: (
    ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
    item?: IContextualMenuItem
) => boolean | void;

Callback for when the menu item is invoked. If ev.preventDefault() is called in onClick, the click will not close the menu.
Only for ContextualMenu items, returning true will dismiss the menu even if ev.preventDefault() was called (does not apply for button or CommandBar sub-menu items).

property onMouseDown

onMouseDown?: (
    item: IContextualMenuItem,
    event: React.MouseEvent<HTMLElement>
) => void;

A function to be executed on mouse down. This is executed before an onClick event and can be used to interrupt native on click events as well. The click event should still handle the commands. This should only be used in special cases when react and non-react are mixed.

property onRender

onRender?: (
    item: any,
    dismissMenu: (ev?: any, dismissAll?: boolean) => void
) => React.ReactNode;

Method to custom render this menu item. For keyboard accessibility, the top-level rendered item should be a focusable element (like an anchor or a button) or have the data-is-focusable property set to true.
Parameter item
Item to render. Will typically be of type IContextualMenuItem. (When rendering a command bar item, will be ICommandBarItemProps.)
Parameter dismissMenu
Function to dismiss the menu. Can be used to ensure that a custom menu item click dismisses the menu. (Will be undefined if rendering a command bar item.)

property onRenderContent

onRenderContent?: (
    props: IContextualMenuItemProps,
    defaultRenders: IContextualMenuItemRenderFunctions
) => React.ReactNode;

Method to customize sub-components rendering of this menu item.
Parameter props
Props used to pass into render functions
Parameter defaultRenders
Default render functions that renders default sub-components

property onRenderIcon

onRenderIcon?: IRenderFunction<IContextualMenuItemProps>;

Custom render function for the menu item icon

property preferMenuTargetAsEventTarget

preferMenuTargetAsEventTarget?: boolean;

Flag which indicates that, when the item is clicked, the 'target' for the click event should be overridden to reflect the launch target from the root menu. This avoids a situation where the 'target' of the event may wind up detached from the DOM when the menu is dismissed in response to the click.

property primaryDisabled

primaryDisabled?: boolean;

If the menu item is a split button, this prop disables purely the primary action of the button.

property rel

rel?: string;

Link relation setting when using href. If target is _blank, rel is defaulted to a value to prevent clickjacking.

property role

role?: string;

Optional override for the menu button's role. Defaults to menuitem or menuitemcheckbox.

property secondaryText

secondaryText?: string;

Seconday description for the menu item to display

property sectionProps

sectionProps?: IContextualMenuSection;

Properties to apply to render this item as a section. This prop is mutually exclusive with subMenuProps.

property shortCut

shortCut?: string;

Deprecated
Not used

property split

split?: boolean;

Whether or not this menu item is a splitButton.

property style

style?: React.CSSProperties;

Additional styles to apply to the menu item
Deprecated
in favor of the styles prop to leverage mergeStyles API.

property submenuIconProps

submenuIconProps?: IIconProps;

Props for the Icon used for the chevron.

property subMenuProps

subMenuProps?: IContextualMenuProps;

Properties to apply to a submenu to this item.
The ContextualMenu will provide default values for target, onDismiss, isSubMenu, id, shouldFocusOnMount, directionalHint, className, and gapSpace, all of which can be overridden.

property target

target?: string;

Target window when using href.

property text

text?: string;

Text of the menu item. If a standard hyphen (-) is passed in, then the item will be rendered as a divider. If a dash must appear as text, use an emdash (—), figuredash (‒), or minus symbol (−) instead.

property title

title?: string;

Title (tooltip) text displayed when hovering over an item.

index signature

[propertyName: string]: any;

Any additional properties to use when custom rendering menu items.

interface IContextualMenuItemProps

interface IContextualMenuItemProps
    extends React.HTMLAttributes<IContextualMenuItemProps> {}

property className

className?: string;

Additional css class to apply to the ContextualMenuItem

property classNames

classNames: IMenuItemClassNames;

Classnames for different aspects of a menu item

property componentRef

componentRef?: IRefObject<IContextualMenuRenderItem>;

Optional callback to access the IContextualMenuRenderItem interface. Use this instead of ref for accessing the public methods and properties of the component.

property dismissMenu

dismissMenu?: (ev?: any, dismissAll?: boolean) => void;

This prop will get set by ContextualMenu and can be called to close the menu this item belongs to. If dismissAll is true, all menus will be closed.

property dismissSubMenu

dismissSubMenu?: () => void;

This prop will get set by ContextualMenu and can be called to close this item's subMenu, if present.

property getSubmenuTarget

getSubmenuTarget?: () => HTMLElement | undefined;

This prop will get set by the wrapping component and will return the element that wraps this ContextualMenuItem. Used for openSubMenu.

property hasIcons

hasIcons: boolean | undefined;

If this item has icons

property index

index: number;

Index of the item

property item

item: IContextualMenuItem;

The item to display

property onCheckmarkClick

onCheckmarkClick?: (
    item: IContextualMenuItem,
    ev: React.MouseEvent<HTMLElement>
) => void;

Click handler for the checkmark

property openSubMenu

openSubMenu?: (item: any, target: HTMLElement) => void;

This prop will get set by ContextualMenu and can be called to open this item's subMenu, if present.

property styles

styles?: IStyleFunctionOrObject<
    IContextualMenuItemStyleProps,
    IContextualMenuItemStyles
>;

Call to provide customized styling that will layer on top of the variant rules.

property theme

theme?: ITheme;

Theme provided by High-Order Component.

interface IContextualMenuItemRenderFunctions

interface IContextualMenuItemRenderFunctions {}

property renderCheckMarkIcon

renderCheckMarkIcon: (
    props: IContextualMenuItemProps,
    customClassNames?: string[]
) => React.ReactNode;

Rendering function for check mark icon

property renderItemIcon

renderItemIcon: (
    props: IContextualMenuItemProps,
    customClassNames?: string[]
) => React.ReactNode;

Rendering function for item icon

property renderItemName

renderItemName: (
    props: IContextualMenuItemProps,
    customClassNames?: string[]
) => React.ReactNode;

Rendering function for item label

property renderSecondaryText

renderSecondaryText: (
    props: IContextualMenuItemProps,
    customClassNames?: string[]
) => React.ReactNode;

Rendering function for secondary text label

property renderSubMenuIcon

renderSubMenuIcon: (
    props: IContextualMenuItemProps,
    customClassNames?: string[]
) => React.ReactNode;

Rendering function for submenu icon

interface IContextualMenuItemRenderProps

interface IContextualMenuItemRenderProps extends IContextualMenuItem {}

property focusableElementIndex

focusableElementIndex: number;

property hasCheckmarks

hasCheckmarks: boolean;

property hasIcons

hasIcons: boolean;

property index

index: number;

property totalItemCount

totalItemCount: number;

interface IContextualMenuItemStyleProps

interface IContextualMenuItemStyleProps {}

property checked

checked: boolean;

Whether or not the menu item is checked.

property className

className?: string;

Accept custom classNames

property disabled

disabled: boolean;

Whether or not the menu item is disabled.

property dividerClassName

dividerClassName?: string;

The optional class name to apply to the divider element.

property expanded

expanded: boolean;

Whether or not the menu item is expanded.

property iconClassName

iconClassName?: string;

The optional class name to apply to the icon element.

property isAnchorLink

isAnchorLink: boolean;

Indicates if a menu item is an anchor link.

property itemClassName

itemClassName?: string;

The optional class name to apply to the item element.

property knownIcon

knownIcon: boolean;

Indicates if the icon used is of the known set of icons.

property primaryDisabled

primaryDisabled?: boolean;

Whether or not the primary section of a split menu item is disabled.

property subMenuClassName

subMenuClassName?: string;

The optional class name to apply to the sub-menu if present.

property theme

theme: ITheme;

Theme provided by High-Order Component.

interface IContextualMenuItemStyles

interface IContextualMenuItemStyles extends IButtonStyles {}

property anchorLink

anchorLink?: IStyle;

Styles for a menu item that is an anchor link.

property checkmarkIcon

checkmarkIcon?: IStyle;

Default style for checkmark icons.

property divider

divider?: IStyle;

Styles for a divider item of a ContextualMenu.

property icon

icon?: IStyle;

Styles for the icon element of a menu item.

property iconColor

iconColor?: IStyle;

Default icon color style for known icons.

property item

item?: IStyle;

Styles for a menu item that is an anchor link.

property label

label?: IStyle;

Styles for the label of a menu item.

property linkContent

linkContent?: IStyle;

Styles for the content inside the button/link of the menuItem.

property linkContentMenu

linkContentMenu?: IStyle;

Styles for a menu item that is a link.

property root

root?: IStyle;

Style for the root element.

property screenReaderText

screenReaderText?: IStyle;

Styles for hidden screen reader text.

property secondaryText

secondaryText?: IStyle;

Styles for the secondary text of a menu item.

property splitContainer

splitContainer?: IStyle;

Styles for the container of a split menu item.

property splitMenu

splitMenu?: IStyle;

Styles for the menu portion of a split menu item.

property splitPrimary

splitPrimary?: IStyle;

Styles for the primary portion of a split menu item.

property subMenuIcon

subMenuIcon?: IStyle;

Styles for the submenu icon of a menu item.

interface IContextualMenuListProps

interface IContextualMenuListProps {}

property ariaLabel

ariaLabel?: string;

property defaultMenuItemRenderer

defaultMenuItemRenderer: (
    item: IContextualMenuItemRenderProps
) => React.ReactNode;

property hasCheckmarks

hasCheckmarks: boolean;

property hasIcons

hasIcons: boolean;

property items

items: IContextualMenuItem[];

property labelElementId

labelElementId?: string;

property role

role?: string;

property totalItemCount

totalItemCount: number;

interface IContextualMenuProps

interface IContextualMenuProps
    extends IBaseProps<IContextualMenu>,
        IWithResponsiveModeState {}

property alignTargetEdge

alignTargetEdge?: boolean;

If true the positioning logic will prefer to flip edges rather than to nudge the rectangle to fit within bounds, thus making sure the element aligns perfectly with target's alignment edge

property ariaLabel

ariaLabel?: string;

Accessible label for the ContextualMenu's root element (inside the callout).

property beakWidth

beakWidth?: number;

The width of the beak.

property bounds

bounds?:
    | IRectangle
    | ((target?: Target, targetWindow?: Window) => IRectangle | undefined);

The bounding rectangle (or callback that returns a rectangle) which the contextual menu can appear in.

property calloutProps

calloutProps?: ICalloutProps;

Additional custom props for the Callout.

property className

className?: string;

Additional CSS class to apply to the ContextualMenu.

property componentRef

componentRef?: IRefObject<IContextualMenu>;

Optional callback to access the IContextualMenu interface. Use this instead of ref for accessing the public methods and properties of the component.

property contextualMenuItemAs

contextualMenuItemAs?:
    | React.ComponentClass<IContextualMenuItemProps>
    | React.FunctionComponent<IContextualMenuItemProps>;

Custom component to use for rendering individual menu items.

property coverTarget

coverTarget?: boolean;

If true, the menu will be positioned to cover the target. If false, it will be positioned next to the target.

property delayUpdateFocusOnHover

delayUpdateFocusOnHover?: boolean;

If true, the contextual menu will not be updated until focus enters the menu via other means. This will only result in different behavior when shouldFocusOnMount = false.

property directionalHint

directionalHint?: DirectionalHint;

How the menu should be positioned

property directionalHintFixed

directionalHintFixed?: boolean;

If true the position will not change sides in an attempt to fit the ContextualMenu within bounds. It will still attempt to align it to whatever bounds are given.

property directionalHintForRTL

directionalHintForRTL?: DirectionalHint;

How the menu should be positioned in RTL layouts. If not specified, a mirror of directionalHint will be used.

property doNotLayer

doNotLayer?: boolean;

If true do not render on a new layer. If false render on a new layer.

property focusZoneProps

focusZoneProps?: IFocusZoneProps;

Props to pass down to the FocusZone. NOTE: the default FocusZoneDirection will be used unless a direction is specified in the focusZoneProps (even if other focusZoneProps are defined)

property gapSpace

gapSpace?: number;

The gap between the ContextualMenu and the target

property getMenuClassNames

getMenuClassNames?: (
    theme: ITheme,
    className?: string
) => IContextualMenuClassNames;

Method to provide the classnames to style the contextual menu.
Deprecated
Use styles instead to leverage mergeStyles API.

property hidden

hidden?: boolean;

If true, renders the ContextualMenu in a hidden state. Use this flag, rather than rendering a ContextualMenu conditionally based on visibility, to improve rendering performance when it becomes visible. Note: When ContextualMenu is hidden its content will not be rendered. It will only render once the ContextualMenu is visible.

property id

id?: string;

ID for the ContextualMenu's root element (inside the callout). Should be used for aria-owns and other such uses, rather than direct reference for programmatic purposes.

property isBeakVisible

isBeakVisible?: boolean;

If true then the beak is visible. If false it will not be shown.

property isSubMenu

isSubMenu?: boolean;

Whether this menu is a submenu of another menu.

property items

items: IContextualMenuItem[];

Menu items to display.

property labelElementId

labelElementId?: string;

Used as aria-labelledby for the menu element inside the callout.

property onDismiss

onDismiss?: (
    ev?: React.MouseEvent | React.KeyboardEvent,
    dismissAll?: boolean
) => void;

Callback when the ContextualMenu tries to close. If dismissAll is true then all submenus will be dismissed.

property onItemClick

onItemClick?: (
    ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
    item?: IContextualMenuItem
) => boolean | void;

Click handler which is invoked if onClick is not passed for individual contextual menu item. Returning true will dismiss the menu even if ev.preventDefault() was called.

property onMenuDismissed

onMenuDismissed?: (contextualMenu?: IContextualMenuProps) => void;

Callback for when the menu is being closed (removing from the DOM).

property onMenuOpened

onMenuOpened?: (contextualMenu?: IContextualMenuProps) => void;

Callback for when the menu has been opened.

property onRenderMenuList

onRenderMenuList?: IRenderFunction<IContextualMenuListProps>;

Method to override the render of the list of menu items.

property onRenderSubMenu

onRenderSubMenu?: IRenderFunction<IContextualMenuProps>;

Custom render function for a submenu.

property onRestoreFocus

onRestoreFocus?: (options: {
    originalElement?: HTMLElement | Window;
    containsFocus: boolean;
    documentContainsFocus: boolean;
}) => void;

Called when the component is unmounting, and focus needs to be restored. Argument passed down contains two variables, the element that the underlying popup believes focus should go to and whether or not the popup currently contains focus. If this prop is provided, focus will not be restored automatically, you'll need to call originalElement.focus()

property shouldFocusOnContainer

shouldFocusOnContainer?: boolean;

Whether to focus on the contextual menu container (as opposed to the first menu item).

property shouldFocusOnMount

shouldFocusOnMount?: boolean;

Whether to focus on the menu when mounted.

property shouldUpdateWhenHidden

shouldUpdateWhenHidden?: boolean;

If true, the menu will be updated even when hidden=true. Note that this will consume resources to update even when nothing is being shown to the user. This might be helpful if your updates are small and you want the menu to display quickly when hidden is set to false.

property styles

styles?: IStyleFunctionOrObject<
    IContextualMenuStyleProps,
    IContextualMenuStyles
>;

Call to provide customized styling that will layer on top of the variant rules.

property subMenuHoverDelay

subMenuHoverDelay?: number;

Delay (in milliseconds) to wait before expanding / dismissing a submenu on mouseEnter or mouseLeave

property target

target?: Target;

The target that the ContextualMenu should try to position itself based on. It can be either an element, a query selector string resolving to a valid element, or a MouseEvent. If a MouseEvent is given, the origin point of the event will be used.

property theme

theme?: ITheme;

Theme provided by higher-order component.

property title

title?: string;

Title to be displayed at the top of the menu, above the items.

property useTargetAsMinWidth

useTargetAsMinWidth?: boolean;

If true the context menu will have a minimum width equal to the width of the target element

property useTargetWidth

useTargetWidth?: boolean;

If true the context menu will render as the same width as the target element

interface IContextualMenuRenderItem

interface IContextualMenuRenderItem {}

property dismissMenu

dismissMenu: (dismissAll?: boolean) => void;

Dismiss the menu this item belongs to.

property dismissSubMenu

dismissSubMenu: () => void;

Function to close this item's subMenu, if present.

property openSubMenu

openSubMenu: () => void;

Function to open this item's subMenu, if present.

interface IContextualMenuSection

interface IContextualMenuSection extends React.ClassAttributes<any> {}

property bottomDivider

bottomDivider?: boolean;

If set to true, the section will display a divider at the bottom of the section.

property items

items: IContextualMenuItem[];

The items to include inside the section.

property title

title?: string | IContextualMenuItem;

The optional section title.

property topDivider

topDivider?: boolean;

If set to true, the section will display a divider at the top of the section.

interface IContextualMenuState

interface IContextualMenuState {}

property contextualMenuItems

contextualMenuItems?: IContextualMenuItem[];

property contextualMenuTarget

contextualMenuTarget?: Element;

property dismissedMenuItemKey

dismissedMenuItemKey?: string;

property expandedByMouseClick

expandedByMouseClick?: boolean;

True if the menu was expanded by mouse click OR hover (as opposed to by keyboard)

property expandedMenuItemKey

expandedMenuItemKey?: string;

property positions

positions?: any;

property slideDirectionalClassName

slideDirectionalClassName?: string;

property submenuDirection

submenuDirection?: DirectionalHint;

property subMenuId

subMenuId?: string;

property submenuTarget

submenuTarget?: Element;

interface IContextualMenuStyleProps

interface IContextualMenuStyleProps {}

property className

className?: string;

property theme

theme: ITheme;

interface IContextualMenuStyles

interface IContextualMenuStyles {}

property container

container: IStyle;

Style for the container which parents all menu items.

property header

header: IStyle;

Styles for the header item of a ContextualMenu

property list

list: IStyle;

Styles for the list that contains all menuItems.

property root

root: IStyle;

Base styles for the root element of all ContextualMenus.

property subComponentStyles

subComponentStyles: IContextualMenuSubComponentStyles;

SubComponent styles.

property title

title: IStyle;

Style override for the contextual menu title.

interface IContextualMenuSubComponentStyles

interface IContextualMenuSubComponentStyles {}

property callout

callout: IStyleFunctionOrObject<ICalloutContentStyleProps, any>;

Styles for the callout that hosts the ContextualMenu options.

property menuItem

menuItem: IStyleFunctionOrObject<IContextualMenuItemStyleProps, any>;

Styles for each menu item.

interface IDatePicker

interface IDatePicker {}

method focus

focus: () => void;

Sets focus to the text field

method reset

reset: () => void;

Reset the state of the picker to the default

interface IDatePickerProps

interface IDatePickerProps
    extends IBaseProps<IDatePicker>,
        React.HTMLAttributes<HTMLElement> {}

property allFocusable

allFocusable?: boolean;

Allows all elements to be focused, including disabled ones

property allowTextInput

allowTextInput?: boolean;

Whether the DatePicker allows input a date string directly or not

property ariaLabel

ariaLabel?: string;

Aria Label for TextField of the DatePicker for screen reader users.

property borderless

borderless?: boolean;

Determines if DatePicker has a border.

property calendarAs

calendarAs?: IComponentAs<ICalendarProps>;

Custom Calendar to be used for date picking

property calendarProps

calendarProps?: ICalendarProps;

Pass calendar props to calendar component

property calloutProps

calloutProps?: ICalloutProps;

Pass callout props to callout component

property className

className?: string;

Optional Classname for datepicker root element .

property componentRef

componentRef?: IRefObject<IDatePicker>;

Optional callback to access the IDatePicker interface. Use this instead of ref for accessing the public methods and properties of the component.

property dateTimeFormatter

dateTimeFormatter?: ICalendarFormatDateCallbacks;

Apply additional formating to dates, for example localized date formatting.

property disableAutoFocus

disableAutoFocus?: boolean;

Whether the DatePicker should open automatically when the control is focused

property disabled

disabled?: boolean;

Disabled state of the DatePicker.

property firstDayOfWeek

firstDayOfWeek?: DayOfWeek;

The first day of the week for your locale.

property firstWeekOfYear

firstWeekOfYear?: FirstWeekOfYear;

Defines when the first week of the year should start, FirstWeekOfYear.FirstDay, FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values

property formatDate

formatDate?: (date?: Date) => string;

Optional method to format the chosen date to a string to display in the DatePicker

property highlightCurrentMonth

highlightCurrentMonth?: boolean;

Whether the month picker should highlight the current month

property highlightSelectedMonth

highlightSelectedMonth?: boolean;

Whether the month picker should highlight the selected month

property initialPickerDate

initialPickerDate?: Date;

The initially highlighted date in the calendar picker

property isMonthPickerVisible

isMonthPickerVisible?: boolean;

Whether the month picker is shown beside the day picker or hidden.

property isRequired

isRequired?: boolean;

Whether the DatePicker is a required field or not

property label

label?: string;

Label for the DatePicker

property maxDate

maxDate?: Date;

The maximum allowable date.

property minDate

minDate?: Date;

The minimum allowable date.

property onAfterMenuDismiss

onAfterMenuDismiss?: () => void;

Callback that runs after DatePicker's menu (Calendar) is closed

property onSelectDate

onSelectDate?: (date: Date | null | undefined) => void;

Callback issued when a date is selected

property parseDateFromString

parseDateFromString?: (dateStr: string) => Date | null;

Optional method to parse the text input value to date, it is only useful when allowTextInput is set to true

property pickerAriaLabel

pickerAriaLabel?: string;

Aria label for date picker popup for screen reader users.

property placeholder

placeholder?: string;

Placeholder text for the DatePicker

property showCloseButton

showCloseButton?: boolean;

Whether the CalendarDay close button should be shown or not.

property showGoToToday

showGoToToday?: boolean;

Whether the "Go to today" link should be shown or not

property showMonthPickerAsOverlay

showMonthPickerAsOverlay?: boolean;

Show month picker on top of date picker when visible.

property showWeekNumbers

showWeekNumbers?: boolean;

Whether the calendar should show the week number (weeks 1 to 53) before each week row

property strings

strings?: IDatePickerStrings;

Localized strings to use in the DatePicker

property styles

styles?: IStyleFunctionOrObject<IDatePickerStyleProps, IDatePickerStyles>;

Call to provide customized styling that will layer on top of the variant rules.

property tabIndex

tabIndex?: number;

The tabIndex of the TextField

property textField

textField?: ITextFieldProps;

Pass textField props to textField component. Prop name is "textField" for compatiblity with upcoming slots work.

property theme

theme?: ITheme;

Theme provided by High-Order Component.

property today

today?: Date;

Value of today. If null, current time in client machine will be used.

property underlined

underlined?: boolean;

Whether or not the Textfield of the DatePicker is underlined.

property value

value?: Date;

Default value of the DatePicker, if any

interface IDatePickerState

interface IDatePickerState {}

property errorMessage

errorMessage?: string;

property formattedDate

formattedDate?: string;

property isDatePickerShown

isDatePickerShown?: boolean;

property selectedDate

selectedDate?: Date;

interface IDatePickerStrings

interface IDatePickerStrings extends ICalendarStrings {}

property invalidInputErrorMessage

invalidInputErrorMessage?: string;

Error message to render for TextField if input date string parsing fails.

property isOutOfBoundsErrorMessage

isOutOfBoundsErrorMessage?: string;

Error message to render for TextField if date boundary (minDate, maxDate) validation fails.

property isRequiredErrorMessage

isRequiredErrorMessage?: string;

Error message to render for TextField if isRequired validation fails.

interface IDatePickerStyleProps

interface IDatePickerStyleProps {}

property className

className?: string;

Accept custom classNames

property disabled

disabled?: boolean;

property isDatePickerShown

isDatePickerShown?: boolean;

property label

label?: boolean;

property theme

theme: ITheme;

Theme provided by High-Order Component.

property underlined

underlined?: boolean;

interface IDatePickerStyles

interface IDatePickerStyles {}

property callout

callout: IStyle;

property icon

icon: IStyle;

property readOnlyPlaceholder

readOnlyPlaceholder?: IStyle;

property readOnlyTextField

readOnlyTextField?: IStyle;

property root

root: IStyle;

Style for the root element.

property textField

textField: IStyle;

property wrapper

wrapper?: IStyle;

interface IDetailsCheckboxProps

interface IDetailsCheckboxProps {}

property checked

checked: boolean;

property theme

theme?: ITheme;

interface IDetailsColumnFilterIconProps

interface IDetailsColumnFilterIconProps extends IIconProps {}

property columnProps

columnProps?: IDetailsColumnProps;

interface IDetailsColumnProps

interface IDetailsColumnProps extends React.ClassAttributes<DetailsColumnBase> {}

property cellStyleProps

cellStyleProps?: ICellStyleProps;

Custom styles for cell rendering.

property column

column: IColumn;

The column definition for the component instance.

property columnIndex

columnIndex: number;

The column index for the component instance.

property componentRef

componentRef?: () => void;

A reference to the component instance.

property dragDropHelper

dragDropHelper?: IDragDropHelper | null;

The drag and drop helper for the component instance.

property isDraggable

isDraggable?: boolean;

Whether or not the column can be re-ordered via drag and drop.

property isDropped

isDropped?: boolean;

Whether or not the column has been dropped via drag and drop.

property onColumnClick

onColumnClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => void;

Callback fired when click event occurs.

property onColumnContextMenu

onColumnContextMenu?: (
    column: IColumn,
    ev: React.MouseEvent<HTMLElement>
) => void;

Callback fired on contextual menu event to provide contextual menu UI.

property onRenderColumnHeaderTooltip

onRenderColumnHeaderTooltip?: IRenderFunction<IDetailsColumnRenderTooltipProps>;

Render function for providing a column header tooltip.

property parentId

parentId?: string;

Parent ID used for accessibility label(s).

property setDraggedItemIndex

setDraggedItemIndex?: (itemIndex: number) => void;

Deprecated
use updateDragInfo

property styles

styles?: IStyleFunctionOrObject<IDetailsColumnStyleProps, IDetailsColumnStyles>;

The component styles to respect during render.

property theme

theme?: ITheme;

The theme object to respect during render.

property updateDragInfo

updateDragInfo?: (
    props: {
        itemIndex: number;
    },
    event?: MouseEvent
) => void;

Callback on drag and drop event.

property useFastIcons

useFastIcons?: boolean;

Whether to use fast icon and check components. The icons can't be targeted by customization but are still customizable via class names.

interface IDetailsColumnRenderTooltipProps

interface IDetailsColumnRenderTooltipProps extends ITooltipHostProps {}

property column

column?: IColumn;

Information about the column for which the tooltip is being rendered. Use this to format status information about the column, such as its filter or sort state.

interface IDetailsColumnStyles

interface IDetailsColumnStyles {}

property accessibleLabel

accessibleLabel: IStyle;

Styleable label region.

property borderAfterDropping

borderAfterDropping: IStyle;

Styleable border region after drag & drop.

property borderWhileDragging

borderWhileDragging: IStyle;

Styleable border while drag & drop occurs.

property cellName

cellName: IStyle;

Styleable cell name region.

property cellTitle

cellTitle: IStyle;

Styleable cell title region.

property cellTooltip

cellTooltip: IStyle;

Styleable cell tooltip region.

property filterChevron

filterChevron: IStyle;

Styleable filter glyph.

property gripperBarVerticalStyle

gripperBarVerticalStyle: IStyle;

Styleable resize glyph region.

property iconClassName

iconClassName: IStyle;

Styleable icon region.

property nearIcon

nearIcon: IStyle;

Styleable margin by icon region.

property noBorderAfterDropping

noBorderAfterDropping: IStyle;

Transparent no border region after drag & drop to avoid content shift.

property noBorderWhileDragging

noBorderWhileDragging: IStyle;

Transparent no border region while drag & drop occurs to avoid content shift.

property root

root: IStyle;

Styleable root region.

property sortIcon

sortIcon: IStyle;

Styleable column sort icon region.

interface IDetailsFooterBaseProps

interface IDetailsFooterBaseProps extends IDetailsItemProps {}

interface IDetailsFooterProps

interface IDetailsFooterProps extends IDetailsFooterBaseProps {}

property columns

columns: IColumn[];

Column metadata

property selection

selection: ISelection;

Selection from utilities

property selectionMode

selectionMode: SelectionMode;

Selection mode

interface IDetailsGroupDividerProps

interface IDetailsGroupDividerProps extends IGroupDividerProps, IDetailsItemProps {}

interface IDetailsGroupRenderProps

interface IDetailsGroupRenderProps extends IGroupRenderProps {}

property groupedListAs

groupedListAs?: IComponentAs<IGroupedListProps>;

property onRenderFooter

onRenderFooter?: IRenderFunction<IDetailsGroupDividerProps>;

property onRenderHeader

onRenderHeader?: IRenderFunction<IDetailsGroupDividerProps>;

interface IDetailsHeader

interface IDetailsHeader {}

property focus

focus: () => boolean;

sets focus into the header

interface IDetailsHeaderBaseProps

interface IDetailsHeaderBaseProps
    extends React.ClassAttributes<DetailsHeaderBase>,
        IDetailsItemProps {}

property ariaLabel

ariaLabel?: string;

ariaLabel for the entire header

property ariaLabelForSelectAllCheckbox

ariaLabelForSelectAllCheckbox?: string;

ariaLabel for the header checkbox that selects or deselects everything

property ariaLabelForSelectionColumn

ariaLabelForSelectionColumn?: string;

ariaLabel for the selection column

property ariaLabelForToggleAllGroupsButton

ariaLabelForToggleAllGroupsButton?: string;

ariaLabel for expand/collapse group button

property className

className?: string;

Overriding class name

property collapseAllVisibility

collapseAllVisibility?: CollapseAllVisibility;

Whether to collapse for all visibility

property columnReorderOptions

columnReorderOptions?: IColumnReorderOptions;

Column reordering options

property columnReorderProps

columnReorderProps?: IColumnReorderHeaderProps;

Column reordering options

property componentRef

componentRef?: IRefObject<IDetailsHeader>;

Ref to the component itself

property isAllCollapsed

isAllCollapsed?: boolean;

Whether or not all is collapsed

property layoutMode

layoutMode: DetailsListLayoutMode;

Layout mode - fixedColumns or justified

property minimumPixelsForDrag

minimumPixelsForDrag?: number;

Minimum pixels to be moved before dragging is registered

property onColumnAutoResized

onColumnAutoResized?: (column: IColumn, columnIndex: number) => void;

Callback for when column is automatically resized

property onColumnClick

onColumnClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => void;

Callback for when the column is clicked

property onColumnContextMenu

onColumnContextMenu?: (
    column: IColumn,
    ev: React.MouseEvent<HTMLElement>
) => void;

Callback for when the column needs to show a context menu

property onColumnIsSizingChanged

onColumnIsSizingChanged?: (column: IColumn, isSizing: boolean) => void;

Callback for when column sizing has changed

property onColumnResized

onColumnResized?: (
    column: IColumn,
    newWidth: number,
    columnIndex: number
) => void;

Callback for when column is resized

property onRenderColumnHeaderTooltip

onRenderColumnHeaderTooltip?: IRenderFunction<IDetailsColumnRenderTooltipProps>;

Callback to render a tooltip for the column header

property onRenderDetailsCheckbox

onRenderDetailsCheckbox?: IRenderFunction<IDetailsCheckboxProps>;

If provided, can be used to render a custom checkbox

property onToggleCollapseAll

onToggleCollapseAll?: (isAllCollapsed: boolean) => void;

Callback for when collapse all is toggled

property selectAllVisibility

selectAllVisibility?: SelectAllVisibility;

Select all button visibility

property styles

styles?: IStyleFunctionOrObject<IDetailsHeaderStyleProps, IDetailsHeaderStyles>;

Call to provide customized styling that will layer on top of the variant rules.

property theme

theme?: ITheme;

Theme from the Higher Order Component

property useFastIcons

useFastIcons?: boolean;

Whether to use fast icon and check components. The icons can't be targeted by customization but are still customizable via class names.

interface IDetailsHeaderProps

interface IDetailsHeaderProps extends IDetailsHeaderBaseProps {}

property columns

columns: IColumn[];

Column metadata

property selection

selection: ISelection;

Selection from utilities

property selectionMode

selectionMode: SelectionMode;

Selection mode

interface IDetailsHeaderState

interface IDetailsHeaderState {}

property columnResizeDetails

columnResizeDetails?: IColumnResizeDetails;

property isAllCollapsed

isAllCollapsed?: boolean;

property isAllSelected

isAllSelected?: boolean;

property isSizing

isSizing?: boolean;

interface IDetailsHeaderStyles

interface IDetailsHeaderStyles {}

property accessibleLabel

accessibleLabel: IStyle;

property cellIsActionable

cellIsActionable: IStyle;

Deprecated
Not used

property cellIsCheck

cellIsCheck: IStyle;

property cellIsEmpty

cellIsEmpty: IStyle;

Deprecated
Not used

property cellIsGroupExpander

cellIsGroupExpander: IStyle;

property cellIsResizing

cellIsResizing: IStyle;

property cellSizer

cellSizer: IStyle;

property cellSizerEnd

cellSizerEnd: IStyle;

property cellSizerStart

cellSizerStart: IStyle;

property cellWrapperPadded

cellWrapperPadded: IStyle;

Deprecated
Not used

property check

check: IStyle;

property checkTooltip

checkTooltip: IStyle;

property collapseButton

collapseButton: IStyle;

property dropHintCaretStyle

dropHintCaretStyle: IStyle;

property dropHintCircleStyle

dropHintCircleStyle: IStyle;

property dropHintLineStyle

dropHintLineStyle: IStyle;

property dropHintStyle

dropHintStyle: IStyle;

property root

root: IStyle;

property sizingOverlay

sizingOverlay: IStyle;

interface IDetailsItemProps

interface IDetailsItemProps {}

property cellStyleProps

cellStyleProps?: ICellStyleProps;

Rules for rendering column cells.

property checkboxVisibility

checkboxVisibility?: CheckboxVisibility | undefined;

Checkbox visibility

property columns

columns?: IColumn[];

Column metadata

property groupNestingDepth

groupNestingDepth?: number;

Nesting depth of a grouping

property indentWidth

indentWidth?: number | undefined;

How much to indent

property rowWidth

rowWidth?: number;

Minimum width of the row.

property selection

selection?: ISelection | undefined;

Selection from utilities

property selectionMode

selectionMode?: SelectionMode | undefined;

Selection mode

property viewport

viewport?: IViewport | undefined;

View port of the virtualized list
Deprecated
use rowWidth instead

interface IDetailsList

interface IDetailsList extends IList {}

property focusIndex

focusIndex: (
    index: number,
    forceIntoFirstElement?: boolean,
    measureItem?: (itemIndex: number) => number,
    scrollToMode?: ScrollToMode
) => void;

Scroll to and focus the item at the given index. focusIndex will call scrollToIndex on the specified index.
Parameter index
Index of item to scroll to
Parameter forceIntoFirstElement
If true, focus will be set to the first focusable child element of the item rather than the item itself.
Parameter measureItem
Optional callback to measure the height of an individual item
Parameter scrollToMode
Optional setting to determine where in the window the item should be scrolled to when focused.

property forceUpdate

forceUpdate: () => void;

Ensures that the list content is updated. Call this in cases where the list prop updates don't change, but the list still needs to be re-evaluated. For example, if a sizer bar is adjusted and causes the list width to change, you can call this to force a re-evaluation. Be aware that this can be an expensive operation and should be done sparingly.

property getStartItemIndexInView

getStartItemIndexInView: () => number;

Get the start index of the page that is currently in view

interface IDetailsListCheckboxProps

interface IDetailsListCheckboxProps extends IDetailsCheckboxProps {}

interface IDetailsListProps

interface IDetailsListProps extends IBaseProps<IDetailsList>, IWithViewportProps {}

property ariaLabel

ariaLabel?: string;

Accessible label describing or summarizing the list.

property ariaLabelForGrid

ariaLabelForGrid?: string;

Accessible label for the grid within the list.

property ariaLabelForListHeader

ariaLabelForListHeader?: string;

Accessible label for the list header.

property ariaLabelForSelectAllCheckbox

ariaLabelForSelectAllCheckbox?: string;

Accessible label for the select all checkbox.

property ariaLabelForSelectionColumn

ariaLabelForSelectionColumn?: string;

Accessible label for the name of the selection column.

property cellStyleProps

cellStyleProps?: ICellStyleProps;

Props impacting the render style of cells. Since these have an impact on calculated column widths, they are handled separately from normal theme styling, but they are passed to the styling system.

property checkboxCellClassName

checkboxCellClassName?: string;

Class name to add to the cell of a checkbox.

property checkboxVisibility

checkboxVisibility?: CheckboxVisibility;

Controls the visibility of selection check box.

property checkButtonAriaLabel

checkButtonAriaLabel?: string;

Accessible label for the row check button, e.g. "select row"

property checkButtonGroupAriaLabel

checkButtonGroupAriaLabel?: string;

Accessible label for the group header check button, e.g. "select section".

property className

className?: string;

Class name to add to the root element.

property columnReorderOptions

columnReorderOptions?: IColumnReorderOptions;

Options for column reordering using drag and drop.

property columns

columns?: IColumn[];

column defitions. If none are provided, default columns will be created based on the items' properties.

property compact

compact?: boolean;

Whether to render in compact mode.

property componentRef

componentRef?: IRefObject<IDetailsList>;

Callback to access the IDetailsList interface. Use this instead of ref for accessing the public methods and properties of the component.

property constrainMode

constrainMode?: ConstrainMode;

Controls how the list contrains overflow.

property disableSelectionZone

disableSelectionZone?: boolean;

Whether to disable the built-in SelectionZone, so the host component can provide its own.

property dragDropEvents

dragDropEvents?: IDragDropEvents;

Map of callback functions related to row drag and drop functionality.

property enableUpdateAnimations

enableUpdateAnimations?: boolean;

Whether to animate updates

property enterModalSelectionOnTouch

enterModalSelectionOnTouch?: boolean;

Whether the selection zone should enter modal state on touch.

property flexMargin

flexMargin?: number;

An optional margin for proportional columns, to e.g. account for scrollbars when laying out width.

property getCellValueKey

getCellValueKey?: (item?: any, index?: number, column?: IColumn) => string;

If provided, will be the "default" item column cell value return. A column's getValueKey can override getCellValueKey.

property getGroupHeight

getGroupHeight?: IGroupedListProps['getGroupHeight'];

Callback to override default group height calculation used by list virtualization.

property getKey

getKey?: (item: any, index?: number) => string;

Callback to get the item key, to be used in the selection and on render. Must be provided if sorting or filtering is enabled.

property getRowAriaDescribedBy

getRowAriaDescribedBy?: (item: any) => string;

Callback to get the aria-describedby IDs (space-separated strings) of elements that describe the item.

property getRowAriaLabel

getRowAriaLabel?: (item: any) => string;

Callback to get the aria-label string for a given item.

property groupProps

groupProps?: IDetailsGroupRenderProps;

Override properties to render groups.

property groups

groups?: IGroup[];

Grouping instructions.

property indentWidth

indentWidth?: number;

Override for the indent width used for group nesting.

property initialFocusedIndex

initialFocusedIndex?: number;

Default index to set focus to once the items have rendered and the index exists.

property isHeaderVisible

isHeaderVisible?: boolean;

Controls the visibility of the header.

property isPlaceholderData

isPlaceholderData?: boolean;

Set this to true to indicate that the items being displayed are placeholder data.

property isSelectedOnFocus

isSelectedOnFocus?: boolean;

Determines if an item is selected on focus.

property items

items: any[];

The items to render.

property layoutMode

layoutMode?: DetailsListLayoutMode;

Controls how the columns are adjusted.

property listProps

listProps?: IListProps;

Properties to pass through to the List components being rendered.

property minimumPixelsForDrag

minimumPixelsForDrag?: number;

The minimum mouse move distance to interpret the action as drag event.

office-ui-fabric-react

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Enums

Type Aliases

Namespaces

Variables

variable Announced

variable Breadcrumb

variable ButtonGrid

variable CalloutContent

variable Check

variable CheckBase

variable Checkbox

variable ChoiceGroup

variable ChoiceGroupOption

variable Coachmark

variable COACHMARK_ATTRIBUTE_NAME

variable ColorPicker

variable ColorPickerGridCell

variable CommandBar

variable CommandButton

variable CompactPeoplePicker

variable ContextualMenu

variable ContextualMenuItem

variable DATAKTP_ARIA_TARGET

variable DATAKTP_EXECUTE_TARGET

variable DATAKTP_TARGET

variable DatePicker

variable DEFAULT_CELL_STYLE_PROPS

variable DEFAULT_MASK_CHAR

variable DEFAULT_ROW_HEIGHTS

variable DetailsColumn

variable DetailsHeader

variable DetailsList

variable DetailsRow

variable DetailsRowCheck

variable DetailsRowFields

variable DetailsRowGlobalClassNames

variable Dialog

variable DialogContent

variable DialogFooter

variable DirectionalHint

variable DocumentCard

variable DocumentCardActions

variable DocumentCardActivity

variable DocumentCardDetails

variable DocumentCardImage

variable DocumentCardLocation

variable DocumentCardLogo

variable DocumentCardPreview

variable DocumentCardStatus

variable DocumentCardTitle

variable Dropdown

variable ExpandingCard

variable Fabric

variable Facepile

variable FocusTrapCallout

Parameter props

variable FontIcon

variable Grid

Deprecated

variable GridCell

Deprecated

variable GroupedList

variable GroupedListV2_unstable

variable GroupedListV2FC

variable GroupFooter

variable GroupHeader

variable GroupShowAll

variable GroupSpacer

variable HEX_REGEX

variable HoverCard

variable Icon

variable Image