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.

property onActiveItemChanged

onActiveItemChanged?: (
    item?: any,
    index?: number,
    ev?: React.FocusEvent<HTMLElement>
) => void;

Callback for when an item in the list becomes active by clicking anywhere inside the row or navigating to it with the keyboard.

property onColumnHeaderClick

onColumnHeaderClick?: (
    ev?: React.MouseEvent<HTMLElement>,
    column?: IColumn
) => void;

Callback for when the user clicks on the column header.

property onColumnHeaderContextMenu

onColumnHeaderContextMenu?: (
    column?: IColumn,
    ev?: React.MouseEvent<HTMLElement>
) => void;

Callback for when the user asks for a contextual menu (usually via right click) from a column header.

property onColumnResize

onColumnResize?: (
    column?: IColumn,
    newWidth?: number,
    columnIndex?: number
) => void;

Callback fired on column resize

property onDidUpdate

onDidUpdate?: (detailsList?: DetailsListBase) => void;

Callback for when the list has been updated. Useful for telemetry tracking externally.

property onItemContextMenu

onItemContextMenu?: (item?: any, index?: number, ev?: Event) => void | boolean;

Callback for when the context menu of an item has been accessed. If undefined or false is returned, ev.preventDefault() will be called.

property onItemInvoked

onItemInvoked?: (item?: any, index?: number, ev?: Event) => void;

Callback for when a given row has been invoked (by pressing enter while it is selected.)

property onRenderCheckbox

onRenderCheckbox?: IRenderFunction<IDetailsListCheckboxProps>;

If provided, can be used to render a custom checkbox.

property onRenderDetailsFooter

onRenderDetailsFooter?: IRenderFunction<IDetailsFooterProps>;

An override to render the details footer.

property onRenderDetailsHeader

onRenderDetailsHeader?: IRenderFunction<IDetailsHeaderProps>;

An override to render the details header.

property onRenderItemColumn

onRenderItemColumn?: (
    item?: any,
    index?: number,
    column?: IColumn
) => React.ReactNode;

If provided, will be the "default" item column renderer method. This affects cells within the rows, not the rows themselves. If a column definition provides its own onRender method, that will be used instead of this.

property onRenderMissingItem

onRenderMissingItem?: (
    index?: number,
    rowProps?: IDetailsRowProps
) => React.ReactNode;

Callback for what to render when the item is missing.

property onRenderRow

onRenderRow?: IRenderFunction<IDetailsRowProps>;

Callback to override the default row rendering.

property onRowDidMount

onRowDidMount?: (item?: any, index?: number) => void;

Callback for when a given row has been mounted. Useful for identifying when a row has been rendered on the page.

property onRowWillUnmount

onRowWillUnmount?: (item?: any, index?: number) => void;

Callback for when a given row has been unmounted. Useful for identifying when a row has been removed from the page.

property onShouldVirtualize

onShouldVirtualize?: (props: IListProps) => boolean;

Callback to determine whether the list should be rendered in full, or virtualized.
Virtualization will add and remove pages of items as the user scrolls them into the visible range. This benefits larger list scenarios by reducing the DOM on the screen, but can negatively affect performance for smaller lists.
The default implementation will virtualize when this callback is not provided.

property role

role?: string;

Role for the list.

property rowElementEventMap

rowElementEventMap?: {
    eventName: string;
    callback: (context: IDragDropContext, event?: any) => void;
}[];

Event names and corresponding callbacks that will be registered to rendered row elements.

property selection

selection?: ISelection;

Selection model to track selection state.

property selectionMode

selectionMode?: SelectionMode;

Controls how/if the details list manages selection. Options include none, single, multiple

property selectionPreservedOnEmptyClick

selectionPreservedOnEmptyClick?: boolean;

By default, selection is cleared when clicking on an empty (non-focusable) section of the screen. Setting this value to true overrides that behavior and maintains selection.

property selectionZoneProps

selectionZoneProps?: ISelectionZoneProps;

Additional props to pass through to the SelectionZone created by default.

property setKey

setKey?: string;

A key that uniquely identifies the given items. If provided, the selection will be reset when the key changes.

property shouldApplyApplicationRole

shouldApplyApplicationRole?: boolean;

Whether the role application should be applied to the list.

property styles

styles?: IStyleFunctionOrObject<IDetailsListStyleProps, IDetailsListStyles>;

Custom overrides to the themed or default styles.

property theme

theme?: ITheme;

Theme provided by a 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.

property usePageCache

usePageCache?: boolean;

Whether to enable render page caching. This is an experimental performance optimization that is off by default.

property useReducedRowRenderer

useReducedRowRenderer?: boolean;

Whether to re-render a row only when props changed. Might cause regression when depending on external updates.

property viewport

viewport?: IViewport;

Viewport info, provided by the withViewport decorator.

interface IDetailsListState

interface IDetailsListState {}

property adjustedColumns

adjustedColumns: IColumn[];

property focusedItemIndex

focusedItemIndex: number;

property isCollapsed

isCollapsed?: boolean;

property isSizing

isSizing?: boolean;

property isSomeGroupExpanded

isSomeGroupExpanded?: boolean;

property lastSelectionMode

lastSelectionMode?: SelectionMode;

property lastWidth

lastWidth?: number;

property version

version: {};

A unique object used to force-update the List when it changes.

method getDerivedStateFromProps

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

interface IDetailsListStyles

interface IDetailsListStyles {}

property contentWrapper

contentWrapper: IStyle;

property focusZone

focusZone: IStyle;

property headerWrapper

headerWrapper: IStyle;

property root

root: IStyle;

interface IDetailsRow

interface IDetailsRow {}

interface IDetailsRowBaseProps

interface IDetailsRowBaseProps
    extends Pick<IDetailsListProps, 'onRenderItemColumn' | 'getCellValueKey'>,
        IBaseProps<IDetailsRow>,
        IDetailsItemProps {}

property cellsByColumn

cellsByColumn?: {
    [columnKey: string]: React.ReactNode;
};

Optional pre-rendered content per column. Preferred over onRender or onRenderItemColumn if provided.

property checkboxCellClassName

checkboxCellClassName?: string;

Class name for the checkbox cell

property checkButtonAriaLabel

checkButtonAriaLabel?: string;

Check button's aria label

property className

className?: string;

Overriding class name

property collapseAllVisibility

collapseAllVisibility?: CollapseAllVisibility;

Collapse all visibility

property compact

compact?: boolean;

Whether to render in compact mode

property componentRef

componentRef?: IRefObject<IDetailsRow>;

Ref of the component

property disabled

disabled?: boolean;

whether or not row should be rendered in disabled state

property dragDropEvents

dragDropEvents?: IDragDropEvents;

Handling drag and drop events

property dragDropHelper

dragDropHelper?: IDragDropHelper;

Helper for the drag and drop

property enableUpdateAnimations

enableUpdateAnimations?: boolean;

Whether to animate updates

property eventsToRegister

eventsToRegister?: {
    eventName: string;
    callback: (item?: any, index?: number, event?: any) => void;
}[];

A list of events to register

property flatIndexOffset

flatIndexOffset?: number;

Offset used to calculate the aria-rowindex value based on itemIndex

property getRowAriaDescribedBy

getRowAriaDescribedBy?: (item: any) => string;

Callback for getting the row aria-describedby

property getRowAriaDescription

getRowAriaDescription?: (item: any) => string;

Callback for getting the row aria description

property getRowAriaLabel

getRowAriaLabel?: (item: any) => string;

Callback for getting the row aria label

property group

group?: IGroup;

Group row item belongs to. When using GroupedList, this needs to be passed in order to calculate the correct aria-posinset and aria-setsize values.

property id

id?: string;

Id for row

property item

item: any;

Data source for this component

property itemIndex

itemIndex: number;

Index of the collection of items of the DetailsList

property onDidMount

onDidMount?: (row?: DetailsRowBase) => void;

Callback for did mount for parent

property onRenderCheck

onRenderCheck?: (props: IDetailsRowCheckProps) => JSX.Element;

Callback for rendering a checkbox

property onRenderDetailsCheckbox

onRenderDetailsCheckbox?: IRenderFunction<IDetailsCheckboxProps>;

If provided, can be used to render a custom checkbox

property onWillUnmount

onWillUnmount?: (row?: DetailsRowBase) => void;

Callback for will mount for parent

property role

role?: string;

Role for the row.

property rowFieldsAs

rowFieldsAs?: React.ComponentType<IDetailsRowFieldsProps>;

DOM element into which to render row field

property styles

styles?: IStyleFunctionOrObject<IDetailsRowStyleProps, IDetailsRowStyles>;

Overriding styles to this row

property theme

theme?: ITheme;

Theme provided by styled() function

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.

property useReducedRowRenderer

useReducedRowRenderer?: boolean;

Rerender DetailsRow only when props changed. Might cause regression when depending on external updates.

interface IDetailsRowCheckProps

interface IDetailsRowCheckProps extends React.HTMLAttributes<HTMLElement> {}

property anySelected

anySelected?: boolean;

Is any selected - also true for isSelectionModal

property canSelect

canSelect: boolean;

Can this checkbox be selectable

property checkClassName

checkClassName?: string;

The classname to be passed down to Check component

property className

className?: string;

Optional className to attach to the slider root element.

property compact

compact?: boolean;

Is this in compact mode?

property isHeader

isHeader?: boolean;

Is the check part of the header in a DetailsList

property isVisible

isVisible?: boolean;

Whether or not this checkbox is visible

property onRenderDetailsCheckbox

onRenderDetailsCheckbox?: IRenderFunction<IDetailsCheckboxProps>;

If provided, can be used to render a custom checkbox

property selected

selected?: boolean;

Whether or not this check is selected

property styles

styles?: IStyleFunctionOrObject<
    IDetailsRowCheckStyleProps,
    IDetailsRowCheckStyles
>;

Style override

property theme

theme?: ITheme;

Theme provided by High-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 IDetailsRowCheckStyles

interface IDetailsRowCheckStyles {}

property check

check: IStyle;

Deprecated
Use root (they're applied to the same element)

property isDisabled

isDisabled: IStyle;

property root

root: IStyle;

interface IDetailsRowFieldsProps

interface IDetailsRowFieldsProps extends IOverrideColumnRenderProps {}

Props interface for the DetailsRowFields component.

property cellStyleProps

cellStyleProps?: ICellStyleProps;

Style properties to customize cell render output.

property columns

columns: IColumn[];

Columns metadata

property columnStartIndex

columnStartIndex: number;

Index to start for the column

property compact

compact?: boolean;

whether to render as a compact field

property enableUpdateAnimations

enableUpdateAnimations?: boolean;

property item

item: any;

Data source for this component

property itemIndex

itemIndex: number;

The item index of the collection for the DetailsList

property rowClassNames

rowClassNames: {
    [k in keyof Pick<
        IDetailsRowStyles,
        | 'isMultiline'
        | 'isRowHeader'
        | 'cell'
        | 'cellAnimation'
        | 'cellPadded'
        | 'cellUnpadded'
        | 'fields'
    >]: string;
};

Subset of classnames currently generated in DetailsRow that are used within DetailsRowFields.

property rowHeaderId

rowHeaderId?: string;

Id for the current row's row-header

interface IDetailsRowProps

interface IDetailsRowProps extends IDetailsRowBaseProps {}

property columns

columns: IColumn[];

Column metadata

property selection

selection: ISelection;

Selection from utilities

property selectionMode

selectionMode: SelectionMode;

Selection mode

interface IDetailsRowSelectionState

interface IDetailsRowSelectionState {}

property isSelected

isSelected: boolean;

property isSelectionModal

isSelectionModal: boolean;

interface IDetailsRowState

interface IDetailsRowState {}

property columnMeasureInfo

columnMeasureInfo?: {
    index: number;
    column: IColumn;
    onMeasureDone: (measuredWidth: number) => void;
};

property isDropping

isDropping?: boolean;

property selectionState

selectionState: IDetailsRowSelectionState;

interface IDetailsRowStyles

interface IDetailsRowStyles {}

property cell

cell: IStyle;

property cellAnimation

cellAnimation: IStyle;

property cellMeasurer

cellMeasurer: IStyle;

property cellPadded

cellPadded: IStyle;

property cellUnpadded

cellUnpadded: IStyle;

property check

check: IStyle;

property checkCell

checkCell: IStyle;

property checkCover

checkCover: IStyle;

property fields

fields: IStyle;

property isMultiline

isMultiline: IStyle;

property isRowHeader

isRowHeader: IStyle;

property root

root: IStyle;

interface IDialog

interface IDialog {}

interface IDialogContent

interface IDialogContent {}

interface IDialogContentProps

interface IDialogContentProps extends React.ClassAttributes<DialogContentBase> {}

property className

className?: string;

Optional override class name

property closeButtonAriaLabel

closeButtonAriaLabel?: string;

Label to be passed to to aria-label of close button

property componentRef

componentRef?: IRefObject<IDialogContent>;

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

property draggableHeaderClassName

draggableHeaderClassName?: string;

The classname for when the header is draggable

property isMultiline

isMultiline?: boolean;

Is inside a multiline wrapper

property onDismiss

onDismiss?: (ev?: React.MouseEvent<HTMLButtonElement>) => any;

Callback for when the Dialog is dismissed from the close button or light dismiss, before the animation completes.

property responsiveMode

responsiveMode?: ResponsiveMode;

Responsive mode passed in from decorator.

property showCloseButton

showCloseButton?: boolean;

Show an 'x' close button in the upper-right corner

property styles

styles?: IStyleFunctionOrObject<IDialogContentStyleProps, IDialogContentStyles>;

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

property subText

subText?: string;

The subtext to display in the dialog

property subTextId

subTextId?: string;

The Id for subText container

property theme

theme?: ITheme;

Theme provided by HOC.

property title

title?: string | JSX.Element;

The title text to display at the top of the dialog.

property titleId

titleId?: string;

The Id for title container
Deprecated
use the id attribute in titleProps instead.

property titleProps

titleProps?: React.HTMLAttributes<HTMLDivElement>;

The props for title container.

property topButtonsProps

topButtonsProps?: IButtonProps[];

Other top buttons that will show up next to the close button

property type

type?: DialogType;

The type of Dialog to display.

interface IDialogContentStyleProps

interface IDialogContentStyleProps {}

property className

className?: string;

Accept custom classNames

property draggableHeaderClassName

draggableHeaderClassName?: string;

The classname for when the header is draggable

property hidden

hidden?: boolean;

property isClose

isClose?: boolean;

property isLargeHeader

isLargeHeader?: boolean;

property isMultiline

isMultiline?: boolean;

Is inside a multiline wrapper

property theme

theme: ITheme;

Accept theme prop.

interface IDialogContentStyles

interface IDialogContentStyles {}

property button

button: IStyle;

property content

content: IStyle;

Style for the content element.

property header

header: IStyle;

property inner

inner: IStyle;

property innerContent

innerContent: IStyle;

property subText

subText: IStyle;

property title

title: IStyle;

property topButton

topButton: IStyle;

interface IDialogFooter

interface IDialogFooter {}

interface IDialogFooterProps

interface IDialogFooterProps extends React.Props<DialogFooterBase> {}

property className

className?: string;

Optional override class name

property componentRef

componentRef?: IRefObject<IDialogFooter>;

Gets the component ref.

property styles

styles?: IStyleFunctionOrObject<IDialogFooterStyleProps, IDialogFooterStyles>;

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

property theme

theme?: ITheme;

Theme provided by HOC.

interface IDialogFooterStyleProps

interface IDialogFooterStyleProps {}

property className

className?: string;

Optional override class name

property theme

theme: ITheme;

Accept theme prop.

interface IDialogFooterStyles

interface IDialogFooterStyles {}

property action

action: IStyle;

property actions

actions: IStyle;

Style for the actions element.

property actionsRight

actionsRight: IStyle;

interface IDialogProps

interface IDialogProps
    extends React.ClassAttributes<DialogBase>,
        IWithResponsiveModeState,
        IAccessiblePopupProps {}

property ariaDescribedById

ariaDescribedById?: string;

Optional id for aria-DescribedBy
Deprecated
Pass through via modalProps.subtitleAriaId instead.

property ariaLabelledById

ariaLabelledById?: string;

Optional id for aria-LabelledBy
Deprecated
Pass through via modalProps.titleAriaId instead.

property className

className?: string;

Optional class name to be added to the root class
Deprecated
Pass through via modalProps.className instead

property componentRef

componentRef?: IRefObject<IDialog>;

Optional callback to access the IDialog interface. Use this instead of ref for accessing the public methods and properties of the component.
Deprecated
Unused, returns no value

property containerClassName

containerClassName?: string;

Optional override for container class
Deprecated
Pass through via modalProps.className instead

property contentClassName

contentClassName?: string;

Optional override content class
Deprecated
Pass through via dialogContentProps instead as className.

property dialogContentProps

dialogContentProps?: IDialogContentProps;

Props to be passed through to Dialog Content

property hidden

hidden?: boolean;

Whether the dialog is hidden.

property isBlocking

isBlocking?: boolean;

Whether the dialog can be light dismissed by clicking outside the dialog (on the overlay).
Deprecated
Pass through via modalProps instead

property isDarkOverlay

isDarkOverlay?: boolean;

Whether the overlay is dark themed.
Deprecated
Pass through via modalProps instead

property isOpen

isOpen?: boolean;

Whether the dialog is displayed. Deprecated, use hidden instead.
Deprecated
Use hidden instead

property maxWidth

maxWidth?: ICSSRule | ICSSPixelUnitRule;

Sets the maximum width for the dialog. It limits the width property to be larger than the value specified in max-width.

property minWidth

minWidth?: ICSSRule | ICSSPixelUnitRule;

Sets the minimum width of the dialog. It limits the width property to be not smaller than the value specified in min-width.

property modalProps

modalProps?: IModalProps;

Props to be passed through to Modal

property onDismiss

onDismiss?: (ev?: React.MouseEvent<HTMLButtonElement>) => any;

A callback function for when the Dialog is dismissed from the close button or light dismiss. Can also be specified separately in content and modal.

property onDismissed

onDismissed?: () => any;

A callback function which is called after the Dialog is dismissed and the animation is complete.
Deprecated
Pass through via modalProps instead

property onLayerDidMount

onLayerDidMount?: () => void;

A callback function for when the Dialog content is mounted on the overlay layer
Deprecated
Pass through via modalProps.layerProps instead

property onLayerMounted

onLayerMounted?: () => void;

Deprecated at 0.81.2, use onLayerDidMount instead.
Deprecated
Use onLayerDidMount instead.

property styles

styles?: IStyleFunctionOrObject<IDialogStyleProps, IDialogStyles>;

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

property subText

subText?: string;

The subtext to display in the dialog.
Deprecated
Pass through via dialogContentProps instead.

property theme

theme?: ITheme;

Theme provided by HOC.

property title

title?: string | JSX.Element;

The title text to display at the top of the dialog.
Deprecated
Pass through via dialogContentProps instead.

property topButtonsProps

topButtonsProps?: IButtonProps[];

Other top buttons that will show up next to the close button
Deprecated
Pass through via dialogContentProps instead.

property type

type?: DialogType;

The type of Dialog to display.
Deprecated
Pass through via dialogContentProps instead.

interface IDialogState

interface IDialogState {}

property hasBeenOpened

hasBeenOpened?: boolean;

property id

id?: string;

property isInKeyboardMoveMode

isInKeyboardMoveMode?: boolean;

property isModalMenuOpen

isModalMenuOpen?: boolean;

property isOpen

isOpen?: boolean;

property isVisible

isVisible?: boolean;

property isVisibleClose

isVisibleClose?: boolean;

property modalRectangleTop

modalRectangleTop?: number;

property x

x: number;

property y

y: number;

interface IDialogStyleProps

interface IDialogStyleProps {}

property className

className?: string;

Accept custom classNames

property containerClassName

containerClassName?: string;

Optional override for container class
Deprecated
Pass through via modalProps.className instead.

property contentClassName

contentClassName?: string;

Optional override content class
Deprecated
Pass through via dialogContentProps instead as className.

property dialogDefaultMaxWidth

dialogDefaultMaxWidth?: string | ICSSRule | ICSSPixelUnitRule;

Default max-width for the dialog box.

property dialogDefaultMinWidth

dialogDefaultMinWidth?: string | ICSSRule | ICSSPixelUnitRule;

Default min-width for the dialog box.

property hidden

hidden?: boolean;

Whether the dialog is hidden.

property theme

theme: ITheme;

Accept theme prop.

interface IDialogStyles

interface IDialogStyles {}

property main

main: IStyle;

property root

root: IStyle;

Style for the root element.

interface IDividerAsProps

interface IDividerAsProps extends IIconProps {}

property item

item?: IBreadcrumbItem;

Breadcrumb item to left of the divider to be passed for custom rendering. For overflowed items, it will be last item in the list.

interface IDocumentCard

interface IDocumentCard {}

property focus

focus: () => void;

Sets focus to the DocumentCard.

interface IDocumentCardActions

interface IDocumentCardActions {}

interface IDocumentCardActionsProps

interface IDocumentCardActionsProps
    extends React.ClassAttributes<DocumentCardActionsBase> {}

property actions

actions: IButtonProps[];

The actions available for this document.

property className

className?: string;

Optional override class name

property componentRef

componentRef?: IRefObject<IDocumentCardActions>;

Gets the component ref.

property styles

styles?: IStyleFunctionOrObject<
    IDocumentCardActionsStyleProps,
    IDocumentCardActionsStyles
>;

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

property theme

theme?: ITheme;

Theme provided by HOC.

property views

views?: Number;

The number of views this document has received.

interface IDocumentCardActionsStyleProps

interface IDocumentCardActionsStyleProps {}

property className

className?: string;

Optional override class name

property theme

theme: ITheme;

Accept theme prop.

interface IDocumentCardActionsStyles

interface IDocumentCardActionsStyles {}

property action

action: IStyle;

property root

root: IStyle;

property views

views: IStyle;

property viewsIcon

viewsIcon: IStyle;

interface IDocumentCardActivity

interface IDocumentCardActivity {}

interface IDocumentCardActivityPerson

interface IDocumentCardActivityPerson {}

property allowPhoneInitials

allowPhoneInitials?: boolean;

Whether initials are calculated for phone numbers and number sequences. Example: Set property to true to get initials for project names consisting of numbers only.

property initials

initials?: string;

The user's initials to display in the profile photo area when there is no image.

property initialsColor

initialsColor?: PersonaInitialsColor;

The background color when the user's initials are displayed.

property name

name: string;

The name of the person.

property profileImageSrc

profileImageSrc: string;

Path to the profile photo of the person.

interface IDocumentCardActivityProps

interface IDocumentCardActivityProps
    extends React.ClassAttributes<DocumentCardActivityBase> {}

property activity

activity: string;

Describes the activity that has taken place, such as "Created Feb 23, 2016".

property className

className?: string;

Optional override class name

property componentRef

componentRef?: IRefObject<IDocumentCardActivity>;

Gets the component ref.

property people

people: IDocumentCardActivityPerson[];

One or more people who are involved in this activity.

property styles

styles?: IStyleFunctionOrObject<
    IDocumentCardActivityStyleProps,
    IDocumentCardActivityStyles
>;

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

property theme

theme?: ITheme;

Theme provided by HOC.

interface IDocumentCardActivityStyleProps

interface IDocumentCardActivityStyleProps {}

property className

className?: string;

Optional override class name

property multiplePeople

multiplePeople?: boolean;

Indicates if multiple people are being shown.

property theme

theme: ITheme;

Accept theme prop.

interface IDocumentCardActivityStyles

interface IDocumentCardActivityStyles {}

property activity

activity: IStyle;

property avatar

avatar: IStyle;

property avatars

avatars: IStyle;

property details

details: IStyle;

property name

name: IStyle;

property root

root: IStyle;

interface IDocumentCardDetails

interface IDocumentCardDetails {}

interface IDocumentCardDetailsProps

interface IDocumentCardDetailsProps extends React.Props<DocumentCardDetailsBase> {}

property className

className?: string;

Optional override class name

property componentRef

componentRef?: IRefObject<IDocumentCardDetails>;

Gets the component ref.

property styles

styles?: IStyleFunctionOrObject<
    IDocumentCardDetailsStyleProps,
    IDocumentCardDetailsStyles
>;

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

property theme

theme?: ITheme;

Theme provided by HOC.

interface IDocumentCardDetailsStyleProps

interface IDocumentCardDetailsStyleProps {}

property className

className?: string;

Optional override class name

property theme

theme: ITheme;

Accept theme prop.

interface IDocumentCardDetailsStyles

interface IDocumentCardDetailsStyles {}

property root

root: IStyle;

interface IDocumentCardImage

interface IDocumentCardImage {}

interface IDocumentCardImageProps

interface IDocumentCardImageProps extends IBaseProps<{}> {}

property className

className?: string;

Optional override class name

property componentRef

componentRef?: IRefObject<IDocumentCardImage>;

Gets the component ref.

property height

height?: number;

If provided, forces the preview image to be this height.

property iconProps

iconProps?: IIconProps;

The props for the icon associated with this document type.

property imageFit

imageFit?: ImageFit;

Used to determine how to size the image to fit the dimensions of the component. If both dimensions are provided, then the image is fit using ImageFit.scale, otherwise ImageFit.none is used.

property imageSrc

imageSrc?: string;

Path to the preview image.

property styles

styles?: IStyleFunctionOrObject<
    IDocumentCardImageStyleProps,
    IDocumentCardImageStyles
>;

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

property theme

theme?: ITheme;

Theme provided by HOC.

property width

width?: number;

If provided, forces the preview image to be this width.

interface IDocumentCardImageStyleProps

interface IDocumentCardImageStyleProps extends IDocumentCardImageProps {}

interface IDocumentCardImageStyles

interface IDocumentCardImageStyles {}

property centeredIcon

centeredIcon: IStyle;

property centeredIconWrapper

centeredIconWrapper: IStyle;

property cornerIcon

cornerIcon: IStyle;

property root

root: IStyle;

interface IDocumentCardLocation

interface IDocumentCardLocation {}

interface IDocumentCardLocationProps

interface IDocumentCardLocationProps
    extends React.ClassAttributes<DocumentCardLocationBase> {}

property ariaLabel

ariaLabel?: string;

Aria label for the link to the document location.

property className

className?: string;

Optional override class name

property componentRef

componentRef?: IRefObject<IDocumentCardLocation>;

Gets the component ref.

property location

location: string;

Text for the location of the document.

property locationHref

locationHref?: string;

URL to navigate to for this location.

property onClick

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

Function to call when the location is clicked.

property styles

styles?: IStyleFunctionOrObject<
    IDocumentCardLocationStyleProps,
    IDocumentCardLocationStyles
>;

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

property theme

theme?: ITheme;

Theme provided by HOC.

interface IDocumentCardLocationStyleProps

interface IDocumentCardLocationStyleProps {}

property className

className?: string;

Optional override class name

property theme

theme: ITheme;

Accept theme prop.

interface IDocumentCardLocationStyles

interface IDocumentCardLocationStyles {}

property root

root: IStyle;

interface IDocumentCardLogo

interface IDocumentCardLogo {}

interface IDocumentCardLogoProps

interface IDocumentCardLogoProps
    extends React.ClassAttributes<DocumentCardLogoBase> {}

property className

className?: string;

Optional override class name

property componentRef

componentRef?: IRefObject<IDocumentCardLogo>;

Gets the component ref.

property logoIcon

logoIcon: string;

Describes DocumentCard Logo badge.

property logoName

logoName?: string;

Describe Logo name, optional.

property styles

styles?: IStyleFunctionOrObject<
    IDocumentCardLogoStyleProps,
    IDocumentCardLogoStyles
>;

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

property theme

theme?: ITheme;

Theme provided by HOC.

interface IDocumentCardLogoStyleProps

interface IDocumentCardLogoStyleProps {}

property className

className?: string;

Optional override class name

property theme

theme: ITheme;

Accept theme prop.

interface IDocumentCardLogoStyles

interface IDocumentCardLogoStyles {}

property root

root: IStyle;

interface IDocumentCardPreview

interface IDocumentCardPreview {}

interface IDocumentCardPreviewImage

interface IDocumentCardPreviewImage {}

property accentColor

accentColor?: string;

Hex color value of the line below the preview, which should correspond to the document type.
Deprecated at v4.17.1, to be removed at >= v5.0.0.
Deprecated
To be removed at v5.0.0.

property componentRef

componentRef?: IRefObject<{}>;

Gets the component ref.

property errorImageSrc

errorImageSrc?: string;

Deprecated at v1.3.6, to be removed at >= v2.0.0.
Deprecated
To be removed at v2.0.0.

property height

height?: number;

If provided, forces the preview image to be this height.

property iconSrc

iconSrc?: string;

Path to the icon associated with this document type.

property imageFit

imageFit?: ImageFit;

Used to determine how to size the image to fit the dimensions of the component. If both dimensions are provided, then the image is fit using ImageFit.scale, otherwise ImageFit.none is used.

property linkProps

linkProps?: ILinkProps;

Props to pass to Link component

property name

name?: string;

File name for the document this preview represents.

property previewIconContainerClass

previewIconContainerClass?: string;

The props for the preview icon container classname. If provided, icon container classname will be used..

property previewIconProps

previewIconProps?: IIconProps;

The props for the preview icon. If provided, icon will be rendered instead of image.

property previewImageSrc

previewImageSrc?: string;

Path to the preview image.

property url

url?: string;

URL to view the file.
Deprecated
Use href inside of linkProps instead.

property width

width?: number;

If provided, forces the preview image to be this width.

interface IDocumentCardPreviewProps

interface IDocumentCardPreviewProps extends IBaseProps<{}> {}

property className

className?: string;

Optional override class name

property componentRef

componentRef?: IRefObject<IDocumentCardPreview>;

Gets the component ref.

property getOverflowDocumentCountText

getOverflowDocumentCountText?: (overflowCount: number) => string;

The function return string that will describe the number of overflow documents. such as (overflowCount: number) => +${ overflowCount } more,

property previewImages

previewImages: IDocumentCardPreviewImage[];

One or more preview images to display.

property styles

styles?: IStyleFunctionOrObject<
    IDocumentCardPreviewStyleProps,
    IDocumentCardPreviewStyles
>;

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

property theme

theme?: ITheme;

Theme provided by HOC.

interface IDocumentCardPreviewStyleProps

interface IDocumentCardPreviewStyleProps {}

property className

className?: string;

Optional override class name

property isFileList

isFileList?: boolean;

Is it a list of files rather than a preview image?

property theme

theme: ITheme;

Accept theme prop.

interface IDocumentCardPreviewStyles

interface IDocumentCardPreviewStyles {}

property fileList

fileList: IStyle;

property fileListIcon

fileListIcon: IStyle;

property fileListLink

fileListLink: IStyle;

property fileListOverflowText

fileListOverflowText: IStyle;

property icon

icon: IStyle;

property previewIcon

previewIcon: IStyle;

property root

root: IStyle;

interface IDocumentCardProps

interface IDocumentCardProps
    extends IBaseProps<IDocumentCard>,
        React.HTMLAttributes<HTMLDivElement> {}

property accentColor

accentColor?: string;

Hex color value of the line below the card, which should correspond to the document type. This should only be supplied when using the 'compact' card layout.
Deprecated at v4.17.1, to be removed at >= v5.0.0.
Deprecated
To be removed at v5.0.0.

property children

children?: React.ReactNode;

Child components to render within the card.

property className

className?: string;

Optional override class name

property componentRef

componentRef?: IRefObject<IDocumentCard>;

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

property onClick

onClick?: (ev?: React.SyntheticEvent<HTMLElement>) => void;

Function to call when the card is clicked or keyboard Enter/Space is pushed.

property onClickHref

onClickHref?: string;

A URL to navigate to when the card is clicked. If a function has also been provided, it will be used instead of the URL.

property onClickTarget

onClickTarget?: string;

A target browser context for opening the link. If not specified, will open in the same tab/window.

property role

role?: string;

Aria role assigned to the documentCard (Eg. button, link). Use this to override the default assignment.

property styles

styles?: IStyleFunctionOrObject<IDocumentCardStyleProps, IDocumentCardStyles>;

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

property theme

theme?: ITheme;

Theme provided by HOC.

property type

type?: DocumentCardType;

The type of DocumentCard to display.

interface IDocumentCardStatus

interface IDocumentCardStatus {}

interface IDocumentCardStatusProps

interface IDocumentCardStatusProps extends React.Props<DocumentCardStatusBase> {}

property className

className?: string;

Optional override class name

property componentRef

componentRef?: IRefObject<IDocumentCardStatus>;

Gets the component ref.

property status

status: string;

Describe status information. Required field.

property statusIcon

statusIcon?: string;

Describes DocumentCard status icon.

property styles

styles?: IStyleFunctionOrObject<
    IDocumentCardStatusStyleProps,
    IDocumentCardStatusStyles
>;

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

property theme

theme?: ITheme;

Theme provided by HOC.

interface IDocumentCardStatusStyleProps

interface IDocumentCardStatusStyleProps {}

property className

className?: string;

Optional override class name

property theme

theme: ITheme;

Accept theme prop.

interface IDocumentCardStatusStyles

interface IDocumentCardStatusStyles {}

property root

root: IStyle;

interface IDocumentCardStyleProps

interface IDocumentCardStyleProps {}

property actionable

actionable?: boolean;

True when the card has a click action.

property className

className?: string;

Optional override class name

property compact

compact?: boolean;

Compact variant of the card.

property theme

theme: ITheme;

Accept theme prop.

interface IDocumentCardStyles

interface IDocumentCardStyles {}

property root

root: IStyle;

interface IDocumentCardTitle

interface IDocumentCardTitle {}

interface IDocumentCardTitleProps

interface IDocumentCardTitleProps
    extends React.ClassAttributes<DocumentCardTitleBase> {}

property className

className?: string;

Optional override class name

property componentRef

componentRef?: IRefObject<IDocumentCardTitle>;

Gets the component ref.

property shouldTruncate

shouldTruncate?: boolean;

Whether we truncate the title to fit within the box. May have a performance impact.

property showAsSecondaryTitle

showAsSecondaryTitle?: boolean;

Whether show as title as secondary title style such as smaller font and lighter color.

property styles

styles?: IStyleFunctionOrObject<
    IDocumentCardTitleStyleProps,
    IDocumentCardTitleStyles
>;

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

property theme

theme?: ITheme;

Theme provided by HOC.

property title

title: string;

Title text. If the card represents more than one document, this should be the title of one document and a "+X" string. For example, a collection of four documents would have a string of "Document.docx +3".

interface IDocumentCardTitleStyleProps

interface IDocumentCardTitleStyleProps {}

property className

className?: string;

Optional override class name

property showAsSecondaryTitle

showAsSecondaryTitle?: boolean;

Is this a secondary title?

property theme

theme: ITheme;

Accept theme prop.

interface IDocumentCardTitleStyles

interface IDocumentCardTitleStyles {}

property root

root: IStyle;

interface IDragDropContext

interface IDragDropContext {}

Drag & drop event contextual information.

property data

data: any;

Data associated with drag & drop action.

property index

index: number;

Index of drag & drop action.

property isGroup

isGroup?: boolean;

Whether or not drag & drop region is indivual or group of content.

interface IDragDropEvent

interface IDragDropEvent {}

property isHandled

isHandled?: boolean;

Whether or not the drag & drop event was handled.

interface IDragDropEvents

interface IDragDropEvents {}

Drag & drop event callback interface.

property canDrag

canDrag?: (item?: any) => boolean;

Whether or not drag action is allowed.

property canDragGroups

canDragGroups?: boolean;

Whether the whole group is draggable. This applies after canDrag returns true for the group.

property canDrop

canDrop?: (
    dropContext?: IDragDropContext,
    dragContext?: IDragDropContext
) => boolean;

Whether or not drop action is allowed.

property onDragEnd

onDragEnd?: (item?: any, event?: DragEvent) => void;

On drag end event callback.

property onDragEnter

onDragEnter?: (item?: any, event?: DragEvent) => string;

On drag enter region event callback. Returned string is the css classes that will be added to the entering element.

property onDragLeave

onDragLeave?: (item?: any, event?: DragEvent) => void;

On drag leave region event callback.

property onDragOver

onDragOver?: (item?: any, event?: DragEvent) => void;

On drag over event callback.

property onDragStart

onDragStart?: (
    item?: any,
    itemIndex?: number,
    selectedItems?: any[],
    event?: MouseEvent
) => void;

On drag start event callback.

property onDrop

onDrop?: (item?: any, event?: DragEvent) => void;

On drop event callback.

interface IDragDropHelper

interface IDragDropHelper {}

Helper for subscribing and unsubscribing to drag and drop events on an HTMLElement.

property dispose

dispose: () => void;

Dispose of listeners bound to instance of helper.

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

Subscribe to events on a DOM node with drag and drop configuration.

property unsubscribe

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

Unsubscribe to events registered on a DOM node with key.

interface IDragDropHelperParams

interface IDragDropHelperParams {}

property minimumPixelsForDrag

minimumPixelsForDrag?: number;

property selection

selection: ISelection;

interface IDragDropOptions

interface IDragDropOptions {}

The drag and drop event listener configuration.

property canDrag

canDrag?: (item?: any) => boolean;

Whether or not drag action is allowed.

property canDrop

canDrop?: (
    dropContext?: IDragDropContext,
    dragContext?: IDragDropContext
) => boolean;

Whether or not drop action is allowed.

property context

context: IDragDropContext;

Context associated with drag and drop event.

property eventMap

eventMap?: {
    eventName: string;
    callback: (context: IDragDropContext, event?: any) => void;
}[];

Map of event name to callback function to subscribe to.

property key

key?: string;

Unique key to associate with instance.

property onDragEnd

onDragEnd?: (item?: any, event?: DragEvent) => void;

On drag end event callback.

property onDragOver

onDragOver?: (item?: any, event?: DragEvent) => void;

On drag over element(s) event callback.

property onDragStart

onDragStart?: (
    item?: any,
    itemIndex?: number,
    selectedItems?: any[],
    event?: MouseEvent
) => void;

On drag start event callback.

property onDrop

onDrop?: (item?: any, event?: DragEvent) => void;

On drop event callback.

property selectionIndex

selectionIndex: number;

Selection index on drag and drop event.

property updateDropState

updateDropState: (isDropping: boolean, event: DragEvent) => void;

Callback on drop state update.

interface IDragDropTarget

interface IDragDropTarget {}

property key

key: string;

property options

options: IDragDropOptions;

property root

root: HTMLElement;

interface IDragOptions

interface IDragOptions {}

property closeMenuItemText

closeMenuItemText: string;

The text to use for the modal close menu item

property dragHandleSelector

dragHandleSelector?: string;

Optional selector for the element where the drag can be initiated. If not supplied when isDraggable is true dragging can be initiated by the whole contents of the modal

property keepInBounds

keepInBounds?: boolean;

Whether the draggable content should be prevented from going off-screen

property keyboardMoveIconProps

keyboardMoveIconProps?: IIconProps;

IconProps for the icon used to indicate that the dialog is in keyboard move mode

menu: React.FunctionComponent<IContextualMenuProps>;

The Draggable Control Menu so that the draggable zone can be moved via the keyboard

property moveMenuItemText

moveMenuItemText: string;

The text to use for the modal move menu item

interface IDropdown

interface IDropdown {}

property focus

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

property selectedOptions

readonly selectedOptions: IDropdownOption[];

All selected options

interface IDropdownInternalProps

interface IDropdownInternalProps extends IDropdownProps, IWithResponsiveModeState {}

Internal only props interface to support mixing in responsive mode

interface IDropdownOption

interface IDropdownOption extends ISelectableOption {}

property isSelected

isSelected?: boolean;

Deprecated at v.65.1, use selected instead.
Deprecated
Use selected instead.

interface IDropdownProps

interface IDropdownProps
    extends ISelectableDroppableTextProps<IDropdown, HTMLDivElement> {}

property defaultSelectedKeys

defaultSelectedKeys?: string[] | number[];

Keys that will be initially used to set selected items. This prop is only used when multiSelect is true (use defaultSelectedKey for single select). Mutually exclusive with selectedKeys.

property dropdownWidth

dropdownWidth?: number | 'auto';

Custom width for dropdown. If value is 0, width of the input field is used. If value is 'auto', width of the input field is used by default, and it can grow wider to fit the content.

property isDisabled

isDisabled?: boolean;

Deprecated at v0.52.0, use disabled instead.
Deprecated
Use disabled instead.

property keytipProps

keytipProps?: IKeytipProps;

Optional keytip for this dropdown

property multiSelectDelimiter

multiSelectDelimiter?: string;

When multiple items are selected, this will be used to separate values in the dropdown input.

property notifyOnReselect

notifyOnReselect?: boolean;

If true, onChange will still be called when an already-selected item is clicked again in single select mode. (Normally it would not be called in this case.)

property onChange

onChange?: (
    event: React.FormEvent<HTMLDivElement>,
    option?: IDropdownOption,
    index?: number
) => void;

Callback for when the selected option changes.

property onChanged

onChanged?: (option: IDropdownOption, index?: number) => void;

Deprecated
Use onChange instead.

property onRenderCaretDown

onRenderCaretDown?: IRenderFunction<IDropdownProps>;

Custom renderer for chevron icon

property onRenderLabel

onRenderLabel?: IRenderFunction<IDropdownProps>;

Custom renderer for the label.

property onRenderPlaceholder

onRenderPlaceholder?: IRenderFunction<IDropdownProps>;

Custom renderer for placeholder text

property onRenderPlaceHolder

onRenderPlaceHolder?: IRenderFunction<IDropdownProps>;

Custom renderer for placeholder text
Deprecated
Use onRenderPlaceholder

property onRenderTitle

onRenderTitle?: IRenderFunction<IDropdownOption[]>;

Custom renderer for selected option displayed in input

property options

options: IDropdownOption[];

Options for the dropdown. If using defaultSelectedKey or defaultSelectedKeys, options must be pure for correct behavior.

property placeHolder

placeHolder?: string;

Input placeholder text. Displayed until an option is selected.
Deprecated
Use placeholder

property responsiveMode

responsiveMode?: ResponsiveMode;

By default, the dropdown will render the standard way for screen sizes large and above, or in a panel on small and medium screens. Manually set this prop to override this behavior.

property selectedKeys

selectedKeys?: string[] | number[] | null;

Keys of the selected items, only used when multiSelect is true (use selectedKey for single select). If you provide this, you must maintain selection state by observing onChange events and passing a new prop value in when changed. Passing null will clear the selection. Mutually exclusive with defaultSelectedKeys.

property styles

styles?: IStyleFunctionOrObject<IDropdownStyleProps, IDropdownStyles>;

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

property theme

theme?: ITheme;

Theme provided by higher order component.

interface IDropdownState

interface IDropdownState {}

property calloutRenderEdge

calloutRenderEdge?: RectangleEdge;

property hasFocus

hasFocus: boolean;

Whether the root dropdown element has focus.

property isOpen

isOpen: boolean;

property selectedIndices

selectedIndices: number[];

interface IDropdownStyles

interface IDropdownStyles {}

Represents the stylable areas of the control.

property callout

callout: IStyle;

Refers to the callout that hosts Dropdown options in larger viewports.

property caretDown

caretDown: IStyle;

Refers to the downward pointing caret icon users click on to expand the Dropdown.

property caretDownWrapper

caretDownWrapper: IStyle;

Refers to the wrapping container around the downward pointing caret users click on to expand the Dropdown.

dropdown: IStyle;

Refers to the actual Dropdown element.

property dropdownDivider

dropdownDivider: IStyle;

Refers to the dropdown separator.

property dropdownItem

dropdownItem: IStyle;

Refers to the individual dropdown item.

property dropdownItemDisabled

dropdownItemDisabled: IStyle;

Style for a dropdown item when it is disabled.

property dropdownItemHeader

dropdownItemHeader: IStyle;

Refers to the individual dropdown items that are being rendered as a header.

property dropdownItemHidden

dropdownItemHidden: IStyle;

Style for a dropdown item when it is hidden

property dropdownItems

dropdownItems: IStyle;

Refers to the FocusZone wrapping the individual dropdown items.

property dropdownItemSelected

dropdownItemSelected: IStyle;

Style for a dropdown item when it is being selected.

property dropdownItemSelectedAndDisabled

dropdownItemSelectedAndDisabled: IStyle;

Style for a dropdown item when it is both selected and disabled.

property dropdownItemsWrapper

dropdownItemsWrapper: IStyle;

Refers to the element that wraps dropdownItems.

property dropdownOptionText

dropdownOptionText: IStyle;

Refers to the text element that renders the actual dropdown item/option text. This would be wrapped by the element referred to by dropdownItem.

property errorMessage

errorMessage: IStyle;

Refers to the error message being rendered under the Dropdown (if any).

property label

label: IStyle;

Refers to the label associated with the dropdown. This is enclosed by the root.

property panel

panel: IStyle;

Refers to the panel that hosts the Dropdown options in small viewports.
Deprecated
Use subComponentStyles.panel instead.

property root

root: IStyle;

Root element of the Dropdown (includes Label and the actual Dropdown).

property subComponentStyles

subComponentStyles: IDropdownSubComponentStyles;

Subcomponent styles.

property title

title: IStyle;

Refers to the primary title of the Dropdown (rendering the selected options/placeholder/etc.).

interface IDropdownSubComponentStyles

interface IDropdownSubComponentStyles {}

property label

label: IStyleFunctionOrObject<ILabelStyleProps, ILabelStyles>;

Refers to the primary label for the Dropdown.

property multiSelectItem

multiSelectItem: IStyleFunctionOrObject<ICheckboxStyleProps, ICheckboxStyles>;

Refers to the individual dropdown item when the multiSelect prop is true.

property panel

panel: IStyleFunctionOrObject<IPanelStyleProps, IPanelStyles>;

Refers to the panel that hosts the Dropdown options in small viewports.

interface IDropHintDetails

interface IDropHintDetails {}

property dropHintElementRef

dropHintElementRef: HTMLElement;

property endX

endX: number;

property originX

originX: number;

property startX

startX: number;

interface IEditingSelectedPeopleItemProps

interface IEditingSelectedPeopleItemProps extends ISelectedPeopleItemProps {}

property floatingPickerProps

floatingPickerProps?: IBaseFloatingPickerProps<IPersonaProps>;

property getEditingItemText

getEditingItemText?: (item: IExtendedPersonaProps) => string;

property onEditingComplete

onEditingComplete: (oldItem: any, newItem: any) => void;

property onRenderFloatingPicker

onRenderFloatingPicker?: React.ComponentType<
    IBaseFloatingPickerProps<IPersonaProps>
>;

interface IEditingSelectedPeopleItemStyles

interface IEditingSelectedPeopleItemStyles {}

property input

input: IStyle;

property root

root: IStyle;

interface IEditingSelectedPeopleItemStylesProps

interface IEditingSelectedPeopleItemStylesProps {}

interface IElementPosition

interface IElementPosition {}

Do not call methods from this directly, use either positionCallout or positionElement or make another function that utilizes them. START Private functions and interfaces

property alignmentEdge

alignmentEdge: RectangleEdge | undefined;

property elementRectangle

elementRectangle: Rectangle;

property targetEdge

targetEdge: RectangleEdge;

interface IElementPositionInfo

interface IElementPositionInfo extends IElementPosition {}

property targetRectangle

targetRectangle: Rectangle;

interface IEntityRect

interface IEntityRect {}

An interface for the cached dimensions of entity inner host.

property height

height: number;

property width

width: number;

interface IExpandingCard

interface IExpandingCard {}

interface IExpandingCardProps

interface IExpandingCardProps
    extends IBaseCardProps<
        IExpandingCard,
        IExpandingCardStyles,
        IExpandingCardStyleProps
    > {}

ExpandingCard component props.

property compactCardHeight

compactCardHeight?: number;

Height of compact card

property expandedCardHeight

expandedCardHeight?: number;

Height of expanded card

property mode

mode?: ExpandingCardMode;

Use to open the card in expanded format and not wait for the delay

property onRenderCompactCard

onRenderCompactCard?: IRenderFunction<any>;

Render function to populate compact content area

property onRenderExpandedCard

onRenderExpandedCard?: IRenderFunction<any>;

Render function to populate expanded content area

interface IExpandingCardState

interface IExpandingCardState {}

property firstFrameRendered

firstFrameRendered: boolean;

property needsScroll

needsScroll: boolean;

interface IExpandingCardStyleProps

interface IExpandingCardStyleProps extends IBaseCardStyleProps {}

property compactCardHeight

compactCardHeight?: number;

Height of the compact section of the card.

property expandedCardFirstFrameRendered

expandedCardFirstFrameRendered?: boolean;

Boolean flag that expanded card is in Expanded.mode === expanded && first frame was rendered.

property expandedCardHeight

expandedCardHeight?: number;

Height of the expanded section of the card.

property needsScroll

needsScroll?: boolean;

Whether the content of the expanded card overflows vertically.

interface IExpandingCardStyles

interface IExpandingCardStyles extends IBaseCardStyles {}

property compactCard

compactCard?: IStyle;

Style for the main card element.

property expandedCard

expandedCard?: IStyle;

Base Style for the expanded card content.

property expandedCardScroll

expandedCardScroll?: IStyle;

Style for the expanded card scroll content.

interface IExtendedPeoplePickerProps

interface IExtendedPeoplePickerProps
    extends IBaseExtendedPickerProps<IPersonaProps> {}

interface IExtendedPersonaProps

interface IExtendedPersonaProps extends IPersonaProps {}

property blockRecipientRemoval

blockRecipientRemoval?: boolean;

property canExpand

canExpand?: boolean;

property isEditing

isEditing?: boolean;

property isValid

isValid: boolean;

property key

key?: React.Key;

property shouldBlockSelection

shouldBlockSelection?: boolean;

interface IFabricProps

interface IFabricProps extends React.HTMLAttributes<HTMLDivElement> {}

property applyTheme

applyTheme?: boolean;

Applies the current body background specified in the theme to the root element.

property applyThemeToBody

applyThemeToBody?: boolean;

Applies the current body background specified in the theme to the body element.

property as

as?: React.ElementType;

Overrides the root element type, defaults to div.

property componentRef

componentRef?: IRefObject<{}>;

property dir

dir?: 'rtl' | 'ltr' | 'auto';

Specifies the direction of the content. Will inject a dir attribute, and also ensure that the rtl flag of the contextual theme object is set correctly so that css registered with merge-styles can be auto flipped correctly.

property styles

styles?: IStyleFunctionOrObject<IFabricStyleProps, IFabricStyles>;

Overrides the styles for the component.

property theme

theme?: ITheme;

Injected by the styled HOC wrapper.

interface IFabricStyleProps

interface IFabricStyleProps extends IFabricProps {}

property theme

theme: ITheme;

interface IFabricStyles

interface IFabricStyles {}

property bodyThemed

bodyThemed: IStyle;

property root

root: IStyle;

interface IFacepile

interface IFacepile {}

interface IFacepilePersona

interface IFacepilePersona
    extends React.ButtonHTMLAttributes<HTMLButtonElement | HTMLDivElement> {}

property allowPhoneInitials

allowPhoneInitials?: boolean;

Whether initials are calculated for phone numbers and number sequences. Example: Set property to true to get initials for project names consisting of numbers only.

property data

data?: any;

Extra data - not used directly but can be handy for passing additional data to custom event handlers.

property imageInitials

imageInitials?: string;

The user's initials to display in the image area when there is no image.

property imageUrl

imageUrl?: string;

Url to the image to use, should be a square aspect ratio and big enough to fit in the image area.

property initialsColor

initialsColor?: PersonaInitialsColor;

The background color when the user's initials are displayed.

property keytipProps

keytipProps?: IKeytipProps;

Optional keytip for this button that is only added when 'onClick' is defined for the persona

property onClick

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

If provided, persona will be rendered with cursor:pointer and the handler will be called on click.

property onMouseMove

onMouseMove?: (
    ev?: React.MouseEvent<HTMLElement>,
    persona?: IFacepilePersona
) => void;

If provided, the handler will be called on mouse move.

property onMouseOut

onMouseOut?: (
    ev?: React.MouseEvent<HTMLElement>,
    persona?: IFacepilePersona
) => void;

If provided, the handler will be called when mouse moves out of the component.

property personaName

personaName?: string;

Name of the person.

interface IFacepileProps

interface IFacepileProps extends React.ClassAttributes<FacepileBase> {}

property addButtonProps

addButtonProps?: IButtonProps;

Button properties for the add face button

property ariaDescription

ariaDescription?: string;

ARIA label for persona list

property ariaLabel

ariaLabel?: string;

Defines the aria label that the screen readers use when focus goes on a list of personas.

property chevronButtonProps

chevronButtonProps?: IButtonProps;

Deprecated at v0.70, use overflowButtonProps instead.
Deprecated
Use overflowButtonProps instead.

property className

className?: string;

Additional css class to apply to the Facepile

property componentRef

componentRef?: IRefObject<IFacepile>;

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

property getPersonaProps

getPersonaProps?: (persona: IFacepilePersona) => IPersonaSharedProps;

Method to access properties on the underlying Persona control

property maxDisplayablePersonas

maxDisplayablePersonas?: number;

Maximum number of personas to show

property onRenderPersona

onRenderPersona?: IRenderFunction<IFacepilePersona>;

Optional custom renderer for the persona, gets called when there is one persona in personas array

property onRenderPersonaCoin

onRenderPersonaCoin?: IRenderFunction<IFacepilePersona>;

Optional custom renderer for the persona coins, gets called when there are multiple persona in personas array

property overflowButtonProps

overflowButtonProps?: IButtonProps;

Properties for the overflow icon

property overflowButtonType

overflowButtonType?: OverflowButtonType;

Type of overflow icon to use

property overflowPersonas

overflowPersonas?: IFacepilePersona[];

Personas to place in the overflow

property personas

personas: IFacepilePersona[];

Array of IPersonaProps that define each Persona.

property personaSize

personaSize?: PersonaSize;

Size to display the personas

property showAddButton

showAddButton?: boolean;

Show add person button

property showTooltip

showTooltip?: boolean;

Whether the default tooltip (the persona name) is shown using the title prop. Set this to false if you'd like to display a custom tooltip, for example using a custom renderer and TooltipHost

property styles

styles?: IStyleFunctionOrObject<IFacepileStyleProps, IFacepileStyles>;

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 IFacepileStyleProps

interface IFacepileStyleProps {}

property className

className?: string;

Accept custom classNames

property spacingAroundItemButton

spacingAroundItemButton?: number;

Pixel value for spacing around button. Number value set in pixels

property theme

theme: ITheme;

Theme provided by High-Order Component.

interface IFacepileStyles

interface IFacepileStyles {}

property addButton

addButton: IStyle;

property descriptiveOverflowButton

descriptiveOverflowButton: IStyle;

property itemButton

itemButton: IStyle;

property itemContainer

itemContainer: IStyle;

property member

member: IStyle;

property members

members: IStyle;

property overflowButton

overflowButton: IStyle;

property overflowInitialsIcon

overflowInitialsIcon: IStyle;

property root

root: IStyle;

Style for the root element.

property screenReaderOnly

screenReaderOnly: IStyle;

interface IFocusTrapCalloutProps

interface IFocusTrapCalloutProps extends ICalloutProps {}

property focusTrapProps

focusTrapProps?: IFocusTrapZoneProps;

Optional props to be passed on to FocusTrapZone

interface IFocusTrapZone

interface IFocusTrapZone {}

property focus

focus: () => void;

Sets focus to a descendant in the Trap Zone. See firstFocusableSelector and focusPreviouslyFocusedInnerElement for details.

interface IFocusTrapZoneProps

interface IFocusTrapZoneProps extends React.HTMLAttributes<HTMLDivElement> {}

property ariaLabelledBy

ariaLabelledBy?: string;

Sets the aria-labelledby attribute.

property componentRef

componentRef?: IRefObject<IFocusTrapZone>;

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

property disabled

disabled?: boolean;

Whether to disable the FocusTrapZone's focus trapping behavior.

property disableFirstFocus

disableFirstFocus?: boolean;

Do not put focus onto the first element inside the focus trap zone.

property elementToFocusOnDismiss

elementToFocusOnDismiss?: HTMLElement;

Sets the element to focus on when exiting the FocusTrapZone.

property enableAriaHiddenSiblings

enableAriaHiddenSiblings?: boolean;

Puts aria-hidden=true on all non-ancestors of the current element, for screen readers. This is an experimental feature that will be graduated to default behavior after testing. This flag will be removed with the next major release.

property firstFocusableSelector

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

Class name (not actual selector) for first focusable item. Do not append a dot. Only applies if focusPreviouslyFocusedInnerElement is false.
Deprecated
Use firstFocusableTarget, since it is more generic. firstFocusableTarget takes precendence if supplied.

property firstFocusableTarget

firstFocusableTarget?: string | ((element: HTMLElement) => HTMLElement | null);

Either a full query selector for the first focusable element, or a function to select the focusable element within the area directly.

property focusPreviouslyFocusedInnerElement

focusPreviouslyFocusedInnerElement?: boolean;

Specifies which descendant element to focus when focus() is called. If false, use the first focusable descendant, filtered by the firstFocusableSelector property if present. If true, use the element that was focused when the trap zone last had a focused descendant (or fall back to the first focusable descendant if the trap zone has never been focused).

property forceFocusInsideTrap

forceFocusInsideTrap?: boolean;

Whether the focus trap zone should force focus to stay inside of it.

property ignoreExternalFocusing

ignoreExternalFocusing?: boolean;

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

property isClickableOutsideFocusTrap

isClickableOutsideFocusTrap?: boolean;

Whether clicks are allowed outside this FocusTrapZone.

interface IFontIconProps

interface IFontIconProps extends React.HTMLAttributes<HTMLElement> {}

Props for a basic icon component which only supports font glyphs and can't be targeted by customizations.

property className

className?: string;

Custom class to style the icon.

property iconName

iconName?: string;

The name of the icon to use from the icon font. If string is empty, a placeholder icon will be rendered the same width as an icon.

interface IGap

interface IGap extends IShimmerElement {}

Gap element interface

property height

height?: number;

Sets the height of the shimmer gap in pixels.

property width

width?: number | string;

Gap width value.

interface IGenericItem

interface IGenericItem {}

property imageInitials

imageInitials: string;

property primaryText

primaryText: string;

property ValidationState

ValidationState: ValidationState;

interface IGrid

interface IGrid extends IButtonGrid {}

Deprecated
- use IButtonGrid instead.

interface IGridCellProps

interface IGridCellProps<T> extends IButtonGridCellProps<T> {}

Deprecated
- use IButtonGridCellProps instead

interface IGridProps

interface IGridProps extends IButtonGridProps {}

Deprecated
- use IButtonGridProps instead.

interface IGridStyleProps

interface IGridStyleProps extends IButtonGridStyleProps {}

Deprecated
- use IButtonGridStyleProps instead.

interface IGridStyles

interface IGridStyles extends IButtonGridStyles {}

Deprecated
- use IButtonGridStyles instead.

interface IGroup

interface IGroup {}

property ariaLabel

ariaLabel?: string;

Optional accessibility label (aria-label) attribute that will be stamped on to the element. If none is specified, the arai-label attribute will contain the group name

property children

children?: IGroup[];

Nested groups, if any.

property count

count: number;

How many items should be rendered within the group.

property data

data?: any;

Arbitrary data required to be preserved by the caller.

property hasMoreData

hasMoreData?: boolean;

Optional flag to indicate the group has more data to load than the current group count indicated. This can be used to indicate that a plus should be rendered next to the group count in the header.

property isCollapsed

isCollapsed?: boolean;

If all the items in the group are collapsed.

property isDropEnabled

isDropEnabled?: boolean;

If drag/drop is enabled for the group header.

property isSelected

isSelected?: boolean;

Deprecated at 1.0.0, selection state will be controled by the selection store only.
Deprecated
At 1.0.0, selection state wil be controlled by the selection store only.

property isShowingAll

isShowingAll?: boolean;

If the items within the group are summarized or showing all.

property key

key: string;

Unique identifier for the group.

property level

level?: number;

Number indicating the level of nested groups.

property name

name: string;

Display name for the group, rendered on the header.

property startIndex

startIndex: number;

Start index for the group within the given items.

interface IGroupDividerProps

interface IGroupDividerProps {}

property ariaColSpan

ariaColSpan?: number;

Defines the number of columns a group header needs to span in the case of a grid or treegrid

property ariaPosInSet

ariaPosInSet?: number;

Defines an element's number or position in the current set of listitems or treeitems

property ariaRowCount

ariaRowCount?: number;

Defines the number of items in the current set of grid items

property ariaRowIndex

ariaRowIndex?: number;

Defines an element's number or position in the current set of grid items

property ariaSetSize

ariaSetSize?: number;

Defines the number of items in the current set of listitems or treeitems

property className

className?: string;

Custom className

property compact

compact?: boolean;

Boolean value to indicate if the component should render in compact mode. Set to false by default

property componentRef

componentRef?: IRefObject<{}>;

property expandButtonProps

expandButtonProps?: React.HTMLAttributes<HTMLButtonElement>;

Props for expand/collapse button
Deprecated
Use IGroupHeaderProps.expandButtonProps instead.

property footerText

footerText?: string;

Text to display for the group footer.

property group

group?: IGroup;

The group to be rendered by the header.

property groupIndex

groupIndex?: number;

The index of the group.

property groupLevel

groupLevel?: number;

The indent level of the group.

property groups

groups?: IGroup[];

Stores parent group's children.

property indentWidth

indentWidth?: number;

Width corresponding to a single level. This is multiplied by the groupLevel to get the full spacer width for the group.

property isCollapsedGroupSelectVisible

isCollapsedGroupSelectVisible?: boolean;

Determines if the group selection check box is shown for collapsed groups.

property isGroupLoading

isGroupLoading?: (group: IGroup) => boolean;

Callback to determine if a group has missing items and needs to load them from the server.

property isSelected

isSelected?: boolean;

Deprecated at v.65.1 and will be removed by v 1.0. Use selected instead.
Deprecated
Use selected instead.

property loadingText

loadingText?: string;

Text shown on group headers to indicate the group is being loaded.

property onGroupHeaderClick

onGroupHeaderClick?: (group: IGroup) => void;

Callback for when the group header is clicked.

property onGroupHeaderKeyUp

onGroupHeaderKeyUp?: (
    ev: React.KeyboardEvent<HTMLElement>,
    group: IGroup
) => void;

Callback for when the "keyup" event is fired on the group header .

property onRenderName

onRenderName?: IRenderFunction<IGroupHeaderProps>;

Override which allows the caller to provide a custom renderer for just the name.

property onRenderTitle

onRenderTitle?: IRenderFunction<IGroupHeaderProps>;

Override which allows the caller to provider a custom renderer for the GroupHeader title.

property onToggleCollapse

onToggleCollapse?: (group: IGroup) => void;

Callback for when the group is expanded or collapsed.

property onToggleSelectGroup

onToggleSelectGroup?: (group: IGroup) => void;

Callback for when the group is selected.

property onToggleSummarize

onToggleSummarize?: (group: IGroup) => void;

Callback for when the group "Show All" link is clicked

property selected

selected?: boolean;

If all items in the group are selected.

property selectionMode

selectionMode?: SelectionMode;

The selection mode of the list the group lives within.

property showAllLinkText

showAllLinkText?: string;

Text to display for the group "Show All" link.

property theme

theme?: ITheme;

Theme provided by the Higher Order Component

property viewport

viewport?: IViewport;

A reference to the viewport in which the header is rendered.

interface IGroupedList

interface IGroupedList extends IList {}

property forceUpdate

forceUpdate: () => void;

Ensures that the list content is updated. Call this in cases where the list props 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 toggleCollapseAll

toggleCollapseAll: (allCollapsed: boolean) => void;

Toggles the collapsed state of all the groups in the list.

interface IGroupedListProps

interface IGroupedListProps extends React.ClassAttributes<GroupedListBase> {}

property className

className?: string;

Optional class name to add to the root element.

property compact

compact?: boolean;

Boolean value to indicate if the component should render in compact mode. Set to false by default

property componentRef

componentRef?: IRefObject<IGroupedList>;

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

property dragDropEvents

dragDropEvents?: IDragDropEvents;

Map of callback functions related to drag and drop functionality.

property dragDropHelper

dragDropHelper?: IDragDropHelper;

helper to manage drag/drop across item and groups

property eventsToRegister

eventsToRegister?: {
    eventName: string;
    callback: (context: IDragDropContext, event?: any) => void;
}[];

Event names and corresponding callbacks that will be registered to groups and rendered elements

property focusZoneProps

focusZoneProps?: IFocusZoneProps;

Optional properties to pass through to the FocusZone.

property getGroupHeight

getGroupHeight?: (group: IGroup, groupIndex: number) => number;

Optional function to override default group height calculation used by list virtualization.

property groupProps

groupProps?: IGroupRenderProps;

Optional override properties to render groups.

property groups

groups?: IGroup[];

Optional grouping instructions.

property items

items: any[];

List of items to render.

property listProps

listProps?: IListProps;

Optional properties to pass through to the list components being rendered.

property onGroupExpandStateChanged

onGroupExpandStateChanged?: (isSomeGroupExpanded: boolean) => void;

Optional callback when the group expand state changes between all collapsed and at least one group is expanded.

property onRenderCell

onRenderCell: (
    nestingDepth?: number,
    item?: any,
    index?: number
) => React.ReactNode;

Rendering callback to render the group items.

property onShouldVirtualize

onShouldVirtualize?: (props: IListProps) => boolean;

Optional callback to determine whether the list should be rendered in full, or virtualized. Virtualization will add and remove pages of items as the user scrolls them into the visible range. This benefits larger list scenarios by reducing the DOM on the screen, but can negatively affect performance for smaller lists. The default implementation will virtualize when this callback is not provided.

property role

role?: string;

Override the default role for GroupedList.

property rootListProps

rootListProps?: IListProps;

Optional properties to pass through to the root list component being rendered.

property selection

selection?: ISelection;

Optional selection model to track selection state.

property selectionMode

selectionMode?: SelectionMode;

Controls how/if the list manages selection.

property styles

styles?: IStyleFunctionOrObject<IGroupedListStyleProps, IGroupedListStyles>;

Style function to be passed in to override the themed or default styles

property theme

theme?: ITheme;

Theme that is passed in from Higher Order Component

property usePageCache

usePageCache?: boolean;

boolean to control if pages containing unchanged items should be cached, this is a perf optimization The same property in List.Props

property viewport

viewport?: IViewport;

Optional Viewport, provided by the parent component.

interface IGroupedListSectionProps

interface IGroupedListSectionProps
    extends React.ClassAttributes<GroupedListSection> {}

property compact

compact?: boolean;

Whether to render in compact mode

property componentRef

componentRef?: () => void;

Gets the component ref.

property dragDropEvents

dragDropEvents?: IDragDropEvents;

Map of callback functions related to drag and drop functionality.

property dragDropHelper

dragDropHelper?: IDragDropHelper;

helper to manage drag/drop across item rows and groups

property eventsToRegister

eventsToRegister?: {
    eventName: string;
    callback: (context: IDragDropContext, event?: any) => void;
}[];

Event names and corresponding callbacks that will be registered to the group and the rendered elements

property footerProps

footerProps?: IGroupFooterProps;

Information to pass in to the group footer.

property getGroupItemLimit

getGroupItemLimit?: (group: IGroup) => number;

Grouping item limit.

property group

group?: IGroup;

Optional grouping instructions.

property groupedListClassNames

groupedListClassNames?: IProcessedStyleSet<IGroupedListStyles>;

GroupedList resolved class names

property groupIndex

groupIndex?: number;

Optional grouping instructions.

property groupNestingDepth

groupNestingDepth?: number;

Optional group nesting level.

property groupProps

groupProps?: IGroupRenderProps;

Optional override properties to render groups.

property groups

groups?: IGroup[];

Stores parent group's children.

property headerProps

headerProps?: IGroupHeaderProps;

Information to pass in to the group header.

property items

items: any[];

List of items to render.

property listProps

listProps?: IListProps;

Optional list props to pass to list renderer.

property onRenderCell

onRenderCell: (
    nestingDepth?: number,
    item?: any,
    index?: number
) => React.ReactNode;

Rendering callback to render the group items.

property onRenderGroupFooter

onRenderGroupFooter?: IRenderFunction<IGroupFooterProps>;

Override for rendering the group footer.

property onRenderGroupHeader

onRenderGroupHeader?: IRenderFunction<IGroupHeaderProps>;

Override for rendering the group header.

property onRenderGroupShowAll

onRenderGroupShowAll?: IRenderFunction<IGroupShowAllProps>;

Override for rendering the group Show All link.

property onShouldVirtualize

onShouldVirtualize?: (props: IListProps) => boolean;

Optional callback to determine whether the list should be rendered in full, or virtualized. Virtualization will add and remove pages of items as the user scrolls them into the visible range. This benefits larger list scenarios by reducing the DOM on the screen, but can negatively affect performance for smaller lists. The default implementation will virtualize when this callback is not provided.

property selection

selection?: ISelection;

Optional selection model to track selection state.

property selectionMode

selectionMode?: SelectionMode;

Controls how/if the details list manages selection.

property showAllProps

showAllProps?: IGroupShowAllProps;

Information to pass in to the group Show All footer.

property viewport

viewport?: IViewport;

Optional Viewport, provided by the parent component.

interface IGroupedListSectionState

interface IGroupedListSectionState {}

property isDropping

isDropping?: boolean;

property isSelected

isSelected?: boolean;

interface IGroupedListState

interface IGroupedListState {}

property compact

compact?: IGroupedListProps['compact'];

property groups

groups?: IGroup[];

property items

items?: IGroupedListProps['items'];

property listProps

listProps?: IGroupedListProps['listProps'];

property selectionMode

selectionMode?: IGroupedListProps['selectionMode'];

property version

version: {};

interface IGroupedListStyles

interface IGroupedListStyles {}

property group

group: IStyle;

property groupIsDropping

groupIsDropping: IStyle;

property root

root: IStyle;

interface IGroupedListV2Props

interface IGroupedListV2Props extends IGroupedListProps {}

property groupExpandedVersion

groupExpandedVersion?: {};

For perf reasons, GroupedList avoids re-rendering unless certain props have changed. Use this prop if you need to force it to re-render when a group has expanded or collapsed. You can pass any type of value as long as it only changes (=== comparison) when a re-render should happen.

property listRef

listRef?: React.Ref<List>;

Ref to the underlying List control

property onRenderCell

onRenderCell: (
    nestingDepth?: number,
    item?: any,
    index?: number,
    group?: IGroup
) => React.ReactNode;

Rendering callback to render the group items.

property version

version?: {};

For perf reasons, GroupedList avoids re-rendering unless certain props have changed. Use this prop if you need to force it to re-render in other cases. You can pass any type of value as long as it only changes (=== comparison) when a re-render should happen.

interface IGroupedListV2State

interface IGroupedListV2State {}

property compact

compact?: IGroupedListV2Props['compact'];

property groupExpandedVersion

groupExpandedVersion: {};

property groups

groups?: IGroup[];

property items

items?: IGroupedListV2Props['items'];

property listProps

listProps?: IGroupedListV2Props['listProps'];

property selectionMode

selectionMode?: IGroupedListV2Props['selectionMode'];

property version

version: {};

interface IGroupFooterProps

interface IGroupFooterProps extends IGroupDividerProps {}

property styles

styles?: IStyleFunctionOrObject<IGroupFooterStyleProps, IGroupFooterStyles>;

Style function to be passed in to override the themed or default styles

interface IGroupFooterStyles

interface IGroupFooterStyles {}

property root

root: IStyle;

interface IGroupHeaderCheckboxProps

interface IGroupHeaderCheckboxProps {}

property checked

checked: boolean;

property theme

theme?: ITheme;

interface IGroupHeaderProps

interface IGroupHeaderProps extends IGroupDividerProps {}

property expandButtonIcon

expandButtonIcon?: string;

Defines the name of a custom icon to be used for group headers. If not set, the default icon will be used

property expandButtonProps

expandButtonProps?: React.HTMLAttributes<HTMLButtonElement>;

Native props for the GroupHeader expand and collapse button

property groupedListId

groupedListId?: string;

GroupedList id for aria-controls

property onRenderGroupHeaderCheckbox

onRenderGroupHeaderCheckbox?: IRenderFunction<IGroupHeaderCheckboxProps>;

If provided, can be used to render a custom checkbox

property selectAllButtonProps

selectAllButtonProps?: React.HTMLAttributes<HTMLButtonElement>;

Native props for the GroupHeader select all button

property styles

styles?: IStyleFunctionOrObject<IGroupHeaderStyleProps, IGroupHeaderStyles>;

Style function to be passed in to override the themed or default styles

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 IGroupHeaderStyles

interface IGroupHeaderStyles {}

property check

check: IStyle;

property dropIcon

dropIcon: IStyle;

property expand

expand: IStyle;

property expandIsCollapsed

expandIsCollapsed: IStyle;

property groupHeaderContainer

groupHeaderContainer: IStyle;

property headerCount

headerCount: IStyle;

property root

root: IStyle;

property title

title: IStyle;

interface IGroupRenderProps

interface IGroupRenderProps {}

property collapseAllVisibility

collapseAllVisibility?: CollapseAllVisibility;

Flag to indicate whether to ignore the collapsing icon on header.

property footerProps

footerProps?: IGroupFooterProps;

Information to pass in to the group footer.

property getGroupItemLimit

getGroupItemLimit?: (group: IGroup) => number;

Grouping item limit.

property headerProps

headerProps?: IGroupHeaderProps;

Information to pass in to the group header.

property isAllGroupsCollapsed

isAllGroupsCollapsed?: boolean;

Boolean indicating if all groups are in collapsed state.

property onRenderFooter

onRenderFooter?: IRenderFunction<IGroupFooterProps>;

Override which allows the caller to provide a custom footer.

property onRenderHeader

onRenderHeader?: IRenderFunction<IGroupHeaderProps>;

Override which allows the caller to provide a custom header.

property onRenderShowAll

onRenderShowAll?: IRenderFunction<IGroupShowAllProps>;

Override which allows the caller to provide a custom Show All link.

property onToggleCollapseAll

onToggleCollapseAll?: (isAllCollapsed: boolean) => void;

Callback for when all groups are expanded or collapsed.

property role

role?: string;

Override which allows the caller to provide a custom aria role

property showAllProps

showAllProps?: IGroupShowAllProps;

Information to pass in to the group Show all footer.

property showEmptyGroups

showEmptyGroups?: boolean;

Boolean indicating if empty groups are shown

interface IGroupShowAllProps

interface IGroupShowAllProps extends IGroupDividerProps {}

property showAllLinkText

showAllLinkText?: string;

The Show All link text.

property styles

styles?: IStyleFunctionOrObject<IGroupShowAllStyleProps, IGroupShowAllStyles>;

Style function to be passed in to override the themed or default styles

interface IGroupShowAllStyles

interface IGroupShowAllStyles {}

property root

root: IStyle;

interface IGroupSpacerProps

interface IGroupSpacerProps {}

property count

count: number;

Count of spacer(s)

property indentWidth

indentWidth?: number;

How much to indent

property role

role?: string;

Override the default role (presentation)

property styles

styles?: IStyleFunctionOrObject<IGroupSpacerStyleProps, IGroupSpacerStyles>;

Style function to be passed in to override the themed or default styles
Deprecated
unused, to be removed in 7.0

property theme

theme?: ITheme;

Theme from Higher Order Component
Deprecated
unused, to be removed in 7.0

interface IGroupSpacerStyles

interface IGroupSpacerStyles {}

Deprecated
unused, to be removed in 7.0.

property root

root: IStyle;

interface IHoverCard

interface IHoverCard {}

property dismiss

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

Public dismiss method to be used through componentRef of the HoverCard. Boolean argument controls if the dismiss happens with a timeout delay.

interface IHoverCardProps

interface IHoverCardProps extends React.HTMLAttributes<HTMLDivElement> {}

HoverCard component props.

property cardDismissDelay

cardDismissDelay?: number;

Length of card dismiss delay. A min number is necessary for pointer to hop between target and card

property cardOpenDelay

cardOpenDelay?: number;

Length of compact card delay

property className

className?: string;

Additional CSS class(es) to apply to the HoverCard root element.

property componentRef

componentRef?: IRefObject<IHoverCard>;

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

property eventListenerTarget

eventListenerTarget?: HTMLElement | string | null;

This prop is to separate the target to anchor hover card from the target to attach event listener. If set, this prop separates the target to anchor the hover card from the target to attach the event listener. When no eventListenerTarget given, HoverCard will use target prop or its root to set event listener.

property expandedCardOpenDelay

expandedCardOpenDelay?: number;

Time in ms when expanded card should open after compact card

property expandingCardProps

expandingCardProps?: IExpandingCardProps;

Additional ExpandingCard props to pass through HoverCard like renderers, target. gapSpace etc. Used along with 'type' prop set to HoverCardType.expanding. Reference detail properties in ICardProps and IExpandingCardProps.

property instantOpenOnClick

instantOpenOnClick?: boolean;

Enables instant open of the full card upon click

property onCardExpand

onCardExpand?: () => void;

Callback when visible card is expanded.

property onCardHide

onCardHide?: () => void;

Callback when card hides

property onCardVisible

onCardVisible?: () => void;

Callback when card becomes visible

property openHotKey

openHotKey?: KeyCodes;

HotKey used for opening the HoverCard when tabbed to target.

property plainCardProps

plainCardProps?: IPlainCardProps;

Additional PlainCard props to pass through HoverCard like renderers, target, gapSpace etc. Used along with 'type' prop set to HoverCardType.plain. See for more details ICardProps and IPlainCardProps interfaces.

property setAriaDescribedBy

setAriaDescribedBy?: boolean;

Whether or not to mark the container as described by the hover card. If not specified, the caller should mark as element as described by the hover card id.

property setInitialFocus

setInitialFocus?: boolean;

Set to true to set focus on the first focusable element in the card. Works in pair with the 'trapFocus' prop.

property shouldBlockHoverCard

shouldBlockHoverCard?: () => void;

Should block hover card or not

property sticky

sticky?: boolean;

If true disables Card dismiss upon mouse leave, so that card sticks around.

property styles

styles?: IStyleFunctionOrObject<IHoverCardStyleProps, IHoverCardStyles>;

Custom styles for this component

property target

target?: HTMLElement | string | null;

Optional target element to tag hover card on. If not provided and using HoverCard as a wrapper, don't set the 'data-is-focusable=true' attribute to the root of the wrapped child. If no target is given, HoverCard will use its root as a target and become the focusable element with a focus listener attached to it.

property theme

theme?: ITheme;

Theme provided by higher order component.

property trapFocus

trapFocus?: boolean;

Set to true if you want to render the content of the HoverCard in a FocusTrapZone for accessibility reasons. Optionally 'setInitialFocus' prop can be set to true to move focus inside the FocusTrapZone.

property type

type?: HoverCardType;

Type of the hover card to render.

interface IHoverCardState

interface IHoverCardState {}

property isHoverCardVisible

isHoverCardVisible?: boolean;

property mode

mode?: ExpandingCardMode;

property openMode

openMode?: OpenCardMode;

interface IHoverCardStyleProps

interface IHoverCardStyleProps {}

property className

className?: string;

Optional className(s) for the host div of HoverCard.

property theme

theme: ITheme;

Theme provided by High-Order Component.

interface IHoverCardStyles

interface IHoverCardStyles {}

property host

host?: IStyle;

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

interface IHSL

interface IHSL {}

property h

h: number;

Hue, range 0-359.

property l

l: number;

Lightness, range 0-100.

property s

s: number;

Saturation, range 0-100.

interface IHSV

interface IHSV {}

property h

h: number;

Hue, range 0-359.

property s

s: number;

Saturation, range 0-100.

property v

v: number;

Value, range 0-100.

interface IIconContent

interface IIconContent {}

property children

children?: string | JSX.Element;

property fontFamily

fontFamily?: string;

property iconClassName

iconClassName?: string;

property mergeImageProps

mergeImageProps?: boolean;

interface IIconProps

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

property ariaLabel

ariaLabel?: string;

The aria label of the icon for the benefit of screen readers.
Deprecated
Use the native prop aria-label

property iconName

iconName?: string;

The name of the icon to use from the icon font. If string is empty, a placeholder icon will be rendered the same width as an icon.

property iconType

iconType?: IconType;

The type of icon to render (image or icon font).
Deprecated
Inferred based on the presence of imageProps

property imageErrorAs

imageErrorAs?: React.ComponentType<IImageProps>;

If rendering an image icon, this component will be rendered in the event that loading the image fails.

property imageProps

imageProps?: IImageProps;

If rendering an image icon, these props will be passed to the Image component.

property styles

styles?: IStyleFunctionOrObject<IIconStyleProps, IIconStyles>;

Gets the styles for an Icon.

property theme

theme?: ITheme;

interface IIconState

interface IIconState {}

property imageLoadError

imageLoadError: boolean;

interface IIconStyleProps

interface IIconStyleProps {}

property className

className?: string;

property iconClassName

iconClassName?: string;

property isImage

isImage: boolean;

property isPlaceholder

isPlaceholder: boolean;

property styles

styles?: Partial<IIconStyles>;

property theme

theme?: ITheme;

interface IIconStyles

interface IIconStyles {}

property imageContainer

imageContainer?: IStyle;

Deprecated. Use root.
Deprecated
Use root.

property root

root?: IStyle;

interface IImage

interface IImage {}

interface IImageIconProps

interface IImageIconProps extends React.HTMLAttributes<HTMLElement> {}

Props for a basic image icon component which doesn't directly provide image load error handling and can't be targeted by customizations.

property className

className?: string;

Custom class to style the icon.

property imageProps

imageProps: IImageProps;

Props passed to the Image component.

interface IImageProps

interface IImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {}

property className

className?: string;

Additional css class to apply to the Component

property coverStyle

coverStyle?: ImageCoverStyle;

Specifies the cover style to be used for this image. If not specified, this will be dynamically calculated based on the aspect ratio for the image.

property errorSrc

errorSrc?: string;

Deprecated at v1.3.6, to replace the src in case of errors, use onLoadingStateChange instead and rerender the Image with a difference src.
Deprecated
Use onLoadingStateChange instead and rerender the Image with a difference src.

property imageFit

imageFit?: ImageFit;

Used to determine how the image is scaled and cropped to fit the frame.

property maximizeFrame

maximizeFrame?: boolean;

If true, the image frame will expand to fill its parent container.

property onLoadingStateChange

onLoadingStateChange?: (loadState: ImageLoadState) => void;

Optional callback method for when the image load state has changed. The 'loadState' parameter indicates the current state of the Image.

property shouldFadeIn

shouldFadeIn?: boolean;

If true, fades the image in when loaded.

property shouldStartVisible

shouldStartVisible?: boolean;

If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until it is successfully loaded. This disables shouldFadeIn.

property styles

styles?: IStyleFunctionOrObject<IImageStyleProps, IImageStyles>;

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

property theme

theme?: ITheme;

Theme provided by HOC.

interface IImageState

interface IImageState {}

property loadState

loadState?: ImageLoadState;

interface IImageStyleProps

interface IImageStyleProps {}

property className

className?: string;

Accept custom classNames

property height

height?: number | string;

Image height value

property isCenter

isCenter?: boolean;

ImageFit booleans for center, cover, contain, centerContain, centerCover, none

property isCenterContain

isCenterContain?: boolean;

property isCenterCover

isCenterCover?: boolean;

property isContain

isContain?: boolean;

property isCover

isCover?: boolean;

property isError

isError?: boolean;

if true image load is in error

property isLandscape

isLandscape?: boolean;

If true the image is coverStyle landscape instead of portrait

property isLoaded

isLoaded?: boolean;

If true, the image is loaded

property isNone

isNone?: boolean;

property isNotImageFit

isNotImageFit?: boolean;

if true, imageFit is undefined

property maximizeFrame

maximizeFrame?: boolean;

If true, the image frame will expand to fill its parent container.

property shouldFadeIn

shouldFadeIn?: boolean;

If true, fades the image in when loaded.

property shouldStartVisible

shouldStartVisible?: boolean;

If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until it is successfully loaded. This disables shouldFadeIn.

property theme

theme: ITheme;

Accept theme prop.

property width

width?: number | string;

Image width value

interface IImageStyles

interface IImageStyles {}

property image

image: IStyle;

Style set for the img element.

property root

root: IStyle;

Style set for the root div element.

interface IInputProps

interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {}

Pickers' input props interface

property 'aria-label'

'aria-label'?: string;

Screen reader label to apply to an input element.

property defaultVisibleValue

defaultVisibleValue?: string;

The default value to be visible when the autofill first created. This is different than placeholder text because the placeholder text will disappear and re-appear. This text persists until deleted or changed.

interface IKeytipConfig

interface IKeytipConfig {}

property keytips

keytips: IKeytipConfigItem[];

interface IKeytipConfigItem

interface IKeytipConfigItem {}

property children

children?: IKeytipConfigItem[];

Children keytips of this keytip

property content

content: string;

Content for the keytip

property id

id: string;

Identifier for the keytip, to be used to access in the configMap

property optionalProps

optionalProps?: Partial<IKeytipProps>;

Optional props in IKeytipProps

property sequence

sequence?: string;

Key Sequence for this keytip only If sequence is not defined it will be derived from the content string

interface IKeytipConfigMap

interface IKeytipConfigMap {}

index signature

[id: string]: IKeytipProps;

interface IKeytipLayer

interface IKeytipLayer {}

interface IKeytipLayerProps

interface IKeytipLayerProps extends React.ClassAttributes<IKeytipLayer> {}

property componentRef

componentRef?: IRefObject<IKeytipLayer>;

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

property content

content: string;

String to put inside the layer to be used for the aria-describedby for the component with the keytip Should be one of the starting sequences

property keytipExitSequences

keytipExitSequences?: IKeytipTransitionKey[];

List of key sequences that will exit keytips mode

property keytipReturnSequences

keytipReturnSequences?: IKeytipTransitionKey[];

List of key sequences that execute the return functionality in keytips (going back to the previous level of keytips)

property keytipStartSequences

keytipStartSequences?: IKeytipTransitionKey[];

List of key sequences that will start keytips mode

property onEnterKeytipMode

onEnterKeytipMode?: () => void;

Callback function triggered when keytip mode is entered

property onExitKeytipMode

onExitKeytipMode?: (
    ev?: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>
) => void;

Callback function triggered when keytip mode is exited. ev is the Mouse or Keyboard Event that triggered the exit, if any.

property styles

styles?: IStyleFunctionOrObject<IKeytipLayerStyleProps, IKeytipLayerStyles>;

(Optional) Call to provide customized styling.

interface IKeytipLayerState

interface IKeytipLayerState {}

property inKeytipMode

inKeytipMode: boolean;

property keytips

keytips: IKeytipProps[];

property visibleKeytips

visibleKeytips: IKeytipProps[];

interface IKeytipLayerStyleProps

interface IKeytipLayerStyleProps {}

interface IKeytipLayerStyles

interface IKeytipLayerStyles {}

property innerContent

innerContent: IStyle;

interface IKeytipProps

interface IKeytipProps {}

property calloutProps

calloutProps?: ICalloutProps;

ICalloutProps to pass to the callout element

property content

content: string;

Content to put inside the keytip

property disabled

disabled?: boolean;

T/F if the corresponding control for this keytip is disabled

property hasDynamicChildren

hasDynamicChildren?: boolean;

Whether or not this keytip will have children keytips that are dynamically created (DOM is generated on keytip activation). Common cases are a Pivot or Modal.

property hasMenu

hasMenu?: boolean;

Whether or not this keytip belongs to a component that has a menu Keytip mode will stay on when a menu is opened, even if the items in that menu have no keytips

property keySequences

keySequences: string[];

Array of KeySequences which is the full key sequence to trigger this keytip Should not include initial 'start' key sequence

property offset

offset?: Point;

Offset x and y for the keytip, added from the top-left corner By default the keytip will be anchored to the bottom-center of the element

property onExecute

onExecute?: (
    executeTarget: HTMLElement | null,
    target: HTMLElement | null
) => void;

Function to call when this keytip is activated. 'executeTarget' is the DOM element marked with 'data-ktp-execute-target'. 'target' is the DOM element marked with 'data-ktp-target'.

property onReturn

onReturn?: (
    executeTarget: HTMLElement | null,
    target: HTMLElement | null
) => void;

Function to call when the keytip is the currentKeytip and a return sequence is pressed. 'executeTarget' is the DOM element marked with 'data-ktp-execute-target'. 'target' is the DOM element marked with 'data-ktp-target'.

property overflowSetSequence

overflowSetSequence?: string[];

Full KeySequence of the overflow set button, will be set automatically if this keytip is inside an overflow

property styles

styles?: IStyleFunctionOrObject<IKeytipStyleProps, IKeytipStyles>;

Optional styles for the component.

property theme

theme?: ITheme;

Theme for the component

property visible

visible?: boolean;

T/F if the keytip is visible

interface IKeytipStyleProps

interface IKeytipStyleProps {}

Props to style Keytip component

property disabled

disabled?: boolean;

Whether the keytip is disabled or not.

property theme

theme: ITheme;

The theme for the keytip.

property visible

visible?: boolean;

T/F if the keytip is visible

interface IKeytipStyles

interface IKeytipStyles {}

property container

container: IStyle;

Style for the div container surrounding the keytip content.

property root

root: IStyle;

Style for the keytip content element.

interface IKeytipTransitionKey

interface IKeytipTransitionKey {}

property key

key: string;

property modifierKeys

modifierKeys?: KeytipTransitionModifier[];

interface ILabel

interface ILabel {}

interface ILabelProps

interface ILabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {}

property as

as?: IComponentAs<React.AllHTMLAttributes<HTMLElement>>;

Render the root element as another type.

property componentRef

componentRef?: IRefObject<ILabel>;

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

property disabled

disabled?: boolean;

Renders the label as disabled.

property required

required?: boolean;

Whether the associated form field is required or not

property styles

styles?: IStyleFunctionOrObject<ILabelStyleProps, ILabelStyles>;

Styles for the label.

property theme

theme?: ITheme;

Theme provided by HOC.

interface ILabelStyleProps

interface ILabelStyleProps {}

property className

className?: string;

property disabled

disabled?: boolean;

property required

required?: boolean;

property theme

theme: ITheme;

interface ILabelStyles

interface ILabelStyles {}

property root

root: IStyle;

Styles for the root element.

interface ILayer

interface ILayer {}

interface ILayerHost

interface ILayerHost {}

Represents a mounted layer host, and provides access to its hostId and root element.

property hostId

hostId: string;

The hostId for this host, to be propagatd to layers using Customizer.

property rootRef

rootRef: React.RefObject<HTMLDivElement | null>;

An element ref to the layer host's content root. This is the element to which layers will be added.

method notifyLayersChanged

notifyLayersChanged: () => void;

Notifies the layer host that layers may have been added or removed within its root element.

interface ILayerHostProps

interface ILayerHostProps extends React.HTMLAttributes<HTMLElement> {}

property componentRef

componentRef?: IRefObject<ILayerHost>;

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

property id

id?: string;

Defines the id for the layer host that Layers can target (using the hostId property.)

interface ILayerProps

interface ILayerProps extends React.HTMLAttributes<HTMLDivElement | LayerBase> {}

property className

className?: string;

Additional css class to apply to the Layer

property componentRef

componentRef?: IRefObject<ILayer>;

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

property eventBubblingEnabled

eventBubblingEnabled?: boolean;

When enabled, Layer allows events to bubble up from Layer content. Traditionally Layer has not had this behavior. This prop preserves backwards compatibility by default while allowing users to opt in to the new event bubbling functionality.

property hostId

hostId?: string;

The optional id property provided on a LayerHost that this Layer should render within. The LayerHost does not need to be immediately available but once has been rendered, and if missing, we'll avoid trying to render the Layer content until the host is available. If an id is not provided, we will render the Layer content in a fixed position element rendered at the end of the document.

property insertFirst

insertFirst?: boolean;

Whether the layer should be added as the first child of the host. If true, the layer will be inserted as the first child of the host By default, the layer will be appended at the end to the host

property onLayerDidMount

onLayerDidMount?: () => void;

Callback for when the layer is mounted.

property onLayerMounted

onLayerMounted?: () => void;

Callback for when the layer is mounted.
Deprecated
Use onLayerDidMount.

property onLayerWillUnmount

onLayerWillUnmount?: () => void;

Callback for when the layer is unmounted.

property styles

styles?: IStyleFunctionOrObject<ILayerStyleProps, ILayerStyles>;

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

property theme

theme?: ITheme;

Theme provided by HOC.

interface ILayerStyleProps

interface ILayerStyleProps {}

property className

className?: string;

Accept custom classNames

property isNotHost

isNotHost?: boolean;

Check if Host

property theme

theme: ITheme;

Accept theme prop.

interface ILayerStyles

interface ILayerStyles {}

property content

content?: IStyle;

Style for the Fabric component.

property root

root?: IStyle;

Style for the root element when fixed.

interface ILine

interface ILine extends IShimmerElement {}

Line element interface

property height

height?: number;

Sets the height of the shimmer line in pixels.

property width

width?: number | string;

Line width value.

interface ILink

interface ILink {}

method focus

focus: () => void;

Sets focus to the link.

interface ILinkHTMLAttributes

interface ILinkHTMLAttributes<T> extends React.HTMLAttributes<T> {}

property autoFocus

autoFocus?: boolean;

property disabled

disabled?: boolean;

property download

download?: any;

property form

form?: string;

property formAction

formAction?: string;

property formEncType

formEncType?: string;

property formMethod

formMethod?: string;

property formNoValidate

formNoValidate?: boolean;

property formTarget

formTarget?: string;

property href

href?: string;

property hrefLang

hrefLang?: string;

property media

media?: string;

property name

name?: string;

property rel

rel?: string;

property target

target?: string;

property type

type?: string;

property value

value?: string | string[] | number;

index signature

[index: string]: any;

interface ILinkProps

interface ILinkProps
    extends ILinkHTMLAttributes<
        HTMLAnchorElement | HTMLButtonElement | HTMLElement | LinkBase
    > {}

property as

as?: string | React.ComponentClass | React.FunctionComponent;

A component that should be used as the root element of the link returned from the Link component.

property componentRef

componentRef?: IRefObject<ILink>;

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

property disabled

disabled?: boolean;

Whether the link is disabled

property keytipProps

keytipProps?: IKeytipProps;

Optional keytip for this Link

property styles

styles?: IStyleFunctionOrObject<ILinkStyleProps, ILinkStyles>;

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

property theme

theme?: ITheme;

Theme (provided through customization.)

property underline

underline?: boolean;

Whether the link is styled with an underline or not. Should be used when the link is placed alongside other text content.

interface ILinkStyleProps

interface ILinkStyleProps {}

property className

className?: string;

property isButton

isButton?: boolean;

property isDisabled

isDisabled?: boolean;

property isUnderlined

isUnderlined?: boolean;

property theme

theme: ITheme;

interface ILinkStyles

interface ILinkStyles {}

property root

root: IStyle;

interface IList

interface IList {}

property forceUpdate

forceUpdate: () => void;

Force the component to update.

property getStartItemIndexInView

getStartItemIndexInView: () => number;

Get the start index of the page that is currently in view

property getTotalListHeight

getTotalListHeight?: () => number;

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

property 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 the behavior of the scrolling alignment. Defaults to auto. Note: The scrollToMode requires the measureItem callback is provided to function.

interface IListOnRenderRootProps

interface IListOnRenderRootProps<T> {}

Props passed to the render override for the list root.

property divProps

divProps: React.HTMLAttributes<HTMLDivElement>;

Props to apply to the list root element.

property pages

pages: IPage<T>[];

The active pages to be rendered into the list. These will have been rendered using onRenderPage.

property rootRef

rootRef: React.Ref<HTMLDivElement>;

The ref to be applied to the list root. The List uses this element to track scroll position and sizing.

property surfaceElement

surfaceElement: JSX.Element | null;

The content to be rendered as the list surface element. This will have been rendered using onRenderSurface.

interface IListOnRenderSurfaceProps

interface IListOnRenderSurfaceProps<T> {}

Props passed to the render override for the list surface.

property divProps

divProps: React.HTMLAttributes<HTMLDivElement>;

Props to apply to the list surface element.

property pageElements

pageElements: JSX.Element[];

The content to be rendered representing all active pages.

property pages

pages: IPage<T>[];

The active pages to be rendered into the list. These will have been rendered using onRenderPage.

property surfaceRef

surfaceRef: React.Ref<HTMLDivElement>;

A ref to be applied to the surface element. The List uses this element to track content size and focus.

interface IListProps

interface IListProps<T = any>
    extends React.HTMLAttributes<List<T> | HTMLDivElement> {}

property className

className?: string;

Optional classname to append to root list.

property componentRef

componentRef?: IRefObject<IList>;

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

property getItemCountForPage

getItemCountForPage?: (itemIndex?: number, visibleRect?: IRectangle) => number;

Method called by the list to get how many items to render per page from specified index. In general, use getPageSpecification instead.

property getKey

getKey?: (item: T, index?: number) => string;

Optional callback to get the item key, to be used on render.

property getPageHeight

getPageHeight?: (
    itemIndex?: number,
    visibleRect?: IRectangle,
    itemCount?: number
) => number;

Method called by the list to get the pixel height for a given page. By default, we measure the first page's height and default all other pages to that height when calculating the surface space. It is ideal to be able to adequately predict page heights in order to keep the surface space from jumping in pixels, which has been seen to cause browser performance issues. In general, use getPageSpecification instead.

property getPageSpecification

getPageSpecification?: (
    itemIndex?: number,
    visibleRect?: IRectangle
) => IPageSpecification;

Called by the list to get the specification for a page. Use this method to provide an allocation of items per page, as well as an estimated rendered height for the page. The list will use this to optimize virtualization.

property getPageStyle

getPageStyle?: (page: IPage<T>) => any;

Method called by the list to derive the page style object. For spacer pages, the list will derive the height and passed in heights will be ignored.

property ignoreScrollingState

ignoreScrollingState?: boolean;

Whether to disable scroll state updates. This causes the isScrolling arg in onRenderCell to always be undefined. This is a performance optimization to let List skip a render cycle by not updating its scrolling state.

property items

items?: T[];

Items to render.

property onPageAdded

onPageAdded?: (page: IPage<T>) => void;

Optional callback for monitoring when a page is added.

property onPageRemoved

onPageRemoved?: (page: IPage<T>) => void;

Optional callback for monitoring when a page is removed.

property onPagesUpdated

onPagesUpdated?: (pages: IPage<T>[]) => void;

Optional callback invoked when List rendering completed. This can be on initial mount or on re-render due to scrolling. This method will be called as a result of changes in List pages (added or removed), and after ALL the changes complete. To track individual page Add / Remove use onPageAdded / onPageRemoved instead.
Parameter pages
The current array of pages in the List.

property onRenderCell

onRenderCell?: (
    item?: T,
    index?: number,
    isScrolling?: boolean
) => React.ReactNode;

Method to call when trying to render an item.
Parameter item
The data associated with the cell that is being rendered.
Parameter index
The index of the cell being rendered.
Parameter isScrolling
True if the list is being scrolled. May be useful for rendering a placeholder if your cells are complex.

property onRenderCellConditional

onRenderCellConditional?: (
    item?: T,
    index?: number,
    isScrolling?: boolean
) => React.ReactNode | null;

Method to call when trying to render an item conditionally.
When this method returns null the cell will be skipped in the render.
This prop is mutually exclusive with onRenderCell and when onRenderCellConditional is set, onRenderCell will not be called.
Parameter item
The data associated with the cell that is being rendered.
Parameter index
The index of the cell being rendered.
Parameter isScrolling
True if the list is being scrolled. May be useful for rendering a placeholder if your cells are complex.

property onRenderPage

onRenderPage?: IRenderFunction<IPageProps<T>>;

Called when the List will render a page. Override this to control how cells are rendered within a page.

property onRenderRoot

onRenderRoot?: IRenderFunction<IListOnRenderRootProps<T>>;

Render override for the element at the root of the List. Use this to apply some final attributes or structure to the content each time the list is updated with new active pages or items.

property onRenderSurface

onRenderSurface?: IRenderFunction<IListOnRenderSurfaceProps<T>>;

Render override for the element representing the surface of the List. Use this to alter the structure of the rendered content if necessary on each update.

property onShouldVirtualize

onShouldVirtualize?: (props: IListProps<T>) => boolean;

Optional callback to determine whether the list should be rendered in full, or virtualized. Virtualization will add and remove pages of items as the user scrolls them into the visible range. This benefits larger list scenarios by reducing the DOM on the screen, but can negatively affect performance for smaller lists. The default implementation will virtualize when this callback is not provided.

property renderCount

renderCount?: number;

Number of items to render. Defaults to items.length.

property renderedWindowsAhead

renderedWindowsAhead?: number;

In addition to the visible window, how many windowHeights should we render ahead.

property renderedWindowsBehind

renderedWindowsBehind?: number;

In addition to the visible window, how many windowHeights should we render behind.

property role

role?: string;

The role to assign to the list root element. Use this to override the default assignment of 'list' to the root and 'listitem' to the cells.

property startIndex

startIndex?: number;

Index in items array to start rendering from. Defaults to 0.

property usePageCache

usePageCache?: boolean;

Boolean value to enable render page caching. This is an experimental performance optimization that is off by default.

property version

version?: {};

An object which can be passed in as a fresh instance to 'force update' the list.

interface IListState

interface IListState<T = any> {}

property hasMounted

hasMounted: boolean;

property isScrolling

isScrolling?: boolean;

property measureVersion

measureVersion?: number;

The last versionstamp for

property pages

pages?: IPage<T>[];

property pagesVersion

pagesVersion?: {};

method getDerivedStateFromProps

getDerivedStateFromProps: (
    nextProps: IListProps<T>,
    previousState: IListState<T>
) => IListState<T>;

interface IMarqueeSelection

interface IMarqueeSelection {}

interface IMarqueeSelectionProps

interface IMarqueeSelectionProps extends React.HTMLAttributes<HTMLDivElement> {}

property className

className?: string;

Additional CSS class(es) to apply to the MarqueeSelection.

property componentRef

componentRef?: IRefObject<IMarqueeSelection>;

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

property isDraggingConstrainedToRoot

isDraggingConstrainedToRoot?: boolean;

Optional flag to restrict the drag rect to the root element, instead of allowing the drag rect to start outside of the root element boundaries.

property isEnabled

isEnabled?: boolean;

Optional flag to control the enabled state of marquee selection. This allows you to render it and have events all ready to go, but conditionally disable it. That way transitioning between enabled/disabled generate no difference in the DOM.

property onShouldStartSelection

onShouldStartSelection?: (ev: MouseEvent) => boolean;

Optional callback that is called, when the mouse down event occurs, in order to determine if we should start a marquee selection. If true is returned, we will cancel the mousedown event to prevent upstream mousedown handlers from executing.

property rootProps

rootProps?: React.HTMLAttributes<HTMLDivElement>;

Optional props to mix into the root DIV element.

property selection

selection: ISelection;

The selection object to interact with when updating selection changes.

property styles

styles?: IStyleFunction<IMarqueeSelectionStyleProps, IMarqueeSelectionStyles>;

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

property theme

theme?: ITheme;

Theme (provided through customization.)

interface IMarqueeSelectionStyleProps

interface IMarqueeSelectionStyleProps {}

property className

className?: string;

property theme

theme: ITheme;

interface IMarqueeSelectionStyles

interface IMarqueeSelectionStyles {}

property box

box?: IStyle;

property boxFill

boxFill?: IStyle;

property dragMask

dragMask?: IStyle;

property root

root?: IStyle;

interface IMaskedTextFieldProps

interface IMaskedTextFieldProps extends ITextFieldProps {}

MaskedTextField component props.

property mask

mask?: string;

The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9]
Example 1
Phone Number: (999) 999-9999

property maskChar

maskChar?: string;

The character to show in place of unfilled characters of the mask.

property maskFormat

maskFormat?: {
    [key: string]: RegExp;
};

An object defining the format characters and corresponding regexp values. Default format characters: { '9': /[0-9]/, 'a': /[a-zA-Z]/, '*': /[a-zA-Z0-9]/ }

interface IMaskedTextFieldState

interface IMaskedTextFieldState {}

State for the MaskedTextField component.

property displayValue

displayValue: string;

The mask string formatted with the input value. This is what is displayed inside the TextField
Example 1
Phone Number: 12_ - 4___

property maskCursorPosition

maskCursorPosition?: number;

The index into the rendered value of the first unfilled format character

interface IMenuItemClassNames

interface IMenuItemClassNames {}

Deprecated
in favor of mergeStyles API.

property checkmarkIcon

checkmarkIcon?: string;

property divider

divider?: string;

property icon

icon?: string;

property item

item?: string;

property label

label?: string;

property linkContent

linkContent?: string;

property linkContentMenu

linkContentMenu?: string;

property root

root?: string;

property screenReaderText

screenReaderText?: string;

property secondaryText

secondaryText?: string;

property splitContainer

splitContainer?: string;

property splitMenu

splitMenu?: string;

property splitPrimary

splitPrimary?: string;

property subMenuIcon

subMenuIcon?: string;

interface IMenuItemStyles

interface IMenuItemStyles 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 ConextualMenu.

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 linkContent

linkContent?: IStyle;

Styles for the content inside the button/link of the menuItem.

property subMenuIcon

subMenuIcon?: IStyle;

Styles for the submenu icon of a menu item.

interface IMessageBar

interface IMessageBar {}

interface IMessageBarProps

interface IMessageBarProps extends React.HTMLAttributes<HTMLElement> {}

property actions

actions?: JSX.Element;

The actions you want to show on the other side.

property ariaLabel

ariaLabel?: string;

A description of the message bar for the benefit of screen readers.
Deprecated
Use native prop aria-label instead.

property className

className?: string;

Additional CSS class(es) to apply to the MessageBar.

property componentRef

componentRef?: IRefObject<IMessageBar>;

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

property dismissButtonAriaLabel

dismissButtonAriaLabel?: string;

Aria label on dismiss button if onDismiss is defined.

property dismissIconProps

dismissIconProps?: IIconProps;

Custom icon prop to replace the dismiss icon. If unset, default will be the Fabric Clear icon.

property isMultiline

isMultiline?: boolean;

Determines if the message bar is multi lined. If false, and the text overflows over buttons or to another line, it is clipped.

property messageBarIconProps

messageBarIconProps?: IIconProps;

Custom icon prop to replace the message bar icon. If unset, default will be the icon set by messageBarType.

property messageBarType

messageBarType?: MessageBarType;

The type of MessageBar to render.

property onDismiss

onDismiss?: (ev?: React.MouseEvent<HTMLElement | BaseButton | Button>) => any;

Whether the message bar has a dismiss button and its callback. If null, we don't show a dismiss button.

property overflowButtonAriaLabel

overflowButtonAriaLabel?: string;

Aria label on overflow button if truncated is defined.

property styles

styles?: IStyleFunctionOrObject<IMessageBarStyleProps, IMessageBarStyles>;

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

property theme

theme?: ITheme;

Theme (provided through customization.)

property truncated

truncated?: boolean;

Determines if the message bar text is truncated. If true, a button will render to toggle between a single line view and multiline view. This prop is for single line message bars with no buttons only in a limited space scenario.

interface IMessageBarState

interface IMessageBarState {}

property expandSingleLine

expandSingleLine?: boolean;

property labelId

labelId?: string;

property showContent

showContent?: boolean;

interface IMessageBarStyleProps

interface IMessageBarStyleProps {}

property actions

actions?: boolean;

Whether the MessageBar contains any action elements.

property className

className?: string;

Additional CSS class(es).

property expandSingleLine

expandSingleLine?: boolean;

Whether the single line MessageBar is being expanded.

property isMultiline

isMultiline?: boolean;

Whether the MessageBar is rendered in multi line (as opposed to single line) mode.

property messageBarType

messageBarType?: MessageBarType;

Type of the MessageBar.

property onDismiss

onDismiss?: boolean;

Whether the MessageBar contains a dismiss button.

property theme

theme: ITheme;

Theme (provided through customization).

property truncated

truncated?: boolean;

Whether the text is truncated.

interface IMessageBarStyles

interface IMessageBarStyles {}

property actions

actions?: IStyle;

Style set for the optional element containing the action elements.

property content

content?: IStyle;

Style set for the element containing the icon, text, and optional dismiss button.

property dismissal

dismissal?: IStyle;

Style set for the optional dismiss button.

property dismissSingleLine

dismissSingleLine?: IStyle;

Style set for the element containing the dismiss button.

property expand

expand?: IStyle;

Style set for the icon used to expand and collapse the MessageBar.

property expandSingleLine

expandSingleLine?: IStyle;

Style set for the element containing the expand icon.

property icon

icon?: IStyle;

Style set for the icon.

property iconContainer

iconContainer?: IStyle;

Style set for the element containing the icon.

property innerText

innerText?: IStyle;

Style set for the text.

property root

root?: IStyle;

Style set for the root element.

property text

text?: IStyle;

Style set for the element containing the text.

interface IModal

interface IModal {}

property focus

focus: () => void;

Sets focus on the first focusable, or configured, child in focus trap zone

interface IModalProps

interface IModalProps
    extends React.ClassAttributes<ModalBase>,
        IWithResponsiveModeState,
        IAccessiblePopupProps {}

property allowTouchBodyScroll

allowTouchBodyScroll?: boolean;

Allow body scroll on content and overlay on touch devices. Changing after mounting has no effect. false

property className

className?: string;

Optional class name to be added to the root class

property componentRef

componentRef?: IRefObject<IModal>;

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

property containerClassName

containerClassName?: string;

Optional override for container class

property dragOptions

dragOptions?: IDragOptions;

The options to make the modal draggable

property enableAriaHiddenSiblings

enableAriaHiddenSiblings?: boolean;

Puts aria-hidden=true on all non-ancestors of the current modal, for screen readers. This is an experimental feature that will be graduated to default behavior after testing. This flag will be removed with the next major release.

property focusTrapZoneProps

focusTrapZoneProps?: IFocusTrapZoneProps;

Set of props to customize the FocusTrapZone inside of the Modal. {}

property isAlert

isAlert?: boolean;

Determines the ARIA role of the dialog (alertdialog/dialog) If this is set, it will override the ARIA role determined by isBlocking and isModeless
For more information regarding dialogs please see https://w3c.github.io/aria-practices/#alertdialog

property isBlocking

isBlocking?: boolean;

Whether the dialog can be light dismissed by clicking outside the dialog (on the overlay). false

property isDarkOverlay

isDarkOverlay?: boolean;

Whether the overlay is dark themed. true

property isModeless

isModeless?: boolean;

Whether the dialog should be modeless (e.g. not dismiss when focusing/clicking outside of the dialog). if true: isBlocking is ignored, there will be no overlay (isDarkOverlay is ignored), isClickableOutsideFocusTrap is true, and forceFocusInsideTrap is false

property isOpen

isOpen?: boolean;

Whether the dialog is displayed. false

property layerProps

layerProps?: ILayerProps;

Defines an optional set of props to be passed through to Layer

property onDismiss

onDismiss?: (ev?: React.MouseEvent<HTMLButtonElement>) => any;

A callback function for when the Modal is dismissed light dismiss, before the animation completes.

property onDismissed

onDismissed?: () => any;

A callback function which is called after the Modal is dismissed and the animation is complete.

property onLayerDidMount

onLayerDidMount?: () => void;

A callback function for when the Modal content is mounted on the overlay layer
Deprecated
Use layerProps.onLayerDidMount instead

property overlay

overlay?: IOverlayProps;

Defines an optional set of props to be passed through to Overlay

property scrollableContentClassName

scrollableContentClassName?: string;

Optional override for scrollable content class

property styles

styles?: IStyleFunctionOrObject<IModalStyleProps, IModalStyles>;

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

property subtitleAriaId

subtitleAriaId?: string;

ARIA id for the subtitle of the Modal, if any

property theme

theme?: ITheme;

Theme provided by High-Order Component.

property titleAriaId

titleAriaId?: string;

ARIA id for the title of the Modal, if any

property topOffsetFixed

topOffsetFixed?: boolean;

Whether the modal should have top offset fixed once opened and expand from the bottom only when the content changes dynamically.

interface IModalStyles

interface IModalStyles {}

property keyboardMoveIcon

keyboardMoveIcon: IStyle;

property keyboardMoveIconContainer

keyboardMoveIconContainer: IStyle;

property layer

layer: IStyle;

property main

main: IStyle;

property root

root: IStyle;

property scrollableContent

scrollableContent: IStyle;

interface INav

interface INav {}

property selectedKey

selectedKey: string | undefined;

The meta 'key' property of the currently selected NavItem of the Nav. Can return undefined if the currently selected nav item has no populated key property. Be aware that in order for Nav to properly understand which key is selected all NavItems in all groups of the Nav must have populated key properties.

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.

interface INavButtonProps

interface INavButtonProps extends IButtonProps {}

property link

link?: INavLink;

(Optional) Link to be rendered.

interface INavLink

interface INavLink {}

property ariaCurrent

ariaCurrent?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true';

Aria-current token for active nav links. Must be a valid token value, and defaults to 'page'.

property ariaLabel

ariaLabel?: string;

Aria label for nav link. Ignored if collapseAriaLabel or expandAriaLabel is provided.

property automationId

automationId?: string;

The name to use for functional automation tests

property collapseAriaLabel

collapseAriaLabel?: string;

ARIA label when group is collapsed and can be expanded.

property disabled

disabled?: boolean;

Whether or not the link is disabled.

property expandAriaLabel

expandAriaLabel?: string;

ARIA label when group is collapsed and can be expanded.

property forceAnchor

forceAnchor?: boolean;

(Optional) By default, any link with onClick defined will render as a button. Set this property to true to override that behavior. (Links without onClick defined will render as anchors by default.)

property icon

icon?: string;

Name of an icon to render next to the link button.

property iconClassName

iconClassName?: string;

Deprecated. Use iconProps.className instead.
Deprecated
Use iconProps.className instead.

property iconProps

iconProps?: IIconProps;

Props for an icon to render next to the link button.

property isExpanded

isExpanded?: boolean;

Whether or not the link is in an expanded state

property key

key?: string;

Unique, stable key for the link, used when rendering the list of links and for tracking the currently selected link.

property links

links?: INavLink[];

Child links to this link, if any

property name

name: string;

Text to render for this link

property onClick

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

Callback invoked when this link is clicked. Providing this callback will cause the link to render as a button (rather than an anchor) unless forceAnchor is set to true.

property target

target?: string;

Link target.

property title

title?: string;

Text for title tooltip and ARIA description.

property url

url: string;

URL to navigate to for this link

index signature

[propertyName: string]: any;

(Optional) Any additional properties to apply to the rendered links.

interface INavLinkGroup

interface INavLinkGroup {}

property automationId

automationId?: string;

The name to use for functional automation tests

property collapseAriaLabel

collapseAriaLabel?: string;

ARIA label when group is collapsed and can be expanded.

property collapseByDefault

collapseByDefault?: boolean;

If true, the group should render collapsed by default

property expandAriaLabel

expandAriaLabel?: string;

ARIA label when group is collapsed and can be expanded.

property groupData

groupData?: any;

(Optional) Any additional properties to apply to a group.

property links

links: INavLink[];

Links to render within this group

property name

name?: string;

Text to render as the header of a group

property onHeaderClick

onHeaderClick?: (
    ev?: React.MouseEvent<HTMLElement>,
    isCollapsing?: boolean
) => void;

Callback invoked when a group header is clicked

interface INavProps

interface INavProps {}

property ariaLabel

ariaLabel?: string;

(Optional) The nav container aria label.

property className

className?: string;

Additional css class to apply to the Nav

property componentRef

componentRef?: IRefObject<INav>;

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

property expandButtonAriaLabel

expandButtonAriaLabel?: string;

(Optional) The nav container aria label. The link name is prepended to this label. If not provided, the aria label will default to the link name.
Deprecated
- Use expandAriaLabel and collapseAriaLabel on groups instead

property focusZoneProps

focusZoneProps?: IFocusZoneProps;

(Optional) Used to define the props of the FocusZone wrapper.

property groups

groups: INavLinkGroup[] | null;

A collection of link groups to display in the navigation bar

property initialSelectedKey

initialSelectedKey?: string;

(Optional) The key of the nav item initially selected.

property isOnTop

isOnTop?: boolean;

Indicates whether the navigation component renders on top of other content in the UI

property linkAs

linkAs?: IComponentAs<INavButtonProps>;

Render a custom link in place of the normal one. This replaces the entire button rather than simply button content

property onLinkClick

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

Function callback invoked when a link in the navigation is clicked

property onLinkExpandClick

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

Function callback invoked when the chevron on a link is clicked

property onRenderGroupHeader

onRenderGroupHeader?: IRenderFunction<IRenderGroupHeaderProps>;

Used to customize how content inside the group header is rendered

property onRenderLink

onRenderLink?: IRenderFunction<INavLink>;

Used to customize how content inside the link tag is rendered

property selectedAriaLabel

selectedAriaLabel?: string;

(Deprecated) Use ariaCurrent on links instead
Deprecated
Use ariaCurrent on links instead

property selectedKey

selectedKey?: string;

(Optional) The key of the nav item selected by caller.

property styles

styles?: IStyleFunctionOrObject<INavStyleProps, INavStyles>;

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

property theme

theme?: ITheme;

Theme provided by HOC.

interface INavState

interface INavState {}

property isGroupCollapsed

isGroupCollapsed: {
    [key: string]: boolean;
};

property isLinkExpandStateChanged

isLinkExpandStateChanged?: boolean;

property selectedKey

selectedKey?: string;

interface INavStyleProps

interface INavStyleProps {}

property className

className?: string;

Accept custom classNames

property groups

groups: INavLinkGroup[] | null;

Inherited from INavProps A collection of link groups to display in the navigation bar

property isButtonEntry

isButtonEntry?: boolean;

is button

property isDisabled

isDisabled?: boolean;

is element disabled

property isExpanded

isExpanded?: boolean;

is element expanded boolean

property isGroup

isGroup?: boolean;

is element a group boolean

property isLink

isLink?: boolean;

is element a link boolean

property isOnTop

isOnTop?: boolean;

is element on top boolean

property isSelected

isSelected?: boolean;

is element selected boolean

property leftPadding

leftPadding?: number;

left padding value

property leftPaddingExpanded

leftPaddingExpanded?: number;

left padding when expanded value

property navHeight

navHeight?: number;

Nav height value

property position

position?: number;

position value

property rightPadding

rightPadding?: number;

right padding value

property theme

theme: ITheme;

Accept theme prop.

interface INavStyles

interface INavStyles {}

property chevronButton

chevronButton: IStyle;

Style set for the chevron button inside the composite link and group elements.

property chevronIcon

chevronIcon: IStyle;

Style set for the chevron icon inside the composite link and group elements.

property compositeLink

compositeLink: IStyle;

Style set for the composite link container div element

property group

group: IStyle;

Style set for the group root div.

property groupContent

groupContent: IStyle;

Style set for the group content div inside group.

property link

link: IStyle;

Style set for the link element extending the root style set for ActionButton component.

property linkText

linkText: IStyle;

Style set for the link text container div element.

property navItem

navItem: IStyle;

Style set for the nav links li element.

property navItems

navItems: IStyle;

Style set for the nav links ul element.

property root

root: IStyle;

Style set for the root element.

interface IOnRenderComboBoxLabelProps

interface IOnRenderComboBoxLabelProps {}

property multiselectAccessibleText

multiselectAccessibleText?: string;

Accessible text for label when ComboBox is multiselected.

property props

props: IComboBoxProps;

Props to render the ComboBox.

interface IOverflowSet

interface IOverflowSet {}

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 focusElement

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

Sets focus to a specific child element within the zone. This can be used in conjunction with shouldReceiveFocus to created delayed focus scenarios (like animate the scroll position to the correct location and then focus.)
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.

interface IOverflowSetItemProps

interface IOverflowSetItemProps {}

property key

key: string;

Unique id to identify the item.

property keytipProps

keytipProps?: IKeytipProps;

Optional keytip for the overflowSetItem.

index signature

[propertyName: string]: any;

Any additional properties to use when custom rendering menu items.

interface IOverflowSetProps

interface IOverflowSetProps extends React.ClassAttributes<OverflowSetBase> {}

property className

className?: string;

Class name

property componentRef

componentRef?: IRefObject<IOverflowSet>;

Gets the component ref.

property doNotContainWithinFocusZone

doNotContainWithinFocusZone?: boolean;

If true do not contain the OverflowSet inside of a FocusZone, otherwise the OverflowSet will contain a FocusZone. If this is set to true focusZoneProps will be ignored. Use one or the other.
Deprecated
In 8.0 the OverflowSet will no longer be wrapped in a FocusZone

property focusZoneProps

focusZoneProps?: IFocusZoneProps;

Custom properties for OverflowSet's FocusZone. If doNotContainWithinFocusZone is set to true focusZoneProps will be ignored. Use one or the other.
Deprecated
In 8.0 the OverflowSet will no longer be wrapped in a FocusZone

property items

items?: IOverflowSetItemProps[];

An array of items to be rendered by your onRenderItem function in the primary content area

property itemSubMenuProvider

itemSubMenuProvider?: (
    item: IOverflowSetItemProps
) => any[] | boolean | undefined;

Function that will take in an IOverflowSetItemProps and return the subMenu for that item. If not provided, will use 'item.subMenuProps.items' by default. Alternatively accepts a boolean, return True if the item has a menu and False if not This is only used if your overflow set has keytips.

property keytipSequences

keytipSequences?: string[];

Optional full keytip sequence for the overflow button, if it will have a keytip.

property onRenderItem

onRenderItem: (item: IOverflowSetItemProps) => any;

Method to call when trying to render an item.

property onRenderOverflowButton

onRenderOverflowButton: IRenderFunction<any[]>;

Rendering method for overflow button and contextual menu. The argument to the function is the overflowItems passed in as props to this function.

property overflowItems

overflowItems?: IOverflowSetItemProps[];

An array of items to be passed to overflow contextual menu

property overflowSide

overflowSide?: 'start' | 'end';

Controls wether or not the overflow button is placed at the start or end of the items. This gives a reveresed visual behavior but maintains correct keyboard navigation.

property role

role?: string;

The role for the OverflowSet.

property styles

styles?: IStyleFunctionOrObject<IOverflowSetProps, IOverflowSetStyles>;

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

property vertical

vertical?: boolean;

Change item layout direction to vertical/stacked. If role is set to menubar, vertical={true} will also add proper aria-orientation.

interface IOverflowSetStyles

interface IOverflowSetStyles {}

property item

item?: IStyle;

The style that is layered onto each individual item in the overflow set.

property overflowButton

overflowButton?: IStyle;

The style that is layered onto the overflow button for the overflow set.

property root

root?: IStyle;

The style that is layered onto the root element of OverflowSet.

interface IOverlay

interface IOverlay {}

interface IOverlayProps

interface IOverlayProps extends React.HTMLAttributes<HTMLElement> {}

property allowTouchBodyScroll

allowTouchBodyScroll?: boolean;

Allow body scroll on touch devices. Changing after mounting has no effect.

property className

className?: string;

Additional css class to apply to the Overlay

property componentRef

componentRef?: IRefObject<IOverlay>;

Gets the component ref.

property isDarkThemed

isDarkThemed?: boolean;

Whether to use the dark-themed overlay.

property onClick

onClick?: () => void;

property styles

styles?: IStyleFunctionOrObject<IOverlayStyleProps, IOverlayStyles>;

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

property theme

theme?: ITheme;

Theme provided by HOC.

interface IOverlayStyleProps

interface IOverlayStyleProps {}

property className

className?: string;

Accept custom classNames

property isDark

isDark?: boolean;

Is overlay dark themed

property isNone

isNone?: boolean;

Is overlay visible

property theme

theme: ITheme;

Accept theme prop.

interface IOverlayStyles

interface IOverlayStyles {}

property root

root: IStyle;

Style for the root element.

interface IPage

interface IPage<T = any> {}

property data

data?: any;

property height

height: number;

property isSpacer

isSpacer?: boolean;

property isVisible

isVisible?: boolean;

property itemCount

itemCount: number;

property items

items: T[] | undefined;

property key

key: string;

property startIndex

startIndex: number;

property style

style: React.CSSProperties;

property top

top: number;

interface IPageProps

interface IPageProps<T = any>
    extends React.HTMLAttributes<HTMLDivElement>,
        React.ClassAttributes<HTMLDivElement> {}

property page

page: IPage<T>;

The allocation data for the page.

property role

role?: string;

The role being assigned to the rendered page element by the list.

interface IPageSpecification

interface IPageSpecification {}

property data

data?: any;

Data to pass through to the page when rendering.

property height

height?: number;

The estimated pixel height of the page.

property itemCount

itemCount?: number;

The number of items to allocate to the page.

property key

key?: string;

The key to use when creating the page.

interface IPanel

interface IPanel {}

property dismiss

dismiss: (ev?: React.KeyboardEvent<HTMLElement>) => void;

Forces the panel to dismiss.

property open

open: () => void;

Forces the panel to open.

interface IPanelHeaderRenderer

interface IPanelHeaderRenderer extends IRenderFunction<IPanelProps> {}

Renderer function which takes an additional parameter, the ID to use for the element containing the panel's title. This allows the aria-labelledby for the panel popup to work correctly. Note that if headerTextId is provided, it **must** be used on an element, or screen readers will be confused by the reference to a nonexistent ID.

call signature

(
    props?: IPanelProps,
    defaultRender?: IPanelHeaderRenderer,
    headerTextId?: string | undefined
): JSX.Element | null;

Parameter props
Props given to the panel
Parameter defaultRender
Default header renderer. If using this renderer in code that does not assign headerTextId to an element elsewhere, it **must** be passed to this function.
Parameter headerTextId
If provided, this **must** be used as the ID of an element containing the panel's title, because the panel popup uses this ID as its aria-labelledby.

interface IPanelProps

interface IPanelProps extends React.HTMLAttributes<PanelBase> {}

property allowTouchBodyScroll

allowTouchBodyScroll?: boolean;

Allow body scroll on content and overlay on touch devices. Changing after mounting has no effect.

property className

className?: string;

Additional css class to apply to the Panel

property closeButtonAriaLabel

closeButtonAriaLabel?: string;

Aria label on close button

property componentId

componentId?: string;

Deprecated property. Serves no function.
Deprecated
Serves no function.

property componentRef

componentRef?: IRefObject<IPanel>;

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

property customWidth

customWidth?: string;

Custom panel width, used only when type is set to PanelType.custom.

property elementToFocusOnDismiss

elementToFocusOnDismiss?: HTMLElement;

Sets the HTMLElement to focus on when exiting the FocusTrapZone.

property firstFocusableSelector

firstFocusableSelector?: string;

Indicates the selector for first focusable item. Deprecated, use focusTrapZoneProps.
Deprecated
Use focusTrapZoneProps.

property focusTrapZoneProps

focusTrapZoneProps?: IFocusTrapZoneProps;

Optional props to pass to the FocusTrapZone component to manage focus in the panel.

property forceFocusInsideTrap

forceFocusInsideTrap?: boolean;

Indicates whether Panel should force focus inside the focus trap zone. If not explicitly specified, behavior aligns with FocusTrapZone's default behavior. Deprecated, use focusTrapZoneProps.
Deprecated
Use focusTrapZoneProps.

property hasCloseButton

hasCloseButton?: boolean;

Has the close button visible.

property headerClassName

headerClassName?: string;

Optional parameter to provider the class name for header text

property headerText

headerText?: string;

Header text for the Panel.

property headerTextProps

headerTextProps?: React.HTMLAttributes<HTMLDivElement>;

The props for header text container.

property ignoreExternalFocusing

ignoreExternalFocusing?: boolean;

Indicates if this Panel will ignore keeping track of HTMLElement that activated the Zone. Deprecated, use focusTrapZoneProps.
Deprecated
Use focusTrapZoneProps.

property isBlocking

isBlocking?: boolean;

Whether the panel uses a modal overlay or not

property isFooterAtBottom

isFooterAtBottom?: boolean;

Determines if content should stretch to fill available space putting footer at the bottom of the page

property isHiddenOnDismiss

isHiddenOnDismiss?: boolean;

Whether the panel is hidden on dismiss, instead of destroyed in the DOM. Protects the contents from being destroyed when the panel is dismissed.

property isLightDismiss

isLightDismiss?: boolean;

Whether the panel can be light dismissed.

property isOpen

isOpen?: boolean;

Whether the panel is displayed. If true, will cause panel to stay open even if dismissed. If false, will cause panel to stay hidden. If undefined, will allow the panel to control its own visility through open/dismiss methods.

property layerProps

layerProps?: ILayerProps;

Optional props to pass to the Layer component hosting the panel.

property onDismiss

onDismiss?: (ev?: React.SyntheticEvent<HTMLElement>) => void;

A callback function for when the panel is closed, before the animation completes. If the panel should NOT be dismissed based on some keyboard event, then simply call ev.preventDefault() on it

property onDismissed

onDismissed?: () => void;

A callback function which is called **after** the Panel is dismissed and the animation is complete. (If you need to update the Panel's isOpen prop in response to a dismiss event, use onDismiss instead.)

property onLightDismissClick

onLightDismissClick?: () => void;

Optional custom function to handle clicks outside the panel in lightdismiss mode

property onOpen

onOpen?: () => void;

A callback function for when the Panel is opened, before the animation completes.

property onOpened

onOpened?: () => void;

A callback function for when the Panel is opened, after the animation completes.

property onOuterClick

onOuterClick?: (ev?: React.MouseEvent<HTMLDivElement>) => void;

Optional custom function to handle clicks outside this component

property onRenderBody

onRenderBody?: IRenderFunction<IPanelProps>;

Optional custom renderer for body region. Replaces any children passed into the component.

property onRenderFooter

onRenderFooter?: IRenderFunction<IPanelProps>;

Optional custom renderer for footer region. Replaces sticky footer.

property onRenderFooterContent

onRenderFooterContent?: IRenderFunction<IPanelProps>;

Custom renderer for content in the sticky footer

property onRenderHeader

onRenderHeader?: IPanelHeaderRenderer;

Optional custom renderer for header region. Replaces current title

property onRenderNavigation

onRenderNavigation?: IRenderFunction<IPanelProps>;

Optional custom renderer navigation region. Replaces the region that contains the close button.

property onRenderNavigationContent

onRenderNavigationContent?: IRenderFunction<IPanelProps>;

Optional custom renderer for content in the navigation region. Replaces current close button.

property overlayProps

overlayProps?: IOverlayProps;

Optional props to pass to the Overlay component that the panel uses.

property popupProps

popupProps?: IPopupProps;

Optional props to pass the Popup component that the panel uses.

property styles

styles?: IStyleFunctionOrObject<IPanelStyleProps, IPanelStyles>;

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

property theme

theme?: ITheme;

Theme provided by High-Order Component.

property type

type?: PanelType;

Type of the panel.

interface IPanelStyleProps

interface IPanelStyleProps {}

property className

className?: string;

Accept custom classNames

property focusTrapZoneClassName

focusTrapZoneClassName?: string;

Classname for FocusTrapZone element

property hasCloseButton

hasCloseButton?: boolean;

Panel has close button

property hasCustomNavigation

hasCustomNavigation?: boolean;

Determines where the header is rendered based on whether the user has passed in a custom onRenderNavigation or onRenderNavigationContent render callback

property headerClassName

headerClassName?: string;

Optional parameter to provider the class name for header text

property isAnimating

isAnimating?: boolean;

Is animation currently running

property isFooterAtBottom

isFooterAtBottom?: boolean;

Determines if content should stretch to fill available space putting footer at the bottom of the page

property isFooterSticky

isFooterSticky?: boolean;

Based on state value setting footer to sticky or not

property isHiddenOnDismiss

isHiddenOnDismiss?: boolean;

Is panel hidden on dismiss

property isOnRightSide

isOnRightSide?: boolean;

Is panel on right side

property isOpen

isOpen?: boolean;

Is Panel open

property theme

theme: ITheme;

Theme provided by High-Order Component.

property type

type?: PanelType;

Type of the panel.

interface IPanelStyles

interface IPanelStyles {}

property closeButton

closeButton?: IStyle;

Style for the close button IconButton element.
Deprecated
Use subComponentStyles.closeButton instead.

property commands

commands: IStyle;

Style for the navigation container element.

property content

content: IStyle;

Style for the body div element.

property contentInner

contentInner: IStyle;

Style for the Body and Footer container element.

footer: IStyle;

Style for the footer div element.

property footerInner

footerInner: IStyle;

Style for the inner footer div element.

header: IStyle;

Style for the header container div element.

property headerText

headerText: IStyle;

Style for the header text div element.

property hiddenPanel

hiddenPanel: IStyle;

Style for the hidden element.

property main

main: IStyle;

Style for the main section element.

navigation: IStyle;

Style for the close button container element.

property overlay

overlay: IStyle;

Style for the overlay element.

property root

root: IStyle;

Style for the root element.

property scrollableContent

scrollableContent: IStyle;

Style for the scrollable content area container element.

property subComponentStyles

subComponentStyles: IPanelSubComponentStyles;

Styling for subcomponents.

interface IPanelSubComponentStyles

interface IPanelSubComponentStyles {}

property closeButton

closeButton: Partial<IButtonStyles>;

Styling for close button child component.

interface IPeopleFloatingPickerProps

interface IPeopleFloatingPickerProps
    extends IBaseFloatingPickerProps<IPersonaProps> {}

interface IPeoplePickerItemProps

interface IPeoplePickerItemProps extends IPickerItemProps<IExtendedPersonaProps> {}

interface IPeoplePickerItemSelectedProps

interface IPeoplePickerItemSelectedProps
    extends IPickerItemProps<
            IPersonaProps & {
                ValidationState: ValidationState;
            }
        >,
        IPeoplePickerItemSharedProps {}

PeoplePickerItemSelected props interface. Refers to the PeoplePicker items that have been picked already.

property styles

styles?: IStyleFunctionOrObject<
    IPeoplePickerItemSelectedStyleProps,
    IPeoplePickerItemSelectedStyles
>;

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

interface IPeoplePickerItemSelectedStyles

interface IPeoplePickerItemSelectedStyles {}

Represents the stylable areas of the PeoplePickerItemSelected.

property itemContent

itemContent: IStyle;

Refers to the element holding the content (Persona) of the PeoplePicker item already picked.

property removeButton

removeButton: IStyle;

Refers to the remove action button on a picked PeoplePicker item.

property root

root: IStyle;

Root element of picked PeoplePicker item

property subComponentStyles

subComponentStyles: IPeoplePickerItemSelectedSubComponentStyles;

SubComponent (Persona, PersonaCoin) styles.

interface IPeoplePickerItemSelectedSubComponentStyles

interface IPeoplePickerItemSelectedSubComponentStyles {}

Styles interface of the SubComponents rendered within PeoplePickerItemSelected.

property persona

persona: IStyleFunctionOrObject<IPersonaStyleProps, any>;

Refers to the Persona rendered within the PeoplePickerItemSelected

property personaCoin

personaCoin?: IStyleFunctionOrObject<IPersonaCoinStyleProps, any>;

Refers to the PersonaCoin in the Persona rendered within the PeoplePickerItemSelected

interface IPeoplePickerItemSharedProps

interface IPeoplePickerItemSharedProps {}

Common props in between IPeoplePickerItemSelectedProps, IPeoplePickerItemWithMenuProps and IPeoplePickerItemSuggestionProps.

property className

className?: string;

Additional CSS class(es) to apply to the PeoplePickerItem root element.

property theme

theme?: ITheme;

Theme provided by High-Order Component.

interface IPeoplePickerItemState

interface IPeoplePickerItemState {}

property contextualMenuVisible

contextualMenuVisible: boolean;

interface IPeoplePickerItemSuggestionProps

interface IPeoplePickerItemSuggestionProps extends IPeoplePickerItemSharedProps {}

PeoplePickerItemSuggestion props interface. Refers to the PeoplePicker items that are suggested for picking.

property compact

compact?: boolean;

Flag that controls whether each suggested PeoplePicker item (Persona) is rendered with or without secondary text for compact look.

property personaProps

personaProps?: IPersonaProps;

Persona props for each suggested for picking PeoplePicker item.

property styles

styles?: IStyleFunctionOrObject<
    IPeoplePickerItemSuggestionStyleProps,
    IPeoplePickerItemSuggestionStyles
>;

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

property suggestionsProps

suggestionsProps?: IBasePickerSuggestionsProps;

General common props for all PeoplePicker items suggestions.

interface IPeoplePickerItemSuggestionStyles

interface IPeoplePickerItemSuggestionStyles {}

Represents the stylable areas of the PeoplePickerItemSuggestion.

property personaWrapper

personaWrapper: IStyle;

Refers to the element wrapping the Persona of the suggested PeoplePicker item.

property root

root: IStyle;

Root container element of a suggested PeoplePicker item.

property subComponentStyles

subComponentStyles: IPeoplePickerItemSelectedSubComponentStyles;

SubComponent (Persona, PersonaCoin) styles.

interface IPeoplePickerItemWithMenuProps

interface IPeoplePickerItemWithMenuProps
    extends IPickerItemProps<IPersonaWithMenu> {}

PeoplePickerItemWithMenu props interface.
Deprecated
Do not use. Will be removed in Fabric 7.0

interface IPeoplePickerProps

interface IPeoplePickerProps extends IBasePickerProps<IPersonaProps> {}

PeoplePicker props interface which renders Personas as items.

interface IPersona

interface IPersona {}

interface IPersonaCoinProps

interface IPersonaCoinProps extends IPersonaSharedProps {}

property className

className?: string;

Additional css class to apply to the PersonaCoin undefined

property componentRef

componentRef?: IRefObject<{}>;

Gets the component ref.

property styles

styles?: IStyleFunctionOrObject<IPersonaCoinStyleProps, IPersonaCoinStyles>;

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

interface IPersonaCoinStyleProps

interface IPersonaCoinStyleProps {}

property className

className?: string;

Custom class name.

property coinSize

coinSize?: number;

Optional custom persona coin size in pixel.

property showUnknownPersonaCoin

showUnknownPersonaCoin?: boolean;

Decides whether to display coin for unknown persona

property size

size?: PersonaSize;

Decides the size of the control. PersonaSize.size48

property theme

theme: ITheme;

Theme provided by High-Order Component.

interface IPersonaCoinStyles

interface IPersonaCoinStyles {}

property coin

coin: IStyle;

property image

image: IStyle;

property imageArea

imageArea: IStyle;

property initials

initials: IStyle;

property size10WithoutPresenceIcon

size10WithoutPresenceIcon: IStyle;

interface IPersonaPresenceProps

interface IPersonaPresenceProps extends IPersonaSharedProps {}

property componentRef

componentRef?: IRefObject<{}>;

Gets the component ref.

property styles

styles?: IStyleFunctionOrObject<
    IPersonaPresenceStyleProps,
    IPersonaPresenceStyles
>;

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

interface IPersonaPresenceStyles

interface IPersonaPresenceStyles {}

property presence

presence: IStyle;

property presenceIcon

presenceIcon: IStyle;

interface IPersonaProps

interface IPersonaProps extends IPersonaSharedProps {}

property className

className?: string;

Additional CSS class(es) to apply to the Persona

property componentRef

componentRef?: IRefObject<IPersona>;

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

property onRenderOptionalText

onRenderOptionalText?: IRenderFunction<IPersonaProps>;

Optional custom renderer for the optional text.

property onRenderPrimaryText

onRenderPrimaryText?: IRenderFunction<IPersonaProps>;

Optional custom renderer for the primary text.

property onRenderSecondaryText

onRenderSecondaryText?: IRenderFunction<IPersonaProps>;

Optional custom renderer for the secondary text.

property onRenderTertiaryText

onRenderTertiaryText?: IRenderFunction<IPersonaProps>;

Optional custom renderer for the tertiary text.

property styles

styles?: IStyleFunctionOrObject<IPersonaStyleProps, IPersonaStyles>;

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

interface IPersonaSharedProps

interface IPersonaSharedProps
    extends React.HTMLAttributes<PersonaBase | PersonaCoinBase | HTMLDivElement> {}

property allowPhoneInitials

allowPhoneInitials?: boolean;

Whether initials are calculated for phone numbers and number sequences. Example: Set property to true to get initials for project names consisting of numbers only. false

property coinProps

coinProps?: IPersonaCoinProps;

Optional HTML element props for Persona coin.

property coinSize

coinSize?: number;

Optional custom persona coin size in pixel.

property hidePersonaDetails

hidePersonaDetails?: boolean;

Whether to not render persona details, and just render the persona image/initials.

property imageAlt

imageAlt?: string;

Alt text for the image to use. Defaults to an empty string.

property imageInitials

imageInitials?: string;

The user's initials to display in the image area when there is no image. [Derived from text]

property imageShouldFadeIn

imageShouldFadeIn?: boolean;

If true, adds the css class 'is-fadeIn' to the image.

property imageShouldStartVisible

imageShouldStartVisible?: boolean;

If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until it is successfully loaded. This disables imageShouldFadeIn. false

property imageUrl

imageUrl?: string;

Url to the image to use, should be a square aspect ratio and big enough to fit in the image area.

property initialsColor

initialsColor?: PersonaInitialsColor | string;

The background color when the user's initials are displayed. [Derived from text]

property initialsTextColor

initialsTextColor?: string;

The text color when the user's initials are displayed

property isOutOfOffice

isOutOfOffice?: boolean;

This flag can be used to signal the persona is out of office. This will change the way the presence icon looks for statuses that support dual-presence.

property onPhotoLoadingStateChange

onPhotoLoadingStateChange?: (newImageLoadState: ImageLoadState) => void;

Optional callback for when loading state of the photo changes

property onRenderCoin

onRenderCoin?: IRenderFunction<IPersonaSharedProps>;

Optional custom renderer for the coin
Deprecated
Use onRenderPersonaCoin for custom rendering instead

property onRenderInitials

onRenderInitials?: IRenderFunction<IPersonaSharedProps>;

Optional custom renderer for the initials

property onRenderPersonaCoin

onRenderPersonaCoin?: IRenderFunction<IPersonaSharedProps>;

Optional custom renderer for the coin

property optionalText

optionalText?: string;

Optional text to display, usually a custom message set. The optional text will only be shown when using size100.

property presence

presence?: PersonaPresence;

Presence of the person to display - will not display presence if undefined. PersonaPresence.none

property presenceColors

presenceColors?: {
    available: string;
    away: string;
    busy: string;
    dnd: string;
    offline: string;
    oof: string;
    background: string;
};

The colors to be used for the presence-icon and it's background

property presenceTitle

presenceTitle?: string;

Presence title to be shown as a tooltip on hover over the presence icon.

property primaryText

primaryText?: string;

Primary text to display, usually the name of the person.
Deprecated
Use text instead.

property secondaryText

secondaryText?: string;

Secondary text to display, usually the role of the user.

property showInitialsUntilImageLoads

showInitialsUntilImageLoads?: boolean;

If true renders the initials while the image is loading. This only applies when an imageUrl is provided. false

property showOverflowTooltip

showOverflowTooltip?: boolean;

Controls whether clipped overflow text should render in a tooltip. true

property showSecondaryText

showSecondaryText?: boolean;

property showUnknownPersonaCoin

showUnknownPersonaCoin?: boolean;

If true, show the special coin for unknown persona. It has '?' in place of initials, with static font and background colors

property size

size?: PersonaSize;

Decides the size of the control. PersonaSize.size48

property tertiaryText

tertiaryText?: string;

Tertiary text to display, usually the status of the user. The tertiary text will only be shown when using size72 or size100.

property text

text?: string;

Primary text to display, usually the name of the person.

property theme

theme?: ITheme;

Theme provided by High-Order Component.

interface IPersonaState

interface IPersonaState {}

property isImageError

isImageError?: boolean;

property isImageLoaded

isImageLoaded?: boolean;

interface IPersonaStyleProps

interface IPersonaStyleProps {}

property className

className?: string;

Custom class name.

property coinSize

coinSize?: number;

Optional custom persona coin size in pixel.

property presence

presence?: PersonaPresence;

Presence of the person to display - will not display presence if undefined. PersonaPresence.none

property showSecondaryText

showSecondaryText?: boolean;

property size

size?: PersonaSize;

Decides the size of the control. PersonaSize.size48

property theme

theme: ITheme;

Theme provided by High-Order Component.

interface IPersonaStyles

interface IPersonaStyles {}

property details

details: IStyle;

property optionalText

optionalText: IStyle;

property primaryText

primaryText: IStyle;

property root

root: IStyle;

property secondaryText

secondaryText: IStyle;

property tertiaryText

tertiaryText: IStyle;

property textContent

textContent: IStyle;

interface IPersonaWithMenu

interface IPersonaWithMenu extends IPersonaProps {}

Extended interface from IPersonaProps to add menuItems property PeoplePickerItemWithMenu items.
Deprecated
Do not use. Will be removed in Fabric 7.0

property menuItems

menuItems?: IContextualMenuItem[];

Additional menuItems to be rendered in a contextualMenu for each Persona.

interface IPickerItem

interface IPickerItem {}

PickerItem component.

interface IPickerItemProps

interface IPickerItemProps<T> extends React.AllHTMLAttributes<HTMLElement> {}

PickerItem props common for any type of items.

property componentRef

componentRef?: IRefObject<IPickerItem>;

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

property index

index: number;

Index number of the item in the array of picked items.

property item

item: T;

The item of Type T (Persona, Tag, or any other custom item provided).

property key

key?: string | number;

Unique key for each picked item.

property onItemChange

onItemChange?: (item: T, index: number) => void;

Internal Use only, gives a callback to the renderer to call when an item has changed. This allows the base picker to keep track of changes in the items.

property onRemoveItem

onRemoveItem?: () => void;

Callback issued when the item is removed from the array of picked items.

property removeButtonAriaLabel

removeButtonAriaLabel?: string;

Aria-label for the picked item remove button.

property selected

selected?: boolean;

Whether the picked item is selected or not.

interface IPivot

interface IPivot {}

method focus

focus: () => void;

Sets focus to the first pivot tab.

interface IPivotItemProps

interface IPivotItemProps extends React.HTMLAttributes<HTMLDivElement> {}

property alwaysRender

alwaysRender?: boolean;

Defines whether to always render the pivot item (regardless of whether it is selected or not). Useful if you're rendering content that is expensive to mount.

property ariaLabel

ariaLabel?: string;

The aria label of each pivot link which will read by screen reader instead of linkText.
Note that unless you have compelling requirements you should not override aria-label.

property componentRef

componentRef?: IRefObject<{}>;

Gets the component ref.

property headerButtonProps

headerButtonProps?:
    | IButtonProps
    | {
          [key: string]: string | number | boolean;
      };

Props for the header command button. This provides a way to pass in native props, such as data-* and aria-*, for each pivot header/link element.

property headerText

headerText?: string;

The text displayed of each pivot link.

property itemCount

itemCount?: number | string;

Defines an optional item count displayed in parentheses just after the linkText.
Examples: completed (4), Unread (99+)

property itemIcon

itemIcon?: string;

An optional icon to show next to the pivot link.

property itemKey

itemKey?: string;

An required key to uniquely identify a pivot item.
Note: The 'key' from react props cannot be used inside component.

property keytipProps

keytipProps?: IKeytipProps;

Optional keytip for this PivotItem.

property linkText

linkText?: string;

The text displayed of each pivot link - renaming to headerText.
Deprecated
Use headerText instead.

property onRenderItemLink

onRenderItemLink?: IRenderFunction<IPivotItemProps>;

Optional custom renderer for the pivot item link.

interface IPivotProps

interface IPivotProps
    extends React.ClassAttributes<PivotBase>,
        React.HTMLAttributes<HTMLDivElement> {}

property className

className?: string;

Additional css class to apply to the Pivot

property componentRef

componentRef?: IRefObject<IPivot>;

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

property defaultSelectedIndex

defaultSelectedIndex?: number;

Default selected index for the pivot. Only provide this if the pivot is an uncontrolled component; otherwise, use the selectedKey property.
This property is also mutually exclusive with defaultSelectedKey.
Deprecated
Use defaultSelectedKey

property defaultSelectedKey

defaultSelectedKey?: string;

Default selected key for the pivot. Only provide this if the pivot is an uncontrolled component; otherwise, use the selectedKey property.
This property is also mutually exclusive with defaultSelectedIndex.

property focusZoneProps

focusZoneProps?: IFocusZoneProps;

Props passed to the FocusZone component used as the root of Pivot.

property getTabId

getTabId?: (itemKey: string, index: number) => string;

Callback to customize how IDs are generated for each tab header. Useful if you're rendering content outside and need to connect aria-labelledby.

property headersOnly

headersOnly?: boolean;

Whether to skip rendering the tabpanel with the content of the selected tab. Use this prop if you plan to separately render the tab content and don't want to leave an empty tabpanel in the page that may confuse Screen Readers.

property initialSelectedIndex

initialSelectedIndex?: number;

Index of the pivot item initially selected. Mutually exclusive with initialSelectedKey. Only provide this if the pivot is an uncontrolled component; otherwise, use selectedKey.
Deprecated
Use defaultSelectedKey

property initialSelectedKey

initialSelectedKey?: string;

Key of the pivot item initially selected. Mutually exclusive with initialSelectedIndex. Only provide this if the pivot is an uncontrolled component; otherwise, use selectedKey.
Deprecated
Use defaultSelectedKey

property linkFormat

linkFormat?: PivotLinkFormat;

PivotLinkFormat to use (links, tabs)

property linkSize

linkSize?: PivotLinkSize;

PivotLinkSize to use (normal, large)

property onLinkClick

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

Callback for when the selected pivot item is changed.

property selectedKey

selectedKey?: string | null;

Key of the selected pivot item. Updating this will override the Pivot's selected item state. Only provide this if the pivot is a controlled component where you are maintaining the current state; otherwise, use defaultSelectedKey.

property styles

styles?: IStyleFunctionOrObject<IPivotStyleProps, IPivotStyles>;

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 IPivotState

interface IPivotState {}

property selectedKey

selectedKey: string | undefined;

interface IPivotStyles

interface IPivotStyles {}

property count

count: IStyle;

property icon

icon: IStyle;

property itemContainer

itemContainer?: IStyle;

property link

link: IStyle;

property linkContent

linkContent: IStyle;

property linkIsSelected

linkIsSelected: IStyle;

property root

root: IStyle;

Style for the root element.

property text

text: IStyle;

interface IPlainCard

interface IPlainCard {}

interface IPlainCardProps

interface IPlainCardProps
    extends IBaseCardProps<IPlainCard, IPlainCardStyles, IPlainCardStyleProps> {}

PlainCard component props.

property onRenderPlainCard

onRenderPlainCard?: IRenderFunction<any>;

Render function to populate compact content area

interface IPlainCardStyleProps

interface IPlainCardStyleProps extends IBaseCardStyleProps {}

interface IPlainCardStyles

interface IPlainCardStyles extends IBaseCardStyles {}

interface IPopupProps

interface IPopupProps extends React.HTMLAttributes<Popup> {}

property ariaDescribedBy

ariaDescribedBy?: string;

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

property ariaLabel

ariaLabel?: string;

Accessible label text for the popup.

property ariaLabelledBy

ariaLabelledBy?: string;

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

property className

className?: string;

Optional class name for the root popup div.

property onDismiss

onDismiss?: (
    ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
) => any;

A callback function for when the popup is dismissed from the close button or light dismiss. If provided, will handle escape keypresses and call this. The event will be stopped/canceled.

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 role

role?: string;

Aria role for popup

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 restoreFocus callback instead

interface IPopupState

interface IPopupState {}

property needsVerticalScrollBar

needsVerticalScrollBar?: boolean;

interface IPosition

interface IPosition {}

Gives the position of some element on the page. Only a pair of vertical and horizontal edges need to be given. So top/left or bottom/left is sufficient. The number given is the distance in pixels from whatever host was given.. So bottom: 100 would be 100px up from the bottom of the host while top: 100px from the top.

property bottom

bottom?: number;

property left

left?: number;

property right

right?: number;

property top

top?: number;

index signature

[key: string]: number | undefined;

interface IPositionDirectionalHintData

interface IPositionDirectionalHintData {}

property alignmentEdge

alignmentEdge?: RectangleEdge;

property alignTargetEdge

alignTargetEdge?: boolean;

property isAuto

isAuto?: boolean;

property targetEdge

targetEdge: RectangleEdge;

interface IPositionedData

interface IPositionedData {}

property alignmentEdge

alignmentEdge?: RectangleEdge;

The finalized alignment edge that the element is aligning too. For instance, RectangleEdge.left means that the left edge of the target should be in line with the left edge of the element being positioned.

property elementPosition

elementPosition: IPosition;

The new position of the element.

property targetEdge

targetEdge: RectangleEdge;

The finalized target edge that element is aligning to. For instance RectangleEdge.bottom would mean that the bottom edge of the target is being aligned to by the RectangleEdge.top of the element that is being positioned.

interface IPositioningContainer

interface IPositioningContainer {}

interface IPositioningContainerProps

interface IPositioningContainerProps extends IBaseProps<IPositioningContainer> {}

property ariaDescribedBy

ariaDescribedBy?: string;

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

property ariaLabel

ariaLabel?: string;

Accessible label text for positioningContainer.

property ariaLabelledBy

ariaLabelledBy?: string;

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

property backgroundColor

backgroundColor?: string;

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

property bounds

bounds?: IRectangle;

The bounding rectangle for which the contextual menu can appear in.

property className

className?: string;

CSS class to apply to the positioningContainer.

property componentRef

componentRef?: IRefObject<IPositioningContainer>;

All props for your component are to be defined here.

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 positioningContainer 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 directionalHint will be used instead

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 positioningContainer can adjust its position.

property minPagePadding

minPagePadding?: number;

The minimum distance the positioningContainer will be away from the edge of the screen.

property offsetFromTarget

offsetFromTarget?: number;

The gap between the positioningContainer and the target

property onDismiss

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

Callback when the positioningContainer tries to close.

property onLayerMounted

onLayerMounted?: () => void;

Optional callback when the layer content has mounted.

property onPositioned

onPositioned?: (positions?: IPositionedData) => void;

Optional callback that is called once the positioningContainer has been correctly positioned.
Parameter positions
gives the user information about how the container is positioned such as the element position, the target edge, and the alignment edge of the container.

property positioningContainerMaxHeight

positioningContainerMaxHeight?: number;

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

property positioningContainerWidth

positioningContainerWidth?: number;

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

property preventDismissOnScroll

preventDismissOnScroll?: boolean;

If true then the onClose will not not dismiss on scroll

property role

role?: string;

Aria role assigned to the positioningContainer (Eg. dialog, alertdialog).

property setInitialFocus

setInitialFocus?: boolean;

If true then the positioningContainer will attempt to focus the first focusable element that it contains. If it doesn't find an element, no focus will be set and the method will return false. This means that it's the contents responsibility to either set focus or have focusable items.
Returns
True if focus was set, false if it was not.

property target

target?: HTMLElement | string | MouseEvent | Point | null;

The target that the positioningContainer should try to position itself based on. It can be either an HTMLElement a querySelector string of a valid HTMLElement or a MouseEvent. If MouseEvent is given then the origin point of the event will be used.

property targetPoint

targetPoint?: Point;

Point used to position the positioningContainer. Deprecated, use target instead.
Deprecated
Use target instead.

property useTargetPoint

useTargetPoint?: boolean;

If true use a point rather than rectangle to position the positioningContainer. For example it can be used to position based on a click.
Deprecated
Do not use.

interface IPositioningContainerState

interface IPositioningContainerState {}

property heightOffset

heightOffset?: number;

Tracks the current height offset and updates during the height animation when props.finalHeight is specified.

property positions

positions?: IPositionedData;

Current set of calcualted positions for the outermost parent container.

interface IPositionProps

interface IPositionProps {}

property alignTargetEdge

alignTargetEdge?: boolean;

If true the positioning logic will prefer flipping edges over nudging the rectangle to fit within bounds, thus making sure the element align perfectly with target.

property bounds

bounds?: IRectangle;

The bounding rectangle for which the contextual menu can appear in.

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 edges in an attempt to fit the rectangle 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 directionalHint will be used instead

property gapSpace

gapSpace?: number;

The gap between the callout and the target

property target

target?: Element | MouseEvent | Point;

interface IProgressIndicatorProps

interface IProgressIndicatorProps
    extends React.ClassAttributes<ProgressIndicatorBase> {}

property ariaValueText

ariaValueText?: string;

Text alternative of the progress status, used by screen readers for reading the value of the progress.

property barHeight

barHeight?: number;

Height of the ProgressIndicator

property className

className?: string;

Additional css class to apply to the ProgressIndicator

property description

description?: React.ReactNode;

Text describing or supplementing the operation. May be a string or React virtual elements.

property label

label?: React.ReactNode;

Label to display above the control. May be a string or React virtual elements.

property onRenderProgress

onRenderProgress?: IRenderFunction<IProgressIndicatorProps>;

A render override for the progress track.

property percentComplete

percentComplete?: number;

Percentage of the operation's completeness, numerically between 0 and 1. If this is not set, the indeterminate progress animation will be shown instead.

property progressHidden

progressHidden?: boolean;

Whether or not to hide the progress state.

property styles

styles?: IStyleFunctionOrObject<
    IProgressIndicatorStyleProps,
    IProgressIndicatorStyles
>;

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

property theme

theme?: ITheme;

Theme provided by High-Order Component.

property title

title?: string;

Deprecated at v0.43.0, to be removed at >= v0.53.0. Use label instead.
Deprecated
Use label instead.

interface IProgressIndicatorStyleProps

interface IProgressIndicatorStyleProps {}

property barHeight

barHeight?: number;

property className

className?: string;

Accept custom classNames

property indeterminate

indeterminate?: boolean;

property theme

theme: ITheme;

Theme provided by High-Order Component.

interface IProgressIndicatorStyles

interface IProgressIndicatorStyles {}

property itemDescription

itemDescription: IStyle;

property itemName

itemName: IStyle;

property itemProgress

itemProgress: IStyle;

property progressBar

progressBar: IStyle;

property progressTrack

progressTrack: IStyle;

property root

root: IStyle;

Style for the root element.

interface IRating

interface IRating {}

interface IRatingProps

interface IRatingProps extends React.AllHTMLAttributes<HTMLElement> {}

Rating component props.

property allowZeroStars

allowZeroStars?: boolean;

Allow the rating value to be set to 0 instead of a minimum of 1.

property ariaLabel

ariaLabel?: string;

Optional aria-label for rating control. If rating control is readOnly, it is recommended to provide a getAriaLabel prop instead since otherwise the current rating value will not be read.

property ariaLabelFormat

ariaLabelFormat?: string;

Optional label format for a rating star that will be read by screen readers. Can be used like "{0} of {1} stars selected", where {0} will be substituted by the current rating and {1} will be substituted by the max rating.

property ariaLabelId

ariaLabelId?: string;

Deprecated: Optional id of label describing this instance of Rating.
Deprecated
Use getAriaLabel instead.

property componentRef

componentRef?: IRefObject<IRating>;

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

property getAriaLabel

getAriaLabel?: (rating: number, max: number) => string;

property icon

icon?: string;

Custom icon

property max

max?: number;

Maximum rating, defaults to 5, has to be >= min

property min

min?: number;

Minimum rating, defaults to 1, has to be >= 0
Deprecated
No longer used.

property onChange

onChange?: (event: React.FocusEvent<HTMLElement>, rating?: number) => void;

Callback issued when the rating changes.

property onChanged

onChanged?: (rating: number) => void;

Deprecated
Use onChange instead.

property onRenderStar

onRenderStar?: IRenderFunction<IRatingStarProps>;

Optional custom renderer for the star component.

property rating

rating?: number;

Selected rating, has to be an integer between min and max

property readOnly

readOnly?: boolean;

Optional flag to mark rating control as readOnly

property size

size?: RatingSize;

Size of rating, defaults to small

property styles

styles?: IStyleFunctionOrObject<IRatingStyleProps, IRatingStyles>;

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

property theme

theme?: ITheme;

Theme (provided through customization.)

property unselectedIcon

unselectedIcon?: string;

Custom icon for unselected rating elements.

interface IRatingStarProps

interface IRatingStarProps extends React.AllHTMLAttributes<HTMLElement> {}

property classNames

classNames: IProcessedStyleSet<IRatingStyles>;

property disabled

disabled?: boolean;

property fillPercentage

fillPercentage: number;

property icon

icon?: string;

property readOnly

readOnly?: boolean;

property starNum

starNum?: number;

interface IRatingState

interface IRatingState {}

property rating

rating: number | null | undefined;

interface IRatingStyleProps

interface IRatingStyleProps {}

property disabled

disabled?: boolean;

property readOnly

readOnly?: boolean;

property theme

theme: ITheme;

interface IRatingStyles

interface IRatingStyles {}

property labelText

labelText: IStyle;

property ratingButton

ratingButton: IStyle;

property ratingFocusZone

ratingFocusZone: IStyle;

property ratingStar

ratingStar: IStyle;

property ratingStarBack

ratingStarBack: IStyle;

property ratingStarFront

ratingStarFront: IStyle;

property ratingStarIsLarge

ratingStarIsLarge: IStyle;

property ratingStarIsSmall

ratingStarIsSmall: IStyle;

property root

root: IStyle;

property rootIsLarge

rootIsLarge: IStyle;

property rootIsSmall

rootIsSmall: IStyle;

interface IRelativePositions

interface IRelativePositions {}

property beakPosition

beakPosition: {
    position: IPosition | undefined;
    display: 'block';
};

property calloutPosition

calloutPosition: IPosition;

property directionalClassName

directionalClassName: string;

property submenuDirection

submenuDirection: DirectionalHint;

interface IRenderGroupHeaderProps

interface IRenderGroupHeaderProps extends INavLinkGroup {}

property isExpanded

isExpanded?: boolean;

Whether or not the group is presently expanded.

interface IResizeGroup

interface IResizeGroup {}

method remeasure

remeasure: () => void;

Remeasures the available space.

interface IResizeGroupProps

interface IResizeGroupProps
    extends React.HTMLAttributes<ResizeGroupBase | HTMLElement> {}

property className

className?: string;

Additional css class to apply to the Component

property componentRef

componentRef?: IRefObject<IResizeGroup>;

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

property data

data: any;

Initial data to be passed to the onRenderData function. When there is no onGrowData provided, this data should represent what should be passed to the render function when the parent container of the ResizeGroup is at its maximum supported width. A cacheKey property may optionally be included as part of the data. Two data objects with the same cacheKey will be assumed to take up the same width and will prevent measurements. The type of cacheKey is a string.

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 well or dropped as a result of onReduceData or to count the number of renders that an implementation of onReduceData triggers.

property direction

direction?: ResizeGroupDirection;

Direction of this resize group, vertical or horizontal

property onGrowData

onGrowData?: (prevData: any) => any;

Function to be performed on the data in order to increase its width. It is called in scenarios where the container has more room than the previous render and we may be able to fit more content. If there are no more scaling operations to perform on teh data, it should return undefined to prevent an infinite render loop.

property onReduceData

onReduceData: (prevData: any) => any;

Function to be performed on the data in order to reduce its width and make it fit into the given space. If there are no more scaling steps to apply, it should return undefined to prevent an infinite render loop.

property onRenderData

onRenderData: (data: any) => JSX.Element;

Function to render the data. Called when rendering the contents to the screen and when rendering in a hidden div to measure the size of the contents.

property styles

styles?: IStyleFunctionOrObject<IResizeGroupStyleProps, IResizeGroupStyles>;

Call to provide customized styling that will layer on top of the variant rules
Deprecated
Removed to reduce bundle size. Please use className and add css rules to className instead.

property theme

theme?: ITheme;

Theme provided by HOC.

interface IResizeGroupState

interface IResizeGroupState {}

property dataToMeasure

dataToMeasure?: any;

Data to render in a hidden div for measurement

property measureContainer

measureContainer?: boolean;

Set to true when the content container might have new dimensions and should be remeasured.

property renderedData

renderedData?: any;

Final data used to render proper sized component

property resizeDirection

resizeDirection?: 'grow' | 'shrink';

Are we resizing to accommodate having more or less available space? The 'grow' direction is when the container may have more room than the last render, such as when a window resize occurs. This means we will try to fit more content in the window. The 'shrink' direction is when the contents don't fit in the container and we need to find a transformation of the data that makes everything fit.

interface IResizeGroupStyleProps

interface IResizeGroupStyleProps {}

property className

className?: string;

Accept custom classNames

property theme

theme: ITheme;

Accept theme prop.

interface IResizeGroupStyles

interface IResizeGroupStyles {}

property root

root: IStyle;

Style for the root element.

interface IRGB

interface IRGB {}

RGB color with optional alpha value.

property a

a?: number;

Alpha, range 0 (transparent)-100. Usually assumed to be 100 if not specified.

property b

b: number;

Blue, range 0-255.

property g

g: number;

Green, range 0-255.

property r

r: number;

Red, range 0-255.

interface IScrollablePane

interface IScrollablePane {}

method forceLayoutUpdate

forceLayoutUpdate: () => void;

Triggers a layout update for the pane.

method getScrollPosition

getScrollPosition: () => number;

Gets the current scroll position of the scrollable pane

interface IScrollablePaneContext

interface IScrollablePaneContext {}

property scrollablePane

scrollablePane?: {
    subscribe: (
        handler: (container: HTMLElement, stickyContainer: HTMLElement) => void
    ) => void;
    unsubscribe: (
        handler: (container: HTMLElement, stickyContainer: HTMLElement) => void
    ) => void;
    addSticky: (sticky: Sticky) => void;
    removeSticky: (sticky: Sticky) => void;
    updateStickyRefHeights: () => void;
    sortSticky: (sticky: Sticky, sortAgain?: boolean) => void;
    notifySubscribers: (sort?: boolean) => void;
    syncScrollSticky: (sticky: Sticky) => void;
};

interface IScrollablePaneProps

interface IScrollablePaneProps
    extends React.HTMLAttributes<HTMLElement | ScrollablePaneBase> {}

property className

className?: string;

Additional css class to apply to the ScrollablePane

property componentRef

componentRef?: IRefObject<IScrollablePane>;

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

property initialScrollPosition

initialScrollPosition?: number;

Sets the initial scroll position of the ScrollablePane

property scrollbarVisibility

scrollbarVisibility?: ScrollbarVisibility;

property styles

styles?: IStyleFunctionOrObject<
    IScrollablePaneStyleProps,
    IScrollablePaneStyles
>;

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

property theme

theme?: ITheme;

Theme provided by HOC.

interface IScrollablePaneState

interface IScrollablePaneState {}

property scrollbarHeight

scrollbarHeight: number;

property scrollbarWidth

scrollbarWidth: number;

property stickyBottomHeight

stickyBottomHeight: number;

property stickyTopHeight

stickyTopHeight: number;

interface IScrollablePaneStyleProps

interface IScrollablePaneStyleProps {}

property className

className?: string;

Accept custom classNames

property scrollbarVisibility

scrollbarVisibility?: IScrollablePaneProps['scrollbarVisibility'];

property theme

theme: ITheme;

Accept theme prop.

interface IScrollablePaneStyles

interface IScrollablePaneStyles {}

property contentContainer

contentContainer: IStyle;

Style set for the contentContainer element.

property root

root: IStyle;

Style set for the root element.

property stickyAbove

stickyAbove: IStyle;

Style set for the stickyAbove element.

property stickyBelow

stickyBelow: IStyle;

Style set for the stickyBelow element.

property stickyBelowItems

stickyBelowItems: IStyle;

Style set for the stickyBelowItems element.

interface ISearchBox

interface ISearchBox {}

method focus

focus: () => void;

Sets focus inside the search input box.

method hasFocus

hasFocus: () => boolean;

Returns whether or not the SearchBox has focus

interface ISearchBoxProps

interface ISearchBoxProps extends React.InputHTMLAttributes<HTMLInputElement> {}

property ariaLabel

ariaLabel?: string;

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

property className

className?: string;

CSS class to apply to the SearchBox.

property clearButtonProps

clearButtonProps?: IButtonProps;

The props for the clear button.

property componentRef

componentRef?: IRefObject<ISearchBox>;

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

property defaultValue

defaultValue?: string;

The default value of the text in the SearchBox, in the case of an uncontrolled component. This prop is being deprecated since so far, uncontrolled behavior has not been implemented.
Deprecated
Not implemented.

property disableAnimation

disableAnimation?: boolean;

Whether or not to animate the SearchBox icon on focus.

property iconProps

iconProps?: Pick<IIconProps, Exclude<keyof IIconProps, 'className'>>;

The props for the icon.

property labelText

labelText?: string;

Deprecated. Use placeholder instead.
Deprecated
Use placeholder instead.

property onChange

onChange?: (
    event?: React.ChangeEvent<HTMLInputElement>,
    newValue?: string
) => void;

Callback function for when the typed input for the SearchBox has changed.

property onChanged

onChanged?: (newValue: any) => void;

Deprecated at v0.52.2, use onChange instead.
Deprecated
Use onChange instead.

property onClear

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

Callback executed when the user clears the search box by either clicking 'X' or hitting escape.

property onEscape

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

Callback executed when the user presses escape in the search box.

property onSearch

onSearch?: (newValue: any) => void;

Callback executed when the user presses enter in the search box.

property placeholder

placeholder?: string;

Placeholder for the search box.

property role

role?: string;

The role assigned to the root DIV element of the SearchBox, useful for defining a landmark role, such as "search".

property styles

styles?: IStyleFunctionOrObject<ISearchBoxStyleProps, ISearchBoxStyles>;

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

property theme

theme?: ITheme;

Theme (provided through customization).

property underlined

underlined?: boolean;

Whether or not the SearchBox is underlined.

property value

value?: string;

The value of the text in the SearchBox.

interface ISearchBoxState

interface ISearchBoxState {}

property hasFocus

hasFocus?: boolean;

property value

value?: string;

interface ISearchBoxStyleProps

interface ISearchBoxStyleProps {}

property className

className?: string;

property disableAnimation

disableAnimation?: boolean;

property disabled

disabled?: boolean;

property hasFocus

hasFocus?: boolean;

property hasInput

hasInput?: boolean;

property theme

theme: ITheme;

property underlined

underlined?: boolean;

interface ISearchBoxStyles

interface ISearchBoxStyles {}

property clearButton

clearButton?: IStyle;

property field

field?: IStyle;

property icon

icon?: IStyle;

property iconContainer

iconContainer?: IStyle;

property root

root?: IStyle;

interface ISelectableDroppableTextProps

interface ISelectableDroppableTextProps<TComponent, TListenerElement>
    extends React.HTMLAttributes<TListenerElement> {}

- TComponent - Component used for reference properties, such as componentRef. - TListenerElement - Listener element associated with HTML event callbacks. Optional. If not provided, TComponent is assumed.

property ariaLabel

ariaLabel?: string;

Aria Label for the field for screen reader users.

property calloutProps

calloutProps?: ICalloutProps;

Custom properties for the Callout used to render the option list.

property className

className?: string;

Additional class name for the root element.

property componentRef

componentRef?: IRefObject<TComponent>;

Optional callback to access the component interface (usually IDropdown or IComboBox). Use this instead of ref for accessing the public methods and properties of the component.

property defaultSelectedKey

defaultSelectedKey?: string | number | string[] | number[] | null;

The key(s) that will be initially used to set a selected item.
Mutually exclusive with selectedKey. For Dropdown (but not ComboBox) in multi-select mode, use defaultSelectedKeys instead.

property disabled

disabled?: boolean;

Whether or not the field is disabled.

property errorMessage

errorMessage?: string;

Error message for the field.

property id

id?: string;

ID of the field

property label

label?: string;

Descriptive label for the field

property multiSelect

multiSelect?: boolean;

Whether multi-choice selections are allowed or not.

property onDismiss

onDismiss?: () => void;

Callback for when the options list callout is dismissed

property onRenderContainer

onRenderContainer?: IRenderFunction<
    ISelectableDroppableTextProps<TComponent, TListenerElement>
>;

Optional custom renderer for the option list container

property onRenderItem

onRenderItem?: IRenderFunction<ISelectableOption>;

Optional custom renderer for all items, including headers and dividers as well as normal options.

property onRenderList

onRenderList?: IRenderFunction<
    ISelectableDroppableTextProps<TComponent, TListenerElement>
>;

Optional custom renderer for the option list

property onRenderOption

onRenderOption?: IRenderFunction<ISelectableOption>;

Optional custom renderer for normal options only. Use onRenderItem to control rendering for separators and headers as well.

property openOnKeyboardFocus

openOnKeyboardFocus?: boolean;

Whether or not the ComboBox/Dropdown should expand on keyboard focus.

property options

options?: any;

Collection of options for this field

property panelProps

panelProps?: IPanelProps;

Custom properties for the Panel used to render the option list on small devices.

property placeholder

placeholder?: string;

Input placeholder text. Displayed until option is selected.

property required

required?: boolean;

Whether or not the field is required.

property selectedKey

selectedKey?: string | number | string[] | number[] | null;

The key(s) of the selected item. If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed. Note that passing in null will cause selection to be reset.
Mutually exclusive with defaultSelectedKey. For Dropdown (but not ComboBox) in multi-select mode, use selectedKeys instead.

interface ISelectableOption

interface ISelectableOption {}

property ariaLabel

ariaLabel?: string;

The aria label for the dropdown option. If not present, the text will be used.

property data

data?: any;

Data available to custom onRender functions.

property disabled

disabled?: boolean;

Whether the option is disabled

property hidden

hidden?: boolean;

Defines whether the option is hidden or not.

property id

id?: string;

ID attribute associated with this option

property index

index?: number;

Index for this option

property itemType

itemType?: SelectableOptionMenuItemType;

Text to render for this option

property key

key: string | number;

Arbitrary string associated with this option.

property selected

selected?: boolean;

If option is selected.

property text

text: string;

Text to render for this option

property title

title?: string;

Title attribute (built in tooltip) for a given option.

interface ISelectedItemProps

interface ISelectedItemProps<T> extends IPickerItemProps<T> {}

property onCopyItem

onCopyItem: (item: T) => void;

interface ISelectedPeopleItemProps

interface ISelectedPeopleItemProps
    extends ISelectedItemProps<IExtendedPersonaProps> {}

property onExpandItem

onExpandItem?: () => void;

property renderPersonaCoin

renderPersonaCoin?: IRenderFunction<IPersonaProps>;

property renderPrimaryText

renderPrimaryText?: IRenderFunction<IPersonaProps>;

interface ISelectedPeopleProps

interface ISelectedPeopleProps
    extends IBaseSelectedItemsListProps<IExtendedPersonaProps> {}

property copyMenuItemText

copyMenuItemText?: string;

property editMenuItemText

editMenuItemText?: string;

property floatingPickerProps

floatingPickerProps?: IBaseFloatingPickerProps<IPersonaProps>;

property getEditingItemText

getEditingItemText?: (item: IExtendedPersonaProps) => string;

property onExpandGroup

onExpandGroup?: (item: IExtendedPersonaProps) => void;

property onRenderFloatingPicker

onRenderFloatingPicker?: React.ComponentType<
    IBaseFloatingPickerProps<IPersonaProps>
>;

property removeMenuItemText

removeMenuItemText?: string;

interface ISelectionZone

interface ISelectionZone {}

property ignoreNextFocus

ignoreNextFocus: () => void;

Method to ignore subsequent focus.

interface ISelectionZoneProps

interface ISelectionZoneProps extends React.ClassAttributes<SelectionZone> {}

property className

className?: string;

Additional CSS class(es) to apply to the SelectionZone.

property componentRef

componentRef?: () => void;

Reference to the component interface.

property disableAutoSelectOnInputElements

disableAutoSelectOnInputElements?: boolean;

If true, disables automatic selection on input elements.

property enableTouchInvocationTarget

enableTouchInvocationTarget?: boolean;

Determines whether elements with the attribute data-selection-touch-invoke should be used as invocation targets for an item if the user is using touch.

property enterModalOnTouch

enterModalOnTouch?: boolean;

If true, modal selection is enabled on touch event.

property isSelectedOnFocus

isSelectedOnFocus?: boolean;

Determines if an item is selected on focus.

property layout

layout?: {};

Deprecated
No longer in use, focus is now managed by FocusZone.

property onItemContextMenu

onItemContextMenu?: (item?: any, index?: number, ev?: Event) => void | boolean;

Optional callback for when an item's contextual menu action occurs.

property onItemInvoked

onItemInvoked?: (item?: IObjectWithKey, index?: number, ev?: Event) => void;

Optional callback for when an item is invoked via ENTER or double-click.

property selection

selection: ISelection;

Required ISelection instance bound to the SelectionZone.

property selectionClearedOnEscapePress

selectionClearedOnEscapePress?: boolean;

Determines if pressing the Escape clears the selection.

property selectionClearedOnSurfaceClick

selectionClearedOnSurfaceClick?: boolean;

Determines if elements within the selection zone that DO NOT have the 'data-selection-toggle' or 'data-selection-all-toggle' attribute are clickable and can alter the selection.

property selectionMode

selectionMode?: SelectionMode;

The mode of Selection, where the value is one of 'none', 'single', or 'multiple'.

property selectionPreservedOnEmptyClick

selectionPreservedOnEmptyClick?: boolean;

If true, selection is preserved on outer click.

property toggleWithoutModifierPressed

toggleWithoutModifierPressed?: boolean;

Allows the default toggle behavior to be overridden. When set to true users do not have press a modifier key (e.g., ctrl or meta) to toggle values.
false

interface ISelectionZoneState

interface ISelectionZoneState {}

property isModal

isModal: boolean | undefined;

interface ISeparator

interface ISeparator {}

interface ISeparatorProps

interface ISeparatorProps extends React.HTMLAttributes<HTMLElement> {}

property alignContent

alignContent?: 'start' | 'center' | 'end';

Where the content should be aligned in the separator.

property styles

styles?: IStyleFunctionOrObject<ISeparatorStyleProps, ISeparatorStyles>;

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

property theme

theme?: ITheme;

Theme (provided through customization.)

property vertical

vertical?: boolean;

Whether the element is a vertical separator.

interface ISeparatorStyles

interface ISeparatorStyles {}

property content

content: IStyle;

Style for the content

property root

root: IStyle;

Style for the root element

interface IShimmer

interface IShimmer {}

interface IShimmerCircle

interface IShimmerCircle {}

interface IShimmerCircleProps

interface IShimmerCircleProps extends React.AllHTMLAttributes<HTMLElement> {}

ShimmerCircle component props.

property borderStyle

borderStyle?: IRawStyle;

Use to set custom styling of the shimmerCircle borders.
Deprecated
Use styles prop to leverage mergeStyle API.

property componentRef

componentRef?: IRefObject<IShimmerCircle>;

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

property height

height?: number;

Sets the height of the circle.

property styles

styles?: IStyleFunctionOrObject<IShimmerCircleStyleProps, IShimmerCircleStyles>;

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 IShimmerCircleStyles

interface IShimmerCircleStyles {}

Represents the stylable areas of the control.

property root

root?: IStyle;

Root of the ShimmerCircle component.

property svg

svg?: IStyle;

Style for the circle SVG of the ShimmerCircle component.

interface IShimmerColors

interface IShimmerColors {}

Interface describing the possible color customizations of Shimmer.

property background

background?: string;

Defines the background color of the space in between and around shimmer elements (borders, gaps and rounded corners).

property shimmer

shimmer?: string;

Defines the main background color which is the color you see when the wave is not animating.

property shimmerWave

shimmerWave?: string;

Defines the tip color of the shimmer wave which gradually gets from and to shimmer color.

interface IShimmeredDetailsListProps

interface IShimmeredDetailsListProps extends Omit<IDetailsListProps, 'styles'> {}

ShimmeredDetailsList props interface

property ariaLabelForShimmer

ariaLabelForShimmer?: string;

Aria label for shimmer. Set on grid while shimmer is enabled.

property detailsListStyles

detailsListStyles?: IDetailsListProps['styles'];

DetailsList styles to pass through.

property enableShimmer

enableShimmer?: boolean;

Boolean flag to control when to render placeholders vs real items. It's up to the consumer app to know when fetching of the data is done to toggle this prop.

property onRenderCustomPlaceholder

onRenderCustomPlaceholder?: (
    rowProps: IDetailsRowProps,
    index?: number,
    defaultRender?: (props: IDetailsRowProps) => React.ReactNode
) => React.ReactNode;

Custom placeholder renderer to be used when in need to override the default placeholder of a DetailsRow. rowProps argument is passed to leverage the calculated column measurements done by DetailsList or you can use the optional arguments of item index and defaultRender to execute additional logic before rendering the default placeholder.

property removeFadingOverlay

removeFadingOverlay?: boolean;

Determines whether to remove a fading out to bottom overlay over the shimmering items used to further emphasize the unknown number of items that will be fetched.

property shimmerLines

shimmerLines?: number;

Number of shimmer placeholder lines to render.

property shimmerOverlayStyles

shimmerOverlayStyles?: IStyleFunctionOrObject<
    IShimmeredDetailsListStyleProps,
    IShimmeredDetailsListStyles
>;

Custom styles to override the styles specific to the ShimmeredDetailsList root area.
Deprecated
Use styles prop instead. Any value provided will be ignored.

property styles

styles?: IStyleFunctionOrObject<
    IShimmeredDetailsListStyleProps,
    IShimmeredDetailsListStyles
>;

Custom styles to override the styles specific to the ShimmeredDetailsList root area.

interface IShimmeredDetailsListStyles

interface IShimmeredDetailsListStyles {}

Represents the stylable areas of the control.

property root

root: IStyle;

Represents styles passed to the List component for creating a fade-out to the bottom overlay.

interface IShimmerElement

interface IShimmerElement {}

Shimmer Elements Interface representing all common properties between Gap, Circle and Line.

property height

height?: number;

Sets the height of the element (ICircle, ILine, IGap) in pixels. Read more details for each specific element.

property type

type: ShimmerElementType;

Represents the possible type of the shimmer elements: Gap, Circle, Line. Required for every element you intend to use.

property verticalAlign

verticalAlign?: 'top' | 'center' | 'bottom';

Sets vertical alignment of the element (ICircle, ILine).

property width

width?: number | string;

Sets the width value of the element (ILine, IGap) in pixels. Read more details for each specific element.

interface IShimmerElementsGroup

interface IShimmerElementsGroup {}

interface IShimmerElementsGroupProps

interface IShimmerElementsGroupProps extends React.AllHTMLAttributes<HTMLElement> {}

ShimmerElementsGroup component props.

property backgroundColor

backgroundColor?: string;

Defines the background color of the space in between and around shimmer elements.

property componentRef

componentRef?: IRefObject<IShimmerElementsGroup>;

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

property flexWrap

flexWrap?: boolean;

Optional boolean for enabling flexWrap of the container containing the shimmerElements.

property rowHeight

rowHeight?: number;

Optional maximum row height of the shimmerElements container.

property shimmerElements

shimmerElements?: IShimmerElement[];

Elements to render in one group of the Shimmer.

property styles

styles?: IStyleFunctionOrObject<
    IShimmerElementsGroupStyleProps,
    IShimmerElementsGroupStyles
>;

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

property theme

theme?: ITheme;

Theme provided by High-Order Component.

property width

width?: string;

Optional width for ShimmerElements container.

interface IShimmerElementsGroupStyleProps

interface IShimmerElementsGroupStyleProps {}

Props needed to construct styles.

property flexWrap

flexWrap?: boolean;

Boolean flag to notify whether the root element needs to flex wrap.

property theme

theme: ITheme;

Theme provided by High-Order Component.

interface IShimmerElementsGroupStyles

interface IShimmerElementsGroupStyles {}

Represents the stylable areas of the control.

property root

root?: IStyle;

Represents the wrapper root element holding all elements inside.

interface IShimmerGap

interface IShimmerGap {}

interface IShimmerGapProps

interface IShimmerGapProps extends React.AllHTMLAttributes<HTMLElement> {}

ShimmerGap component props.

property borderStyle

borderStyle?: IRawStyle;

Use to set custom styling of the shimmerGap borders.
Deprecated
Use styles prop to leverage mergeStyle API.

property componentRef

componentRef?: IRefObject<IShimmerGap>;

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

property height

height?: number;

Sets the height of the gap.

property styles

styles?: IStyleFunctionOrObject<IShimmerGapStyleProps, IShimmerGapStyles>;

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

property theme

theme?: ITheme;

Theme provided by High-Order Component.

property width

width?: number | string;

Sets width value of the gap.

interface IShimmerGapStyles

interface IShimmerGapStyles {}

Represents the stylable areas of the control.

property root

root?: IStyle;

Root of the ShimmerGap component.

interface IShimmerLine

interface IShimmerLine {}

interface IShimmerLineProps

interface IShimmerLineProps extends React.AllHTMLAttributes<HTMLElement> {}

ShimmerLine component props.

property borderStyle

borderStyle?: IRawStyle;

Use to set custom styling of the shimmerLine borders.
Deprecated
Use styles prop to leverage mergeStyle API.

property componentRef

componentRef?: IRefObject<IShimmerLine>;

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

property height

height?: number;

Sets the height of the rectangle.

property styles

styles?: IStyleFunctionOrObject<IShimmerLineStyleProps, IShimmerLineStyles>;

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

property theme

theme?: ITheme;

Theme provided by High-Order Component.

property width

width?: number | string;

Sets width value of the line.

interface IShimmerLineStyles

interface IShimmerLineStyles {}

Represents the stylable areas of the control.

property bottomLeftCorner

bottomLeftCorner?: IStyle;

Bottom-left corner SVG of the ShimmerLine component.

property bottomRightCorner

bottomRightCorner?: IStyle;

Bottom-right corner SVG of the ShimmerLine component.

property root

root?: IStyle;

Root of the ShimmerLine component.

property topLeftCorner

topLeftCorner?: IStyle;

Top-left corner SVG of the ShimmerLine component.

property topRightCorner

topRightCorner?: IStyle;

Top-right corner SVG of the ShimmerLine component.

interface IShimmerProps

interface IShimmerProps extends React.AllHTMLAttributes<HTMLElement> {}

Shimmer component props.

property ariaLabel

ariaLabel?: string;

Localized string of the status label for screen reader

property className

className?: string;

Additional CSS class(es) to apply to the Shimmer container.

property componentRef

componentRef?: IRefObject<IShimmer>;

Deprecated
No longer used.

property customElementsGroup

customElementsGroup?: React.ReactNode;

Custom elements when necessary to build complex placeholder skeletons.

property isDataLoaded

isDataLoaded?: boolean;

Controls when the shimmer is swapped with actual data through an animated transition.

property shimmerColors

shimmerColors?: IShimmerColors;

Defines an object with possible colors to pass for Shimmer customization used on different backgrounds.

property shimmerElements

shimmerElements?: IShimmerElement[];

Elements to render in one line of the Shimmer.

property styles

styles?: IStyleFunctionOrObject<IShimmerStyleProps, IShimmerStyles>;

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

property theme

theme?: ITheme;

Theme provided by High-Order Component.

property width

width?: number | string;

Sets the width value of the shimmer wave wrapper.

interface IShimmerState

interface IShimmerState {}

property contentLoaded

contentLoaded?: boolean;

Flag for knowing when to remove the shimmerWrapper from the DOM.

interface IShimmerStyleProps

interface IShimmerStyleProps {}

Defines props needed to construct styles. This represents the simplified set of immutable things which control the class names.

property className

className?: string;

Optional CSS class name for the component attached to the root stylable area.

property isDataLoaded

isDataLoaded?: boolean;

Boolean flag to trigger fadeIn/fadeOut transition animation when content is loaded.

property shimmerColor

shimmerColor?: string;

Color to be used as the main background color of Shimmer when not animating.

property shimmerWaveColor

shimmerWaveColor?: string;

Tip color of the shimmer wave which gradually gets from and to shimmerColor.

property theme

theme: ITheme;

Theme provided by High-Order Component.

property transitionAnimationInterval

transitionAnimationInterval?: number;

Interval in milliseconds for the adeIn/fadeOut transition animation.

interface IShimmerStyles

interface IShimmerStyles {}

Represents the stylable areas of the control.

property dataWrapper

dataWrapper?: IStyle;

Refers to wrapper element of the children only.

property root

root?: IStyle;

Refers to the root wrapper element.

property screenReaderText

screenReaderText?: IStyle;

Styles for the hidden helper element to aid with screen readers.

property shimmerGradient

shimmerGradient?: IStyle;

Refers to gradient element of the shimmer animation only.

property shimmerWrapper

shimmerWrapper?: IStyle;

Refers to wrapper element of the shimmer only.

interface ISlider

interface ISlider {}

property focus

focus: () => void;

property range

range: [number, number] | undefined;

property value

value: number | undefined;

interface ISliderProps

interface ISliderProps extends React.ClassAttributes<SliderBase> {}

property ariaLabel

ariaLabel?: string;

A description of the Slider for the benefit of screen readers.

property ariaValueText

ariaValueText?: (value: number) => string;

A text description of the Slider number value for the benefit of screen readers. This should be used when the Slider number value is not accurately represented by a number.

property buttonProps

buttonProps?: React.HTMLAttributes<HTMLButtonElement>;

Optional mixin for additional props on the thumb button within the slider.

property className

className?: string;

Optional className to attach to the slider root element.

property componentRef

componentRef?: IRefObject<ISlider>;

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

property defaultLowerValue

defaultLowerValue?: number;

The initial lower value of the Slider if ranged is true. Use this if you intend for the Slider to be an uncontrolled component. This value is mutually exclusive to lowerValue. Use one or the other.

property defaultValue

defaultValue?: number;

The initial value of the Slider. Use this if you intend for the Slider to be an uncontrolled component. This value is mutually exclusive to value. Use one or the other.

property disabled

disabled?: boolean;

Optional flag to render the Slider as disabled.

property label

label?: string;

Description label of the Slider

property lowerValue

lowerValue?: number;

The initial lower value of the Slider if ranged is true. Use this if you intend to pass in a new value as a result of onChange events. This value is mutually exclusive to defaultLowerValue. Use one or the other.

property max

max?: number;

The max value of the Slider

property min

min?: number;

The min value of the Slider

property onChange

onChange?: (value: number, range?: [number, number]) => void;

Callback when the value has been changed. If ranged is true, value is the upper value, and range contains the lower and upper bounds of the range.

property onChanged

onChanged?: (
    event: MouseEvent | TouchEvent | KeyboardEvent,
    value: number
) => void;

Callback on mouse up or touch end

property originFromZero

originFromZero?: boolean;

Optional flag to attach the origin of slider to zero. Helpful when the range include negatives.

property ranged

ranged?: boolean;

If ranged is true, display two thumbs that allow the lower and upper bounds of a range to be selected. The lower bound is defined by lowerValue, and the upper bound is defined by value.

property showValue

showValue?: boolean;

Whether to show the value on the right of the Slider.

property snapToStep

snapToStep?: boolean;

Optional flag to decide that thumb will snap to closest value while moving the slider

property step

step?: number;

The difference between the two adjacent values of the Slider

property styles

styles?: IStyleFunctionOrObject<ISliderStyleProps, ISliderStyles>;

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

property theme

theme?: ITheme;

Theme provided by High-Order Component.

property value

value?: number;

The initial value of the Slider. Use this if you intend to pass in a new value as a result of onChange events. This value is mutually exclusive to defaultValue. Use one or the other.

property valueFormat

valueFormat?: (value: number) => string;

Optional function to format the slider value.

property vertical

vertical?: boolean;

Optional flag to render the slider vertically. Defaults to rendering horizontal.

interface ISliderState

interface ISliderState {}

property lowerValue

lowerValue?: number;

property renderedLowerValue

renderedLowerValue?: number;

property renderedValue

renderedValue?: number;

property value

value?: number;

interface ISliderStyles

interface ISliderStyles {}

property activeSection

activeSection: IStyle;

Style set for active portion of the line.

property container

container: IStyle;

Style set for the container of the slider.

property inactiveSection

inactiveSection: IStyle;

Style set for inactive portion of the line.

property line

line: IStyle;

Style set for element that contains all the lines.

property lineContainer

lineContainer: IStyle;

Style set for both active and inactive sections of the line.

property root

root: IStyle;

Style set for the root element.

property slideBox

slideBox: IStyle;

Style set for the actual box containting interactive elements of the slider.

property thumb

thumb: IStyle;

Style set for thumb of the slider.

property titleLabel

titleLabel: IStyle;

Style set for the title label above the slider.

property valueLabel

valueLabel: IStyle;

Style set for value label on right/below of the slider.

property zeroTick

zeroTick: IStyle;

Style set for tick on 0 on number line. This element only shows up when originFromZero prop is true.

interface ISpinButton

interface ISpinButton {}

property focus

focus: () => void;

Sets focus to the control.

property value

value?: string;

Current value of the control.

interface ISpinButtonClassNames

interface ISpinButtonClassNames {}

property arrowBox

arrowBox: string;

property icon

icon: string;

property input

input: string;

property label

label: string;

property labelWrapper

labelWrapper: string;

property root

root: string;

property spinButtonWrapper

spinButtonWrapper: string;

interface ISpinButtonProps

interface ISpinButtonProps extends React.HTMLAttributes<HTMLDivElement> {}

property ariaDescribedBy

ariaDescribedBy?: string;

ID of a label which describes the control, if not using the default label.

property ariaLabel

ariaLabel?: string;

A description of the control for the benefit of screen reader users.

property ariaPositionInSet

ariaPositionInSet?: number;

The position in the parent set (if in a set).

property ariaSetSize

ariaSetSize?: number;

The total size of the parent set (if in a set).

property ariaValueNow

ariaValueNow?: number;

Sets the control's aria-valuenow. This is the numeric form of value. Providing this only makes sense when using as a controlled component.

property ariaValueText

ariaValueText?: string;

property className

className?: string;

Custom className for the control.

property componentRef

componentRef?: IRefObject<ISpinButton>;

Gets the component ref.

property decrementButtonAriaLabel

decrementButtonAriaLabel?: string;

Accessible label text for the decrement button (for screen reader users).

property decrementButtonIcon

decrementButtonIcon?: IIconProps;

Custom props for the decrement button.

property defaultValue

defaultValue?: string;

Initial value of the control. Updates to this prop will not be respected.
Use this if you intend for the SpinButton to be an uncontrolled component which maintains its own value. Mutually exclusive with value.

property disabled

disabled?: boolean;

Whether or not the control is disabled.

property downArrowButtonStyles

downArrowButtonStyles?: Partial<IButtonStyles>;

Custom styles for the down arrow button.
Note: The buttons are in a checked state when arrow keys are used to incremenent/decrement the SpinButton. Use rootChecked instead of rootPressed for styling when that is the case.

property getClassNames

getClassNames?: (
    theme: ITheme,
    disabled: boolean,
    isFocused: boolean,
    keyboardSpinDirection: KeyboardSpinDirection,
    labelPosition?: Position,
    className?: string
) => ISpinButtonClassNames;

Custom function for providing the classNames for the control. 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 up and down arrow buttons.

property iconProps

iconProps?: IIconProps;

Props for an icon to display alongside the control's label.

property incrementButtonAriaLabel

incrementButtonAriaLabel?: string;

Accessible label text for the increment button (for screen reader users).

property incrementButtonIcon

incrementButtonIcon?: IIconProps;

Custom props for the increment button.

property inputProps

inputProps?: React.InputHTMLAttributes<HTMLElement | HTMLInputElement>;

Additional props for the input field.

property keytipProps

keytipProps?: IKeytipProps;

Keytip for the control.

property label

label?: string;

Descriptive label for the control.

property labelPosition

labelPosition?: Position;

Where to position the control's label.

property max

max?: number;

Max value of the control.

property min

min?: number;

Min value of the control.

property onBlur

onBlur?: React.FocusEventHandler<HTMLInputElement>;

Callback for when the control loses focus.

property onDecrement

onDecrement?: (
    value: string,
    event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
) => string | void;

Callback for when the decrement button or down arrow key is pressed.
Parameter value
The current value to be decremented
Parameter event
The event that triggered this decrement
Returns
If a string is returned, it will be used as the new value

property onFocus

onFocus?: React.FocusEventHandler<HTMLInputElement>;

Callback for when the user focuses the control.

property onIncrement

onIncrement?: (
    value: string,
    event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
) => string | void;

Callback for when the increment button or up arrow key is pressed.
Parameter value
The current value to be incremented
Parameter event
The event that triggered this increment
Returns
If a string is returned, it will be used as the new value

property onValidate

onValidate?: (
    value: string,
    event?: React.SyntheticEvent<HTMLElement>
) => string | void;

Callback for when the entered value should be validated.
Parameter value
The entered value to validate
Parameter event
The event that triggered this validate, if any (for accessibility)
Returns
If a string is returned, it will be used as the new value

property precision

precision?: number;

How many decimal places the value should be rounded to.
The default is calculated based on the precision of step: i.e. if step = 1, precision = 0. step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2.

property step

step?: number;

Difference between two adjacent values of the control. This value is used to calculate the precision of the input if no precision is given. The precision calculated this way will always be >= 0.

property styles

styles?: Partial<ISpinButtonStyles>;

Custom styling for individual elements within the control.

property theme

theme?: ITheme;

Theme provided by HOC.

property title

title?: string;

A more descriptive title for the control, visible on its tooltip.

property upArrowButtonStyles

upArrowButtonStyles?: Partial<IButtonStyles>;

Custom styles for the up arrow button.
Note: The buttons are in a checked state when arrow keys are used to incremenent/decrement the SpinButton. Use rootChecked instead of rootPressed for styling when that is the case.

property value

value?: string;

Current value of the control.
Use this if you intend to pass in a new value as a result of change events. Mutually exclusive with defaultValue.

interface ISpinButtonState

interface ISpinButtonState {}

property isFocused

isFocused: boolean;

Is true when the control has focus.

property keyboardSpinDirection

keyboardSpinDirection: KeyboardSpinDirection;

keyboard spin direction, used to style the up or down button as active when up/down arrow is pressed

property value

value: string;

the value of the spin button

interface ISpinButtonStyles

interface ISpinButtonStyles {}

property arrowButtonsContainer

arrowButtonsContainer: IStyle;

Styles for the arrowButtonsContainer

property arrowButtonsContainerDisabled

arrowButtonsContainerDisabled: IStyle;

Style override for the arrowButtonsContainer when control is disabled.

property icon

icon: IStyle;

Style for the icon.

property iconDisabled

iconDisabled: IStyle;

Style for the icon when the control is disabled.

property input

input: IStyle;

Styles for the input.

property inputDisabled

inputDisabled: IStyle;

Style override when control is disabled.

property inputTextSelected

inputTextSelected: IStyle;

Style override for ::selection

property label

label: IStyle;

Style for the label text.

property labelDisabled

labelDisabled: IStyle;

Style for the label text when the control is disabled.
Deprecated
Disabled styles taken care by Label component.

property labelWrapper

labelWrapper: IStyle;

Style for the label wrapper element, which contains the icon and label.

property labelWrapperBottom

labelWrapperBottom: IStyle;

Style override when the label is positioned at the bottom.

property labelWrapperEnd

labelWrapperEnd: IStyle;

Style override when the label is positioned at the end.

property labelWrapperStart

labelWrapperStart: IStyle;

Style override when the label is positioned at the start.

property labelWrapperTop

labelWrapperTop: IStyle;

Style override when the label is positioned at the top.

property root

root: IStyle;

Styles for the root of the component.

property spinButtonWrapper

spinButtonWrapper: IStyle;

Style for the wrapper element of the input field and arrow buttons.

property spinButtonWrapperDisabled

spinButtonWrapperDisabled: IStyle;

Style override when control is disabled.

property spinButtonWrapperFocused

spinButtonWrapperFocused: IStyle;

Style override when SpinButton is enabled/focused.

property spinButtonWrapperHovered

spinButtonWrapperHovered: IStyle;

Style override when control is enabled/hovered.

property spinButtonWrapperTopBottom

spinButtonWrapperTopBottom: IStyle;

Style override when label is positioned at the top/bottom.

interface ISpinner

interface ISpinner {}

interface ISpinnerProps

interface ISpinnerProps extends React.HTMLAttributes<HTMLElement> {}

Spinner component props.

property ariaLabel

ariaLabel?: string;

Alternative status label for screen reader

property ariaLive

ariaLive?: 'assertive' | 'polite' | 'off';

Politeness setting for label update announcement.

property className

className?: string;

Additional CSS class(es) to apply to the Spinner.

property componentRef

componentRef?: IRefObject<ISpinner>;

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

property label

label?: string;

The label to show next to the Spinner. Label updates will be announced to the screen readers. Use ariaLive to control politeness level.

property labelPosition

labelPosition?: SpinnerLabelPosition;

The position of the label in regards of the spinner animation.

property size

size?: SpinnerSize;

The size of Spinner to render. { extraSmall, small, medium, large }

property styles

styles?: IStyleFunctionOrObject<ISpinnerStyleProps, ISpinnerStyles>;

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

property theme

theme?: ITheme;

Theme (provided through customization.)

property type

type?: SpinnerType;

Deprecated and will be removed at >= 2.0.0. Use SpinnerSize instead.
Deprecated
Use SpinnerSize instead.

interface ISpinnerStyleProps

interface ISpinnerStyleProps {}

The props needed to construct styles. This represents the simplified set of immutable things which control the class names.

property className

className?: string;

CSS class name for the component attached to the root stylable area.

property labelPosition

labelPosition?: SpinnerLabelPosition;

Position of the label in regards to the spinner animation.

property size

size?: SpinnerSize;

Size of the spinner animation.

property theme

theme: ITheme;

Theme provided by High-Order Component.

interface ISpinnerStyles

interface ISpinnerStyles {}

Represents the stylable areas of the control.

property circle

circle?: IStyle;

Styles for the spinner circle animation.

property label

label?: IStyle;

Styles for the label accompanying the circle.

property root

root?: IStyle;

Styles for the root element. Refers to the wrapper containing both the circle and the label.

property screenReaderText

screenReaderText?: IStyle;

Styles for the hidden helper element to aid with screen readers.

interface ISplitButtonClassNames

interface ISplitButtonClassNames {}

property divider

divider?: string;

property flexContainer

flexContainer?: string;

property icon

icon?: string;

property root

root?: string;

property splitButtonContainer

splitButtonContainer?: string;

interface IStackItemProps

interface IStackItemProps
    extends IStackItemSlots,
        IStyleableComponentProps<
            IStackItemProps,
            IStackItemTokens,
            IStackItemStyles
        >,
        React.HTMLAttributes<HTMLElement> {}

property align

align?: 'auto' | 'stretch' | 'baseline' | 'start' | 'center' | 'end';

Defines how to align the StackItem along the x-axis (for vertical Stacks) or the y-axis (for horizontal Stacks).

property className

className?: string;

Defines a CSS class name used to style the StackItem.

property disableShrink

disableShrink?: boolean;

Defines whether the StackItem should be prevented from shrinking. This can be used to prevent a StackItem from shrinking when it is inside of a Stack that has shrinking items.

property grow

grow?: boolean | number | 'inherit' | 'initial' | 'unset';

Defines how much to grow the StackItem in proportion to its siblings.

property order

order?: number | string;

Defines order of the StackItem.

property shrink

shrink?: boolean | number | 'inherit' | 'initial' | 'unset';

Defines at what ratio should the StackItem shrink to fit the available space.

property verticalFill

verticalFill?: boolean;

Defines whether the StackItem should take up 100% of the height of its parent.

interface IStackItemSlots

interface IStackItemSlots {}

property root

root?: IHTMLSlot;

interface IStackItemTokens

interface IStackItemTokens {}

property margin

margin?: number | string;

Defines the margin to be applied to the StackItem relative to its container.

property padding

padding?: number | string;

Defines the padding to be applied to the StackItem contents relative to its border.

interface IStackProps

interface IStackProps
    extends ISlottableProps<IStackSlots>,
        IStyleableComponentProps<IStackProps, IStackTokens, IStackStyles>,
        React.HTMLAttributes<HTMLElement> {}

property as

as?: React.ElementType<React.HTMLAttributes<HTMLElement>>;

Defines how to render the Stack.

property disableShrink

disableShrink?: boolean;

Defines whether Stack children should not shrink to fit the available space.

property gap

gap?: number | string;

Defines the spacing between Stack children. The property is specified as a value for 'row gap', followed optionally by a value for 'column gap'. If 'column gap' is omitted, it's set to the same value as 'row gap'.
Deprecated
Use childrenGap token in IStackTokens instead.

property grow

grow?: boolean | number | 'inherit' | 'initial' | 'unset';

Defines how much to grow the Stack in proportion to its siblings.

property horizontal

horizontal?: boolean;

Defines whether to render Stack children horizontally.

property horizontalAlign

horizontalAlign?: Alignment;

Defines how to align Stack children horizontally (along the x-axis).

property maxHeight

maxHeight?: number | string;

Defines the maximum height that the Stack can take.
Deprecated
Use maxHeight token in IStackTokens instead.

property maxWidth

maxWidth?: number | string;

Defines the maximum width that the Stack can take.
Deprecated
Use maxWidth token in IStackTokens instead.

property padding

padding?: number | string;

Defines the inner padding of the Stack.
Deprecated
Use padding token in IStackTokens instead.

property reversed

reversed?: boolean;

Defines whether to render Stack children in the opposite direction (bottom-to-top if it's a vertical Stack and right-to-left if it's a horizontal Stack).

property verticalAlign

verticalAlign?: Alignment;

Defines how to align Stack children vertically (along the y-axis).

property verticalFill

verticalFill?: boolean;

Defines whether the Stack should take up 100% of the height of its parent. This property is required to be set to true when using the grow flag on children in vertical oriented Stacks. Stacks are rendered as block elements and grow horizontally to the container already.

property wrap

wrap?: boolean;

Defines whether Stack children should wrap onto multiple rows or columns when they are about to overflow the size of the Stack.

interface IStackSlots

interface IStackSlots {}

property inner

inner?: IHTMLSlot;

Defines a slot that is placed inside the root slot in order to achieve wrapping. Only used when the wrap property is set to true.

property root

root?: IHTMLSlot;

Defines root slot of the component.

interface IStackTokens

interface IStackTokens {}

property childrenGap

childrenGap?: number | string;

Defines the spacing between Stack children. The property is specified as a value for 'row gap', followed optionally by a value for 'column gap'. If 'column gap' is omitted, it's set to the same value as 'row gap'.

property maxHeight

maxHeight?: number | string;

Defines a maximum height for the Stack.

property maxWidth

maxWidth?: number | string;

Defines a maximum width for the Stack.

property padding

padding?: number | string;

Defines the padding to be applied to the Stack contents relative to its border.

interface IStickyContext

interface IStickyContext {}

property scrollablePane

scrollablePane: PropTypes.Requireable<object>;

interface IStickyProps

interface IStickyProps extends React.Props<Sticky> {}

property componentRef

componentRef?: IRefObject<IStickyProps>;

Gets ref to component interface.

property isScrollSynced

isScrollSynced?: boolean;

If true, then match scrolling position of placeholder element in Sticky.

property stickyBackgroundColor

stickyBackgroundColor?: string;

color to apply as 'background-color' style for sticky element.

property stickyClassName

stickyClassName?: string;

Class name to apply to the sticky element if component is sticky.

property stickyPosition

stickyPosition?: StickyPositionType;

Region to render sticky component in.

interface IStickyState

interface IStickyState {}

property distanceFromTop

distanceFromTop?: number;

property isStickyBottom

isStickyBottom: boolean;

property isStickyTop

isStickyTop: boolean;

interface ISuggestionItemProps

interface ISuggestionItemProps<T> {}

Suggestion item props. Refers to the each individual suggested items rendered within Suggestions callout. Type T is the type of the item that is displayed.

property className

className?: string;

Optional className for the root element of the suggestion item.

property componentRef

componentRef?: IRefObject<ISuggestionsItem>;

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

property id

id?: string;

Unique id of the suggested item.

property isSelectedOverride

isSelectedOverride?: boolean;

An override for the 'selected' property of the SuggestionModel.

property onClick

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

Callback for when the user clicks on the suggestion.

property onRemoveItem

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

Callback for when the item is removed from the array of suggested items.

property removeButtonAriaLabel

removeButtonAriaLabel?: string;

The ARIA label for the button to remove the suggestion from the list.

property RenderSuggestion

RenderSuggestion: (
    item: T,
    suggestionItemProps: ISuggestionItemProps<T>
) => JSX.Element;

Optional renderer to override the default one for each type of picker.

property showRemoveButton

showRemoveButton?: boolean;

Whether the remove button should be rendered or not.

property styles

styles?: IStyleFunctionOrObject<
    ISuggestionsItemStyleProps,
    ISuggestionsItemStyles
>;

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

property suggestionModel

suggestionModel: ISuggestionModel<T>;

Individual suggestion object containing its properties.

property theme

theme?: ITheme;

Theme provided by High-Order Component.

interface ISuggestionModel

interface ISuggestionModel<T> {}

SuggestionModel interface. Type T is the type of the item that is suggested (Persona, Tag or any other custom picker).

property ariaLabel

ariaLabel?: string;

Aria-label string for each suggested item.

property item

item: T;

The suggested item of the type T

property selected

selected: boolean;

Whether the suggested item is selected or not.

interface ISuggestions

interface ISuggestions<T> {}

Suggestions component.

property executeSelectedAction

executeSelectedAction: () => void;

Execute the action selected. Can be SearchMore or ForceResolve actions.

property focusAboveSuggestions

focusAboveSuggestions: () => void;

Focus on the ForceResolve action above the suggestions. If not available then focus on SearchMore action.

property focusBelowSuggestions

focusBelowSuggestions: () => void;

Focus on the SearchMore action below the suggestions. If not available then focus on ForceResolve action.

property focusSearchForMoreButton

focusSearchForMoreButton: () => void;

Focus the SearchMore action button.

property hasSuggestedAction

hasSuggestedAction: () => boolean;

Whether it has any suggested actions like ForceResolve or SearchMore.

property hasSuggestedActionSelected

hasSuggestedActionSelected: () => boolean;

Whether any of the suggested actions (ForceResolve or SearchMore) is selected.

property tryHandleKeyDown

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

Returns true if the event was handled, false otherwise.

interface ISuggestionsControlProps

interface ISuggestionsControlProps<T>
    extends React.ClassAttributes<any>,
        ISuggestionsCoreProps<T> {}

property className

className?: string;

The CSS classname of the suggestions list.

property completeSuggestion

completeSuggestion: () => void;

Completes the suggestion

property footerItemsProps

footerItemsProps?: ISuggestionsHeaderFooterProps[];

The footer items props

property headerItemsProps

headerItemsProps?: ISuggestionsHeaderFooterProps[];

The header items props

property shouldSelectFirstItem

shouldSelectFirstItem?: () => boolean;

Whether or not the first selectable item in the suggestions list should be selected

property suggestionsFooterContainerAriaLabel

suggestionsFooterContainerAriaLabel?: string;

An ARIA label for the container that is the parent of the suggestions footer items.

property suggestionsHeaderContainerAriaLabel

suggestionsHeaderContainerAriaLabel?: string;

An ARIA label for the container that is the parent of the suggestions header items.

interface ISuggestionsControlState

interface ISuggestionsControlState<T> {}

property selectedFooterIndex

selectedFooterIndex: number;

property selectedHeaderIndex

selectedHeaderIndex: number;

property suggestions

suggestions: ISuggestionModel<T>[];

interface ISuggestionsCoreProps

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

property componentRef

componentRef?: IRefObject<{}>;

Gets the component ref.

property onRenderSuggestion

onRenderSuggestion?: (
    props: T,
    suggestionItemProps: ISuggestionItemProps<T>
) => JSX.Element;

How the suggestion should look in the suggestion list.

property onSuggestionClick

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

What should occur when a suggestion is clicked

property onSuggestionRemove

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

Function to fire when one of the optional remove buttons on a suggestion is clicked.

property resultsMaximumNumber

resultsMaximumNumber?: number;

Maximum number of suggestions to show in the full suggestion list.

property shouldLoopSelection

shouldLoopSelection: boolean;

Indicates whether to loop around to the top or bottom of the suggestions on calling nextSuggestion and previousSuggestion, respectively

property showRemoveButtons

showRemoveButtons?: boolean;

Indicates whether to show a button with each suggestion to remove that suggestion.

property suggestions

suggestions: ISuggestionModel<T>[];

The list of Suggestions that will be displayed

property suggestionsAvailableAlertText

suggestionsAvailableAlertText?: string;

Screen reader message to read when there are suggestions available.

property suggestionsContainerAriaLabel

suggestionsContainerAriaLabel?: string;

An ARIA label for the container that is the parent of the suggestions.

property suggestionsItemClassName

suggestionsItemClassName?: string;

the classname of the suggestionitem.

interface ISuggestionsHeaderFooterItemProps

interface ISuggestionsHeaderFooterItemProps {}

property className

className: string | undefined;

property componentRef

componentRef?: IRefObject<{}>;

property id

id: string;

property isSelected

isSelected: boolean;

property onExecute

onExecute?: () => void;

property renderItem

renderItem: () => JSX.Element;

interface ISuggestionsHeaderFooterProps

interface ISuggestionsHeaderFooterProps {}

property ariaLabel

ariaLabel?: string;

property className

className?: string;

property onExecute

onExecute?: () => void;

property renderItem

renderItem: () => JSX.Element;

property shouldShow

shouldShow: () => boolean;

interface ISuggestionsItem

interface ISuggestionsItem {}

SuggestionItem component.

interface ISuggestionsItemStyles

interface ISuggestionsItemStyles {}

Represents the stylable areas of the SuggestionItem.

property closeButton

closeButton: IStyle;

Refers to the remove button in case it's rendered.

property itemButton

itemButton: IStyle;

Refers to the CommandButton holding the content of the suggested item.

property root

root: IStyle;

Root element of the suggested item.

interface ISuggestionsProps

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

Suggestions props interface. Refers to the entire container holding all the suggestions. Type T is the type of the items that are displayed.

property className

className?: string;

The CSS className of the suggestions root.

property componentRef

componentRef?: IRefObject<ISuggestions<T>>;

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

property createGenericItem

createGenericItem?: () => void;

The callback that should be called when the user attempts to use the input text as as item

property forceResolveText

forceResolveText?: string;

The text that appears indicating to the use to force resolve the input

property isLoading

isLoading?: boolean;

Used to indicate whether or not the suggestions are loading.

property isMostRecentlyUsedVisible

isMostRecentlyUsedVisible?: boolean;

Indicates if a short list of recent suggestions should be shown.

property isResultsFooterVisible

isResultsFooterVisible?: boolean;

Indicates if the text in resultsFooter or resultsFooterFull should be shown at the end of the suggestion list.

property isSearching

isSearching?: boolean;

Used to indicate whether or not the component is searching for more results.

property loadingText

loadingText?: string;

The text to display while the results are loading.

property moreSuggestionsAvailable

moreSuggestionsAvailable?: boolean;

Used to indicate whether or not the user can request more suggestions. Dictates whether or not the searchForMore button is displayed.

property mostRecentlyUsedHeaderText

mostRecentlyUsedHeaderText?: string;

The text that should appear at the top of the most recently used box.

property noResultsFoundText

noResultsFoundText?: string;

The text that should appear if no results are found when searching.

property onGetMoreResults

onGetMoreResults?: () => void;

The callback that should be called when the user attempts to get more results

property onRenderNoResultFound

onRenderNoResultFound?: IRenderFunction<void>;

How the "no result found" should look in the suggestion list.

property onRenderSuggestion

onRenderSuggestion: (
    props: T,
    suggestionItemProps: ISuggestionItemProps<T>
) => JSX.Element;

How the suggestion should look in the suggestion list.

property onSuggestionClick

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

What should occur when a suggestion is clicked

property onSuggestionRemove

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

Function to fire when one of the optional remove buttons on a suggestion is clicked.
TODO (adjective-object) remove IPersonaprops before the next major version bump

property refocusSuggestions

refocusSuggestions?: (keyCode: KeyCodes) => void;

A function that resets focus to the expected item in the suggestion list

property removeSuggestionAriaLabel

removeSuggestionAriaLabel?: string;

An ARIA label to use for the buttons to remove individual suggestions.

property resultsFooter

resultsFooter?: (props: ISuggestionsProps<T>) => JSX.Element;

A renderer that adds an element at the end of the suggestions list it has fewer items than resultsMaximumNumber.

property resultsFooterFull

resultsFooterFull?: (props: ISuggestionsProps<T>) => JSX.Element;

A renderer that adds an element at the end of the suggestions list it has more items than resultsMaximumNumber.

property resultsMaximumNumber

resultsMaximumNumber?: number;

Maximum number of suggestions to show in the full suggestion list.

property searchErrorText

searchErrorText?: string;

The text that should appear if there is a search error.
Deprecated
Use noResultsFoundText instead.

property searchForMoreIcon

searchForMoreIcon?: IIconProps;

The icon that appears indicating to the user that they can search for more results.

property searchForMoreText

searchForMoreText?: string;

The text that appears indicating to the user that they can search for more results.

property searchingText

searchingText?: string;

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

property showForceResolve

showForceResolve?: () => boolean;

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

property showRemoveButtons

showRemoveButtons?: boolean;

Indicates whether to show a button with each suggestion to remove that suggestion.

property styles

styles?: IStyleFunctionOrObject<any, any>;

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

property suggestions

suggestions: ISuggestionModel<T>[];

The list of Suggestions that will be displayed

property suggestionsAvailableAlertText

suggestionsAvailableAlertText?: string;

Screen reader message to read when there are suggestions available.

property suggestionsClassName

suggestionsClassName?: string;

The CSS className of the suggestions list

property suggestionsContainerAriaLabel

suggestionsContainerAriaLabel?: string;

An ARIA label for the container that is the parent of the suggestions.

property suggestionsHeaderText

suggestionsHeaderText?: string;

The text that appears at the top of the suggestions list.

property suggestionsItemClassName

suggestionsItemClassName?: string;

The className of the suggestion item.

property suggestionsListId

suggestionsListId?: string;

The string that will be used as the suggestionsListId. Will be used by the BasePicker to keep track of the list for aria.

property theme

theme?: ITheme;

Theme provided by High-Order Component.

interface ISuggestionsState

interface ISuggestionsState {}

property selectedActionType

selectedActionType: SuggestionActionType;

interface ISuggestionsStyles

interface ISuggestionsStyles {}

Represents the stylable areas of the Suggestions.

property forceResolveButton

forceResolveButton: IStyle;

Refers to the 'Force resolve' actionButton.

property noSuggestions

noSuggestions: IStyle;

Refers to the text rendered when no suggestions are found.

property root

root: IStyle;

Root element of the suggestions outer wrapper.

property searchForMoreButton

searchForMoreButton: IStyle;

Refers to the 'Search for more' actionButton.

property subComponentStyles

subComponentStyles: ISuggestionsSubComponentStyles;

SubComponents (Spinner) styles.

property suggestionsAvailable

suggestionsAvailable: IStyle;

Refers to the text displaying if more suggestions available.

property suggestionsContainer

suggestionsContainer: IStyle;

Refers to the suggestions container.

property title

title: IStyle;

Refers to the title rendered for suggestions container header and/or footer (if provided).

interface ISuggestionsSubComponentStyles

interface ISuggestionsSubComponentStyles {}

Styles interface of the SubComponents rendered within PeoplePickerItemSelected.

property spinner

spinner: IStyleFunctionOrObject<ISpinnerStyleProps, any>;

Refers to the Spinner rendered within the Suggestions when searching or loading suggestions.

interface ISwatchColorPickerProps

interface ISwatchColorPickerProps {}

property ariaPosInSet

ariaPosInSet?: number;

Position this grid 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 cellBorderWidth

cellBorderWidth?: number;

Width of the border indicating a hovered/selected cell, in pixels

property cellHeight

cellHeight?: number;

Height of an individual cell, in pixels

property cellMargin

cellMargin?: number;

The distance between cells, in pixels

property cellShape

cellShape?: 'circle' | 'square';

The shape of the color cells. 'circle'

property cellWidth

cellWidth?: number;

Width of an individual cell, in pixels

property className

className?: string;

Additional class name to provide on the root element

property colorCells

colorCells: IColorCellProps[];

The color cells that will be made available to the user.
Note: When the reference to this prop changes, regardless of how many color cells change, all of the color cells will be re-rendered (potentially bad perf) because we memoize based on this prop's reference.

property columnCount

columnCount: number;

Number of columns for the swatch color picker

property disabled

disabled?: boolean;

Whether the control is disabled.

property doNotContainWithinFocusZone

doNotContainWithinFocusZone?: boolean;

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

property focusOnHover

focusOnHover?: boolean;

Whether to update focus when a cell is hovered.

property getColorGridCellStyles

getColorGridCellStyles?: IStyleFunctionOrObject<
    IColorPickerGridCellStyleProps,
    IColorPickerGridCellStyles
>;

Styles for the grid cells.

property id

id?: string;

ID for the swatch color picker's root element. Also used as a prefix for the IDs of color cells.

property isControlled

isControlled?: boolean;

Indicates whether the SwatchColorPicker is fully controlled. When true, the component will not set its internal state to track the selected color. Instead, the parent component will be responsible for handling state in the callbacks like onColorChanged.
NOTE: This property is a temporary workaround to force the component to be fully controllable without breaking existing behavior

property mouseLeaveParentSelector

mouseLeaveParentSelector?: string | undefined;

Selector to focus on mouse leave. Should only be used in conjunction with focusOnHover.

property onCellFocused

onCellFocused?: (id?: string, color?: string) => void;

Callback for when the user focuses a color cell. If id and color are unspecified, cells are no longer being focused.

property onCellHovered

onCellHovered?: (id?: string, color?: string) => void;

Callback for when the user hovers over a color cell. If id and color are unspecified, cells are no longer being hovered.

property onColorChanged

onColorChanged?: (id?: string, color?: string) => void;

Callback for when the user changes the color. If id and color are unspecified, there is no selected cell. (e.g. the user executed the currently selected cell to unselect it)

property onRenderColorCell

onRenderColorCell?: IRenderFunction<IColorCellProps>;

Custom render function for the color cell

property positionInSet

positionInSet?: number;

Deprecated
Use ariaPosInSet

property selectedId

selectedId?: string;

The ID of color cell that is currently selected

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<
    ISwatchColorPickerStyleProps,
    ISwatchColorPickerStyles
>;

Styles for the component.

property theme

theme?: ITheme;

Theme to apply to the component.

interface ISwatchColorPickerState

interface ISwatchColorPickerState {}

property selectedIndex

selectedIndex?: number;

interface ISwatchColorPickerStyleProps

interface ISwatchColorPickerStyleProps {}

Properties required to build the styles for the color picker component.

property cellMargin

cellMargin?: number;

The distance between cells

property className

className?: string;

Custom className to apply to the container.

property theme

theme: ITheme;

Theme to apply to the container

interface ISwatchColorPickerStyles

interface ISwatchColorPickerStyles {}

Styles for the Color Picker Component.

property focusedContainer

focusedContainer?: IStyle;

Style for the FocusZone container for the grid.

property root

root: IStyle;

Style applied to the container grid.

property tableCell

tableCell: IStyle;

Style for the table cells of the grid.

interface ITag

interface ITag {}

TagPickerItem item interface.

property key

key: string | number;

Unique key for the item.

property name

name: string;

Name of the item.

interface ITagItemProps

interface ITagItemProps extends IPickerItemProps<ITag> {}

TagItem component props

property className

className?: string;

Additional CSS class(es) to apply to the TagItem root element.

property enableTagFocusInDisabledPicker

enableTagFocusInDisabledPicker?: boolean;

Enable or not focus on TagItem when TagPicker is disabled.

property styles

styles?: IStyleFunctionOrObject<ITagItemStyleProps, ITagItemStyles>;

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

property theme

theme?: ITheme;

Theme provided by High-Order Component.

property title

title?: string;

The title (and aria-label) attribute used by the TagItem text element.

interface ITagItemStyles

interface ITagItemStyles {}

Represents the stylable areas of the TagItem.

property close

close: IStyle;

Refers to the cancel action button on a picked TagItem.

property root

root: IStyle;

Root element of picked TagItem

property text

text: IStyle;

Refers to the text element of the TagItem already picked.

interface ITagItemSuggestionProps

interface ITagItemSuggestionProps extends React.AllHTMLAttributes<HTMLElement> {}

TagItemSuggestion component props

property className

className?: string;

Additional CSS class(es) to apply to the TagItemSuggestion div element

property styles

styles?: IStyleFunctionOrObject<
    ITagItemSuggestionStyleProps,
    ITagItemSuggestionStyles
>;

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 ITagItemSuggestionStyles

interface ITagItemSuggestionStyles {}

Represents the stylable areas of the TagItemSuggestion

property suggestionTextOverflow

suggestionTextOverflow?: IStyle;

Refers to the text element of the TagItemSuggestion

interface ITagPickerProps

interface ITagPickerProps extends IBasePickerProps<ITag> {}

TagPicker component props

interface ITeachingBubble

interface ITeachingBubble {}

method focus

focus: () => void;

Sets focus to the TeachingBubble root element

interface ITeachingBubbleProps

interface ITeachingBubbleProps
    extends React.ClassAttributes<TeachingBubbleBase | TeachingBubbleContentBase>,
        IAccessiblePopupProps {}

TeachingBubble component props.

property ariaDescribedBy

ariaDescribedBy?: string;

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

property ariaLabelledBy

ariaLabelledBy?: string;

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

property calloutProps

calloutProps?: ICalloutProps;

Properties to pass through for Callout, reference detail properties in ICalloutProps

property componentRef

componentRef?: IRefObject<ITeachingBubble>;

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

property focusTrapZoneProps

focusTrapZoneProps?: IFocusTrapZoneProps;

Properties to pass through for FocusTrapZone, reference detail properties in IFocusTrapZoneProps

property footerContent

footerContent?: string | JSX.Element;

Text that will be rendered in the footer of the TeachingBubble. May be rendered alongside primary and secondary buttons.

property hasCloseButton

hasCloseButton?: boolean;

Whether the TeachingBubble renders close button in the top right corner.

property hasCloseIcon

hasCloseIcon?: boolean;

Deprecated
Use hasCloseButton.

property hasCondensedHeadline

hasCondensedHeadline?: boolean;

A variation with smaller bold headline and no margins.

property hasSmallHeadline

hasSmallHeadline?: boolean;

A variation with smaller bold headline and margins to the body. (hasCondensedHeadline takes precedence if it is also set to true.)

property headline

headline?: string;

A headline for the Teaching Bubble.

property illustrationImage

illustrationImage?: IImageProps;

An Image for the TeachingBubble.

property isWide

isWide?: boolean;

Whether or not the TeachingBubble is wide, with image on the left side.

property onDismiss

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

Callback when the TeachingBubble tries to close.

property primaryButtonProps

primaryButtonProps?: IButtonProps;

The Primary interaction button

property secondaryButtonProps

secondaryButtonProps?: IButtonProps;

The Secondary interaction button

property styles

styles?: IStyleFunctionOrObject<
    ITeachingBubbleStyleProps,
    ITeachingBubbleStyles
>;

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

property target

target?: Target;

Element, MouseEvent, Point, or querySelector string that the TeachingBubble should anchor to.

property targetElement

targetElement?: HTMLElement;

Deprecated
use target instead Element to anchor the TeachingBubble to.

property theme

theme?: ITheme;

Theme provided by High-Order Component.

interface ITeachingBubbleState

interface ITeachingBubbleState {}

property isTeachingBubbleVisible

isTeachingBubbleVisible?: boolean;

interface ITeachingBubbleStyles

interface ITeachingBubbleStyles {}

property body

body: IStyle;

property bodyContent

bodyContent: IStyle;

property closeButton

closeButton: IStyle;

property content

content: IStyle;

footer: IStyle;

header: IStyle;

property headline

headline: IStyle;

property imageContent

imageContent: IStyle;

property primaryButton

primaryButton: IStyle;

property root

root: IStyle;

property secondaryButton

secondaryButton: IStyle;

property subComponentStyles

subComponentStyles?: ITeachingBubbleSubComponentStyles;

property subText

subText: IStyle;

interface ITeachingBubbleSubComponentStyles

interface ITeachingBubbleSubComponentStyles {}

property callout

callout: IStyleFunctionOrObject<any, any>;

Refers to the callout that hosts the TeachingBubble.

interface ITextField

interface ITextField {}

property blur

blur: () => void;

Blurs the input

property focus

focus: () => void;

Sets focus to the input.

property select

select: () => void;

Select the value of the text field.

property selectionEnd

selectionEnd: number | null;

Gets the selection end of the text field. Returns -1 if there is no selection.

property selectionStart

selectionStart: number | null;

Gets the selection start of the text field. Returns -1 if there is no selection.

property setSelectionEnd

setSelectionEnd: (value: number) => void;

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

property setSelectionRange

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

Sets the start and end positions of a selection in a text field. Call with start and end set to the same value to set the cursor position.
Parameter start
Index of the start of the selection.
Parameter end
Index of the end of the selection.

property setSelectionStart

setSelectionStart: (value: number) => void;

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

property value

value: string | undefined;

Gets the current value of the input.

interface ITextFieldProps

interface ITextFieldProps
    extends React.AllHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {}

TextField component props.

property ariaLabel

ariaLabel?: string;

Aria label for the text field.

property autoAdjustHeight

autoAdjustHeight?: boolean;

For multiline text fields, whether or not to auto adjust text field height.

property autoComplete

autoComplete?: string;

Whether the input field should have autocomplete enabled. This tells the browser to display options based on earlier typed values. Common values are 'on' and 'off' but for all possible values see the following links: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

property borderless

borderless?: boolean;

Whether or not the text field is borderless.

property canRevealPassword

canRevealPassword?: boolean;

Whether to show the reveal password button for input type 'password' (will be ignored unless the type prop is set to 'password').

property className

className?: string;

Optional class name that is added to the container of the component.

property componentRef

componentRef?: IRefObject<ITextField>;

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

property defaultValue

defaultValue?: string;

Default value of the text field. Only provide this if the text field is an uncontrolled component; otherwise, use the value property.

property deferredValidationTime

deferredValidationTime?: number;

Text field will start to validate after users stop typing for deferredValidationTime milliseconds. Updates to this prop will not be respected.

property description

description?: string;

Description displayed below the text field to provide additional details about what text to enter.

property disabled

disabled?: boolean;

Disabled state of the text field.

property errorMessage

errorMessage?: string | JSX.Element;

Static error message displayed below the text field. Use onGetErrorMessage to dynamically change the error message displayed (if any) based on the current value. errorMessage and onGetErrorMessage are mutually exclusive (errorMessage takes precedence).

property iconProps

iconProps?: IIconProps;

Props for an optional icon, displayed in the far right end of the text field.

property inputClassName

inputClassName?: string;

Optional class name that is added specifically to the input/textarea element.

property label

label?: string;

Label displayed above the text field (and read by screen readers).

property mask

mask?: string;

Deprecated
Only used by MaskedTextField, which now has a separate IMaskedTextFieldProps interface.

property maskChar

maskChar?: string;

Deprecated
Only used by MaskedTextField, which now has a separate IMaskedTextFieldProps interface.

property maskFormat

maskFormat?: {
    [key: string]: RegExp;
};

Deprecated
Only used by MaskedTextField, which now has a separate IMaskedTextFieldProps interface.

property multiline

multiline?: boolean;

Whether or not the text field is a multiline text field.

property onChange

onChange?: (
    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
    newValue?: string
) => void;

Callback for when the input value changes. This is called on both input and change events. (In a later version, this will probably only be called for the change event.)

property onGetErrorMessage

onGetErrorMessage?: (
    value: string
) => string | JSX.Element | PromiseLike<string | JSX.Element> | undefined;

Function used to determine whether the input value is valid and get an error message if not. Mutually exclusive with the static string errorMessage (it will take precedence over this).
When it returns string | JSX.Element: - If valid, it returns empty string. - If invalid, it returns the error message and the text field will show a red border and show an error message below the text field.
When it returns Promise<string | JSX.Element>: - The resolved value is displayed as the error message. - If rejected, the value is thrown away.

property onNotifyValidationResult

onNotifyValidationResult?: (
    errorMessage: string | JSX.Element,
    value: string | undefined
) => void;

Function called after validation completes.

property onRenderDescription

onRenderDescription?: IRenderFunction<ITextFieldProps>;

Custom renderer for the description.

property onRenderInput

onRenderInput?: IRenderFunction<
    React.InputHTMLAttributes<HTMLInputElement> &
        React.RefAttributes<HTMLInputElement>
>;

Custom renderer for the actual single-line input field (not used if multiline is true). This receives the processed props which would usually be passed to the <input> element and allows manually modifying them or rendering as a different element. (Use with care, since changes here could easily break the component.)

property onRenderLabel

onRenderLabel?: IRenderFunction<ITextFieldProps>;

Custom renderer for the label. If you don't call defaultRender, ensure that you give your custom-rendered label an id and that you set the textfield's aria-labelledby prop to that id.

property onRenderPrefix

onRenderPrefix?: IRenderFunction<ITextFieldProps>;

Custom render function for prefix.

property onRenderSuffix

onRenderSuffix?: IRenderFunction<ITextFieldProps>;

Custom render function for suffix.

property prefix

prefix?: string;

Prefix displayed before the text field contents. This is not included in the value. Ensure a descriptive label is present to assist screen readers, as the value does not include the prefix.

property readOnly

readOnly?: boolean;

If true, the text field is readonly.

property resizable

resizable?: boolean;

For multiline text fields, whether or not the field is resizable.

property styles

styles?: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldStyles>;

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

property suffix

suffix?: string;

Suffix displayed after the text field contents. This is not included in the value. Ensure a descriptive label is present to assist screen readers, as the value does not include the suffix.

property theme

theme?: ITheme;

Theme (provided through customization).

property underlined

underlined?: boolean;

Whether or not the text field is underlined.

property validateOnFocusIn

validateOnFocusIn?: boolean;

Run validation when focus moves into the input, and **do not** validate on change.
(Unless this prop and/or validateOnFocusOut is set to true, validation will run on every change.)

property validateOnFocusOut

validateOnFocusOut?: boolean;

Run validation when focus moves out of the input, and **do not** validate on change.
(Unless this prop and/or validateOnFocusIn is set to true, validation will run on every change.)

property validateOnLoad

validateOnLoad?: boolean;

Whether validation should run when the input is initially rendered.

property value

value?: string;

Current value of the text field. Only provide this if the text field is a controlled component where you are maintaining its current state; otherwise, use the defaultValue property.

interface ITextFieldStyles

interface ITextFieldStyles {}

property description

description: IStyle;

Style for description element.

property errorMessage

errorMessage: IStyle;

Style for error message element.

property field

field: IStyle;

Style for main field entry element.

property fieldGroup

fieldGroup: IStyle;

Style for field group encompassing entry area (prefix, field, icon and suffix).

property icon

icon: IStyle;

Style for icon prop element.

property prefix

prefix: IStyle;

Style for prefix element.

property revealButton

revealButton: IStyle;

Styling for reveal password button

property revealIcon

revealIcon: IStyle;

Styling for reveal password icon

property revealSpan

revealSpan: IStyle;

Styling for reveal password span

property root

root: IStyle;

Style for root element.

property subComponentStyles

subComponentStyles: ITextFieldSubComponentStyles;

Styling for subcomponents.

property suffix

suffix: IStyle;

Style for suffix element.

property wrapper

wrapper: IStyle;

Style for TextField wrapper element.

interface ITextFieldSubComponentStyles

interface ITextFieldSubComponentStyles {}

property label

label: IStyleFunctionOrObject<any, any>;

Styling for Label child component.

interface ITextProps

interface ITextProps
    extends ISlottableProps<ITextSlots>,
        IStyleableComponentProps<ITextProps, ITextTokens, ITextStyles>,
        React.HTMLAttributes<HTMLElement> {}

Inputs to the component

property as

as?: React.ElementType<React.HTMLAttributes<HTMLElement>>;

Optionally render the component as another component type or primitive.

property block

block?: boolean;

Whether the text is displayed as a block element.
Note that in order for ellipsis on overflow to work properly, block and nowrap should be set to true.

property nowrap

nowrap?: boolean;

Whether the text is not wrapped.
Note that in order for ellipsis on overflow to work properly, block and nowrap should be set to true.

property variant

variant?: keyof IFontStyles;

Optional font type for Text.

interface ITextSlots

interface ITextSlots {}

property root

root?: IHTMLSlot;

interface ITextTokens

interface ITextTokens {}

interface IThemeRules

interface IThemeRules {}

index signature

[key: string]: IThemeSlotRule;

interface IThemeSlotRule

interface IThemeSlotRule {}

property asShade

asShade?: Shade;

If set, this slot is the specified shade of the slot it inherits from.

property color

color?: IColor;

The actual color this theme slot is if it is a color.

property dependentRules

dependentRules: IThemeSlotRule[];

A collection of rules that inherit from this one. It is the responsibility of the inheriting rule to add itself to its parent's dependentRules collection.

property inherits

inherits?: IThemeSlotRule;

The theme slot this slot is based on.

property isBackgroundShade

isBackgroundShade?: boolean;

Whether this slot is a background shade, which uses different logic for generating its inheriting-as-shade value.

property isCustomized

isCustomized?: boolean;

Whether this slot has been manually overridden (else, it was automatically generated based on inheritance).

property name

name: string;

The name of this theme slot.

property value

value?: string;

The value of this slot if it is NOT a color. Must be falsey if not a color.

interface IToggle

interface IToggle {}

property focus

focus: () => void;

interface IToggleProps

interface IToggleProps extends React.HTMLAttributes<HTMLElement> {}

Toggle component props.

property ariaLabel

ariaLabel?: string;

Text for screen-reader to announce as the name of the toggle.

property as

as?: IComponentAs<React.HTMLAttributes<HTMLElement>>;

Render the root element as another type.

property checked

checked?: boolean;

Checked state of the toggle. If you are maintaining state yourself, use this property. Otherwise use defaultChecked.

property componentRef

componentRef?: IRefObject<IToggle>;

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

property defaultChecked

defaultChecked?: boolean;

Initial state of the toggle. If you want the toggle to maintain its own state, use this. Otherwise use checked.

property disabled

disabled?: boolean;

Optional disabled flag.

property inlineLabel

inlineLabel?: boolean;

Whether the label (not the onText/offText) should be positioned inline with the toggle control. Left (right in RTL) side when on/off text provided VS right (left in RTL) side when no on/off text. Caution: when not providing on/off text user may get confused in differentiating the on/off states of the toggle.

property keytipProps

keytipProps?: IKeytipProps;

Optional keytip for this toggle

property label

label?: string | JSX.Element;

A label for the toggle.

property offAriaLabel

offAriaLabel?: string;

Deprecated
Use ariaLabel for name, and let the metadata convey state

property offText

offText?: string;

Text to display when toggle is OFF. Caution: when not providing on/off text user may get confused in differentiating the on/off states of the toggle.

property onAriaLabel

onAriaLabel?: string;

Deprecated
Use ariaLabel for name, and let the metadata convey state

property onChange

onChange?: (event: React.MouseEvent<HTMLElement>, checked?: boolean) => void;

Callback issued when the value changes.

property onChanged

onChanged?: (checked: boolean) => void;

Deprecated
Use onChange instead.

property onText

onText?: string;

Text to display when toggle is ON. Caution: when not providing on/off text user may get confused in differentiating the on/off states of the toggle.

property role

role?: 'checkbox' | 'switch' | 'menuitemcheckbox';

(Optional) Specify whether to use the "switch" role (ARIA 1.1) or the checkbox role (ARIA 1.0). If unspecified, defaults to "switch".

property styles

styles?: IStyleFunctionOrObject<IToggleStyleProps, IToggleStyles>;

Optional styles for the component.

property theme

theme?: ITheme;

Theme provided by HOC.

interface IToggleState

interface IToggleState {}

property checked

checked: boolean;

interface IToggleStyleProps

interface IToggleStyleProps {}

Properties required to build the styles for the Toggle component.

property checked

checked?: boolean;

Component is checked.

property className

className?: string;

Root element class name.

property disabled

disabled?: boolean;

Component is disabled.

property inlineLabel

inlineLabel?: boolean;

Whether label should be positioned inline with the toggle.

property onOffMissing

onOffMissing?: boolean;

Whether the user did not specify a on/off text. Influencing only when inlineLabel is used.

property theme

theme: ITheme;

Theme values.

interface IToggleStyles

interface IToggleStyles {}

Styles for the Toggle component.

property container

container: IStyle;

Container for the toggle pill and the text next to it.

property label

label: IStyle;

Label element above the toggle.

property pill

pill: IStyle;

Pill, rendered as a button.

property root

root: IStyle;

Root element.

property text

text: IStyle;

Text next to the pill.

property thumb

thumb: IStyle;

Thumb inside of the pill.

interface ITooltip

interface ITooltip {}

interface ITooltipHost

interface ITooltipHost {}

property dismiss

dismiss: () => void;

Dismisses the tooltip.

property show

show: () => void;

Shows the tooltip.

interface ITooltipHostProps

interface ITooltipHostProps
    extends React.HTMLAttributes<HTMLDivElement | TooltipHostBase> {}

TooltipHost props. Note that native props (such as id, className, and aria- props) are passed through to the Tooltip itself, rather than being used on the host element.

property calloutProps

calloutProps?: ICalloutProps;

Additional properties to pass through for Callout.

property className

className?: string;

Class name to apply to the *tooltip itself*, not the host. To apply a class to the host, use hostClassName or styles.root.

property closeDelay

closeDelay?: number;

Number of milliseconds to delay closing the tooltip, so that the user has time to hover over the tooltip and interact with it. Hovering over the tooltip will count as hovering over the host, so that the tooltip will stay open if the user is actively interacting with it.

property componentRef

componentRef?: IRefObject<ITooltipHost>;

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

property content

content?: string | JSX.Element | JSX.Element[];

Content to display in the Tooltip.

property delay

delay?: TooltipDelay;

Length of delay before showing the tooltip on hover.

property directionalHint

directionalHint?: DirectionalHint;

How the tooltip should be anchored to its targetElement.

property directionalHintForRTL

directionalHintForRTL?: DirectionalHint;

How the element should be positioned in RTL layouts. If not specified, a mirror of directionalHint will be used.

property hostClassName

hostClassName?: string;

Class name to apply to tooltip host.

property id

id?: string;

Optional ID to pass through to the tooltip (not used on the host itself). Auto-generated if not provided.

property overflowMode

overflowMode?: TooltipOverflowMode;

If this is unset (the default), the tooltip is always shown even if there's no overflow.
If set, only show the tooltip if the specified element (Self or Parent) has overflow. When set to Parent, the parent element is also used as the tooltip's target element.
Note that even with Self mode, the TooltipHost *does not* check whether any children have overflow.

property setAriaDescribedBy

setAriaDescribedBy?: boolean;

Whether or not to mark the TooltipHost root element as described by the tooltip. If not specified, the caller should pass an id to the TooltipHost (to be passed through to the Tooltip) and mark the appropriate element as aria-describedby the id.

property styles

styles?: IStyleFunctionOrObject<ITooltipHostStyleProps, ITooltipHostStyles>;

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

property theme

theme?: ITheme;

Theme provided by higher-order component.

property tooltipProps

tooltipProps?: ITooltipProps;

Additional properties to pass through for Tooltip.

method onTooltipToggle

onTooltipToggle: (isTooltipVisible: boolean) => void;

Notifies when tooltip becomes visible or hidden, whatever the trigger was.

interface ITooltipHostState

interface ITooltipHostState {}

property isAriaPlaceholderRendered

isAriaPlaceholderRendered: boolean;

Deprecated
No longer used internally

property isTooltipVisible

isTooltipVisible: boolean;

interface ITooltipHostStyleProps

interface ITooltipHostStyleProps {}

property className

className?: string;

property theme

theme: ITheme;

interface ITooltipHostStyles

interface ITooltipHostStyles {}

property root

root: IStyle;

Style for the host wrapper element.

interface ITooltipProps

interface ITooltipProps extends React.HTMLAttributes<HTMLDivElement | TooltipBase> {}

property calloutProps

calloutProps?: ICalloutProps;

Properties to pass through for Callout.

property componentRef

componentRef?: IRefObject<ITooltip>;

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

property content

content?: string | JSX.Element | JSX.Element[];

Content to be passed to the tooltip

property delay

delay?: TooltipDelay;

Length of delay. Set to TooltipDelay.zero if you do not want a delay.

property directionalHint

directionalHint?: DirectionalHint;

How the tooltip should be anchored to its targetElement.

property directionalHintForRTL

directionalHintForRTL?: DirectionalHint;

How the element should be positioned in RTL layouts. If not specified, a mirror of directionalHint will be used instead

property maxWidth

maxWidth?: string | null;

Max width of tooltip

property onRenderContent

onRenderContent?: IRenderFunction<ITooltipProps>;

Render function to populate tooltip content.

property styles

styles?: IStyleFunctionOrObject<ITooltipStyleProps, ITooltipStyles>;

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

property targetElement

targetElement?: HTMLElement;

Element to anchor the Tooltip to.

property theme

theme?: ITheme;

Theme provided by higher-order component.

interface ITooltipStyleProps

interface ITooltipStyleProps {}

property beakWidth

beakWidth?: number;

The width of the Callout's beak

property className

className?: string;

property delay

delay?: TooltipDelay;

Delay before tooltip appears.
Deprecated
Delay logic moved to TooltipHost vs relying on animation delay.

property gapSpace

gapSpace?: number;

The gap between the Callout and the target

property maxWidth

maxWidth?: string;

Maximum width of tooltip.

property theme

theme: ITheme;

interface ITooltipStyles

interface ITooltipStyles {}

property content

content: IStyle;

Style for the content element.

property root

root: IStyle;

Style for the root element.

property subText

subText: IStyle;

Style for the subtext element.

interface IUniqueKeytip

interface IUniqueKeytip {}

property keytip

keytip: IKeytipProps;

property uniqueID

uniqueID: string;

interface IVerticalDividerClassNames

interface IVerticalDividerClassNames {}

Deprecated
Deprecated class names, used to be used to provider customizations, use IVerticalDividerStyles instead

property divider

divider: string;

Styling for the divider.

property wrapper

wrapper: string;

Styling for the div that wraps the actual divider

interface IVerticalDividerProps

interface IVerticalDividerProps {}

Props for the Vertical Divider

property className

className?: string;

className that will be placed on the divider wrapper div

property getClassNames

getClassNames?: (theme: ITheme) => IVerticalDividerClassNames;

Deprecated
Use styles instead. Optional function to generate the class names for the divider for custom styling

property styles

styles?: IStyleFunctionOrObject<
    IVerticalDividerPropsStyles,
    IVerticalDividerStyles
>;

Optional override stylings that will get merged with the dividers styles.

property theme

theme?: ITheme;

The theme that should be used to render the vertical divider.

interface IVerticalDividerStyles

interface IVerticalDividerStyles {}

Style interface that defines the different areas that styles can be customized on the Vertical Divider

property divider

divider: IStyle;

Styling for the divider.

property wrapper

wrapper: IStyle;

Styling for the div that wraps the actual divider

interface IViewport

interface IViewport {}

Viewport rectangle dimensions.

property height

height: number;

Height in pixels.

property width

width: number;

Width in pixels.

interface IWindowWithSegments

interface IWindowWithSegments extends Window {}

Window with typings for experimental features regarding Dual Screen devices.

property getWindowSegments

getWindowSegments?: () => DOMRect[];

interface IWithResponsiveModeState

interface IWithResponsiveModeState {}

property responsiveMode

responsiveMode?: ResponsiveMode;

interface IWithViewportProps

interface IWithViewportProps {}

Props interface for the withViewport component.

property delayFirstMeasure

delayFirstMeasure?: boolean;

Whether or not withViewport will delay before first measuring the viewport size. Setting this will delay measurement by the same amount as the debounce for resizing the window. This is useful for giving the child of the viewport time to render before measuring.
This is an opt-in setting as existing systems have a dependency on immediate measurement for performance. false

property disableResizeObserver

disableResizeObserver?: boolean;

Whether or not to explicitly disable usage of the ResizeObserver in favor of a 'resize' event on window, even if the browser supports ResizeObserver. This may be necessary if use of ResizeObserver results in too many re-renders of the wrapped component due to the frequency at which events are fired.
This has no impact if skipViewportMeasures is true, as no viewport measurement strategy is used.

property skipViewportMeasures

skipViewportMeasures?: boolean;

Whether or not withViewport should disable its viewport measurements, effectively making this decorator pass-through with no impact on the rendered component.
Since withViewport measures the viewport on mount, after each React update, and in response to events, it may cause a component which does not currently need this information due to its configuration to re-render too often. skipViewportMeasures may be toggled on and off based on current state, and will suspend and resume measurement as-needed.
For example, when this wraps DetailsList, set skipViewportMeasures to true when the layoutMode is fixedColumns, since the DetailsList does not use the viewport size in any calculations.
In addition, consider setting skipViewportMeasures to true when running within a React test renderer, to avoid direct DOM dependencies.

interface IWithViewportState

interface IWithViewportState {}

property viewport

viewport?: IViewport;

Enums

enum BaseSlots

enum BaseSlots {
    primaryColor = 0,
    backgroundColor = 1,
    foregroundColor = 2,
}

member backgroundColor

backgroundColor = 1

member foregroundColor

foregroundColor = 2

member primaryColor

primaryColor = 0

enum ButtonType

enum ButtonType {
    normal = 0,
    primary = 1,
    hero = 2,
    compound = 3,
    command = 4,
    icon = 5,
    default = 6,
}

member command

command = 4

member compound

compound = 3

member default

default = 6

member hero

hero = 2

member icon

icon = 5

member normal

normal = 0

member primary

primary = 1

enum CheckboxVisibility

enum CheckboxVisibility {
    onHover = 0,
    always = 1,
    hidden = 2,
}

member always

always = 1

Visible always.

member hidden

hidden = 2

Hide checkboxes.

member onHover

onHover = 0

Visible on hover.

enum CollapseAllVisibility

enum CollapseAllVisibility {
    hidden = 0,
    visible = 1,
}

member hidden

hidden = 0

member visible

visible = 1

enum ColumnActionsMode

enum ColumnActionsMode {
    disabled = 0,
    clickable = 1,
    hasDropdown = 2,
}

Enum to describe how a particular column header behaves. This is used to to specify the property IColumn.columnActionsMode. If IColumn.columnActionsMode is undefined, it's equivalent to ColumnActionsMode.clickable.

member clickable

clickable = 1

Renders the column header as clickable. Default value.

member disabled

disabled = 0

Renders the column header as disabled.

member hasDropdown

hasDropdown = 2

Renders the column header as clickable and displays the dropdown chevron.

enum ColumnDragEndLocation

enum ColumnDragEndLocation {
    outside = 0,
    surface = 1,
    header = 2,
}

Enum to describe where the column has been dropped, after starting the drag

header = 2

Drag ended on header

member outside

outside = 0

Drag ended outside of current list

member surface

surface = 1

Drag ended within current list

enum ConstrainMode

enum ConstrainMode {
    unconstrained = 0,
    horizontalConstrained = 1,
}

member horizontalConstrained

horizontalConstrained = 1

Constrains the list to the given layout space.

member unconstrained

unconstrained = 0

Lets the content grow which allows the page to manage scrolling.

enum ContextualMenuItemType

enum ContextualMenuItemType {
    Normal = 0,
    Divider = 1,
    Header = 2,
    Section = 3,
}

member Divider

Divider = 1

member Header

Header = 2

member Normal

Normal = 0

member Section

Section = 3

enum DetailsListLayoutMode

enum DetailsListLayoutMode {
    fixedColumns = 0,
    justified = 1,
}

member fixedColumns

fixedColumns = 0

Lets the user resize columns and makes not attempt to fit them.

member justified

justified = 1

Manages which columns are visible, tries to size them according to their min/max rules and drops off columns that can't fit and have isCollapsible set.

enum DialogType

enum DialogType {
    normal = 0,
    largeHeader = 1,
    close = 2,
}

member close

close = 2

Dialog with an 'x' close button in the upper-right corner

member largeHeader

largeHeader = 1

Dialog with large header banner

member normal

normal = 0

Standard dialog

enum DocumentCardType

enum DocumentCardType {
    normal = 0,
    compact = 1,
}

member compact

compact = 1

Compact layout. Displays the preview beside the details, rather than above.

member normal

normal = 0

Standard DocumentCard.

enum DropdownMenuItemType

enum DropdownMenuItemType {
    Normal = 0,
    Divider = 1,
    Header = 2,
}

member Divider

Divider = 1

Header = 2

member Normal

Normal = 0

enum ElementType

enum ElementType {
    button = 0,
    anchor = 1,
}

member anchor

anchor = 1

element.

member button

button = 0

element.

enum ExpandingCardMode

enum ExpandingCardMode {
    compact = 0,
    expanded = 1,
}

member compact

compact = 0

To have top compact card only

member expanded

expanded = 1

To have both top compact and bottom expanded card

enum FabricSlots

enum FabricSlots {
    themePrimary = 0,
    themeLighterAlt = 1,
    themeLighter = 2,
    themeLight = 3,
    themeTertiary = 4,
    themeSecondary = 5,
    themeDarkAlt = 6,
    themeDark = 7,
    themeDarker = 8,
    neutralLighterAlt = 9,
    neutralLighter = 10,
    neutralLight = 11,
    neutralQuaternaryAlt = 12,
    neutralQuaternary = 13,
    neutralTertiaryAlt = 14,
    neutralTertiary = 15,
    neutralSecondary = 16,
    neutralPrimaryAlt = 17,
    neutralPrimary = 18,
    neutralDark = 19,
    black = 20,
    white = 21,
}

member black

black = 20

member neutralDark

neutralDark = 19

member neutralLight

neutralLight = 11

member neutralLighter

neutralLighter = 10

member neutralLighterAlt

neutralLighterAlt = 9

member neutralPrimary

neutralPrimary = 18

member neutralPrimaryAlt

neutralPrimaryAlt = 17

member neutralQuaternary

neutralQuaternary = 13

member neutralQuaternaryAlt

neutralQuaternaryAlt = 12

member neutralSecondary

neutralSecondary = 16

member neutralTertiary

neutralTertiary = 15

member neutralTertiaryAlt

neutralTertiaryAlt = 14

member themeDark

themeDark = 7

member themeDarkAlt

themeDarkAlt = 6

member themeDarker

themeDarker = 8

member themeLight

themeLight = 3

member themeLighter

themeLighter = 2

member themeLighterAlt

themeLighterAlt = 1

member themePrimary

themePrimary = 0

member themeSecondary

themeSecondary = 5

member themeTertiary

themeTertiary = 4

member white

white = 21

enum HoverCardType

enum HoverCardType {
    plain = 'PlainCard',
    expanding = 'ExpandingCard',
}

member expanding

expanding = 'ExpandingCard'

File card consisting of two parts: compact and expanded. Has some default sizes if not specified.

member plain

plain = 'PlainCard'

Plain card consisting of one part responsive to the size of content.

enum IconType

enum IconType {
    default = 0,
    image = 1,
    Default = 100000,
    Image = 100001,
}

Deprecated
Icon type is inferred based on presence of IIconProps.imageProps

member default

default = 0

Render using the fabric icon font.
Deprecated
Icon type is inferred based on presence of IIconProps.imageProps

member Default

Default = 100000

Deprecated, use default.
Deprecated
Use default.

member image

image = 1

Render using an image, where imageProps would be used.
Deprecated
Icon type is inferred based on presence of IIconProps.imageProps

member Image

Image = 100001

Deprecated, use image.
Deprecated
Use image.

enum ImageCoverStyle

enum ImageCoverStyle {
    landscape = 0,
    portrait = 1,
}

The cover style to be used on the image

member landscape

landscape = 0

The image will be shown at 100% height of container and the width will be scaled accordingly

member portrait

portrait = 1

The image will be shown at 100% width of container and the height will be scaled accordingly

enum ImageFit

enum ImageFit {
    center = 0,
    contain = 1,
    cover = 2,
    none = 3,
    centerCover = 4,
    centerContain = 5,
}

The possible methods that can be used to fit the image.

member center

center = 0

The image is not scaled. The image is centered and cropped within the content box.

member centerContain

centerContain = 5

The image will be centered horizontally and vertically within the frame and maintains its aspect ratio. It will behave as ImageFit.center if the image's natural height and width is less than the Image frame's height and width, but if either natural height or width are larger than the frame it will behave as ImageFit.contain.

member centerCover

centerCover = 4

The image will be centered horizontally and vertically within the frame and maintains its aspect ratio. It will behave as ImageFit.center if the image's natural height or width is less than the Image frame's height or width, but if both natural height and width are larger than the frame it will behave as ImageFit.cover.

member contain

contain = 1

The image is scaled to maintain its aspect ratio while being fully contained within the frame. The image will be centered horizontally and vertically within the frame. The space in the top and bottom or in the sides of the frame will be empty depending on the difference in aspect ratio between the image and the frame.

member cover

cover = 2

The image is scaled to maintain its aspect ratio while filling the frame. Portions of the image will be cropped from the top and bottom, or the sides, depending on the difference in aspect ratio between the image and the frame.

member none

none = 3

Neither the image nor the frame are scaled. If their sizes do not match, the image will either be cropped or the frame will have empty space.

enum ImageLoadState

enum ImageLoadState {
    notLoaded = 0,
    loaded = 1,
    error = 2,
    errorLoaded = 3,
}

member error

error = 2

An error has been encountered while loading the image.

member errorLoaded

errorLoaded = 3

Deprecated at v1.3.6, to replace the src in case of errors, use onLoadingStateChange instead and rerender the Image with a difference src.
Deprecated
Use onLoadingStateChange instead and rerender the Image with a difference src.

member loaded

loaded = 1

The image has been loaded successfully.

member notLoaded

notLoaded = 0

The image has not yet been loaded, and there is no error yet.

enum KeyboardSpinDirection

enum KeyboardSpinDirection {
    down = -1,
    notSpinning = 0,
    up = 1,
}

member down

down = -1

member notSpinning

notSpinning = 0

member up

up = 1

enum MessageBarType

enum MessageBarType {
    info = 0,
    error = 1,
    blocked = 2,
    severeWarning = 3,
    success = 4,
    warning = 5,
}

member blocked

blocked = 2

Blocked styled MessageBar

member error

error = 1

Error styled MessageBar

member info

info = 0

Info styled MessageBar

member severeWarning

severeWarning = 3

SevereWarning styled MessageBar

member success

success = 4

Success styled MessageBar

member warning

warning = 5

Warning styled MessageBar

enum OpenCardMode

enum OpenCardMode {
    hover = 0,
    hotKey = 1,
}

member hotKey

hotKey = 1

Open card by hot key

member hover

hover = 0

Open card by hover

enum OverflowButtonType

enum OverflowButtonType {
    none = 0,
    descriptive = 1,
    more = 2,
    downArrow = 3,
}

member descriptive

descriptive = 1

+1 overflow icon

member downArrow

downArrow = 3

Chevron overflow icon

member more

more = 2

More overflow icon

member none

none = 0

No overflow

enum PanelType

enum PanelType {
    smallFluid = 0,
    smallFixedFar = 1,
    smallFixedNear = 2,
    medium = 3,
    large = 4,
    largeFixed = 5,
    extraLarge = 6,
    custom = 7,
    customNear = 8,
}

member custom

custom = 7

Renders the Panel in custom size using customWidth, anchored to the far side (right in LTR mode). - Has a fixed width provided by the customWidth prop - When screen width reaches the customWidth value it will behave like a fluid width Panel taking up 100% of the viewport width

member customNear

customNear = 8

Renders the Panel in custom size using customWidth, anchored to the near side (left in LTR mode). - Has a fixed width provided by the customWidth prop - When screen width reaches the customWidth value it will behave like a fluid width Panel taking up 100% of the viewport width

member extraLarge

extraLarge = 6

Renders the Panel in extra large size, anchored to the far side (right in LTR mode). - Small (320-479): adapts to PanelType.smallFluid at this breakpoint - Medium (480-639): adapts to PanelType.smallFixedFar at this breakpoint - Large (640-1023): adapts to PanelType.medium at this breakpoint - XLarge (1024-1365): adapts to PanelType.large at this breakpoint - XXLarge (1366-1919): 176px fixed left margin, fluid width, 40px left/right padding - XXXLarge (1920-up): 176px fixed left margin, fluid width, 40px left/right padding

member large

large = 4

Renders the Panel in large size, anchored to the far side (right in LTR mode). - Small (320-479): adapts to PanelType.smallFluid at this breakpoint - Medium (480-639): adapts to PanelType.smallFixedFar at this breakpoint - Large (640-1023): adapts to PanelType.medium at this breakpoint - XLarge (1024-1365): 48px fixed left margin, fluid width, 32px left/right padding - XXLarge (1366-up): 428px fixed left margin, fluid width, 40px left/right padding

member largeFixed

largeFixed = 5

Renders the Panel in large size, anchored to the far side (right in LTR mode), with a fixed width at XX-Large breakpoint. - Small (320-479): adapts to PanelType.smallFluid at this breakpoint - Medium (480-639): adapts to PanelType.smallFixedFar at this breakpoint - Large (640-1023): adapts to PanelType.medium at this breakpoint - XLarge (1024-1365): 48px fixed left margin, fluid width, 32px left/right padding - XXLarge (1366-up): 940px width, 40px left/right padding

member medium

medium = 3

Renders the Panel in medium size, anchored to the far side (right in LTR mode). - Small (320-479): adapts to PanelType.smallFluid at this breakpoint - Medium (480-639): adapts to PanelType.smallFixedFar at this breakpoint - Large (640-1023): 592px width, 32px left/right padding - XLarge (1024-1365): 644px width, 32px left/right padding - XXLarge (1366-up): 644px width, 40px left/right padding

member smallFixedFar

smallFixedFar = 1

Renders the Panel in fixed-width small size, anchored to the far side (right in LTR mode). - Small (320-479): adapts to PanelType.smallFluid at this breakpoint - Medium (480-639): 340px width, 16px left/right padding - Large (640-1023): 340px width, 32px left/right padding - XLarge (1024-1365): 340px width, 32px left/right padding - XXLarge (1366-up): 340px width, 40px left/right padding

member smallFixedNear

smallFixedNear = 2

Renders the Panel in fixed-width small size, anchored to the near side (left in LTR mode). - Small (320-479): 272px width, 16px left/right padding - Medium (480-639): 272px width, 16px left/right padding - Large (640-1023): 272px width, 32px left/right padding - XLarge (1024-1365): 272px width, 32px left/right padding - XXLarge (1366-up): 272px width, 40px left/right padding

member smallFluid

smallFluid = 0

Renders the Panel with a fluid (full screen) width. Recommended for use on small screen breakpoints. - Small (320-479): full screen width, 16px left/right padding - Medium (480-639): full screen width, 16px left/right padding - Large (640-1023): full screen width, 32px left/right padding - XLarge (1024-1365): full screen width, 32px left/right padding - XXLarge (1366-up): full screen width, 40px left/right padding

enum PersonaInitialsColor

enum PersonaInitialsColor {
    lightBlue = 0,
    blue = 1,
    darkBlue = 2,
    teal = 3,
    lightGreen = 4,
    green = 5,
    darkGreen = 6,
    lightPink = 7,
    pink = 8,
    magenta = 9,
    purple = 10,
    black = 11,
    orange = 12,
    red = 13,
    darkRed = 14,
    transparent = 15,
    violet = 16,
    lightRed = 17,
    gold = 18,
    burgundy = 19,
    warmGray = 20,
    coolGray = 21,
    gray = 22,
    cyan = 23,
    rust = 24,
}

member black

black = 11

Black can result in offensive persona coins with some initials combinations, so it can only be set with overrides.
Deprecated
will be removed in a future major release.

member blue

blue = 1

member burgundy

burgundy = 19

member coolGray

coolGray = 21

member cyan

cyan = 23

member darkBlue

darkBlue = 2

member darkGreen

darkGreen = 6

member darkRed

darkRed = 14

member gold

gold = 18

member gray

gray = 22

Gray can result in offensive persona coins with some initials combinations, so it can only be set with overrides.

member green

green = 5

member lightBlue

lightBlue = 0

member lightGreen

lightGreen = 4

member lightPink

lightPink = 7

member lightRed

lightRed = 17

member magenta

magenta = 9

member orange

orange = 12

member pink

pink = 8

member purple

purple = 10

member red

red = 13

Red often has a special meaning, so it is considered a reserved color and can only be set with overrides.
Deprecated
will be removed in a future major release.

member rust

rust = 24

member teal

teal = 3

member transparent

transparent = 15

Transparent is not intended to be used with typical initials due to accessibility issues. Its primary use is for overflow buttons, so it is considered a reserved color and can only be set with overrides.

member violet

violet = 16

member warmGray

warmGray = 20

enum PersonaPresence

enum PersonaPresence {
    none = 0,
    offline = 1,
    online = 2,
    away = 3,
    dnd = 4,
    blocked = 5,
    busy = 6,
}

member away

away = 3

member blocked

blocked = 5

member busy

busy = 6

member dnd

dnd = 4

member none

none = 0

member offline

offline = 1

member online

online = 2

enum PersonaSize

enum PersonaSize {
    tiny = 0,
    extraExtraSmall = 1,
    extraSmall = 2,
    small = 3,
    regular = 4,
    large = 5,
    extraLarge = 6,
    size8 = 17,
    size10 = 9,
    size16 = 8,
    size24 = 10,
    size28 = 7,
    size32 = 11,
    size40 = 12,
    size48 = 13,
    size56 = 16,
    size72 = 14,
    size100 = 15,
    size120 = 18,
}

member extraExtraSmall

extraExtraSmall = 1

extraExtraSmall size has been deprecated in favor of standardized numeric sizing. Use size24 instead.
Deprecated
Use size24 instead.

member extraLarge

extraLarge = 6

extraLarge size has been deprecated in favor of standardized numeric sizing. Use size100 instead.
Deprecated
Use size100 instead.

member extraSmall

extraSmall = 2

extraSmall size has been deprecated in favor of standardized numeric sizing. Use size32 instead.
Deprecated
Use size32 instead.

member large

large = 5

large size has been deprecated in favor of standardized numeric sizing. Use size72 instead.
Deprecated
Use size72 instead.

member regular

regular = 4

regular size has been deprecated in favor of standardized numeric sizing. Use size48 instead.
Deprecated
Use size48 instead.

member size10

size10 = 9

No PersonaCoin is rendered. Deprecated in favor of size8 to align with design specifications.
Deprecated
Use size8 instead. Will be removed in a future major release.

member size100

size100 = 15

Renders a 100px PersonaCoin.

member size120

size120 = 18

Renders a 120px PersonaCoin.

member size16

size16 = 8

Renders a 16px PersonaCoin. Deprecated due to not being in the design specification.
Deprecated
Will be removed in a future major release.

member size24

size24 = 10

Renders a 24px PersonaCoin.

member size28

size28 = 7

Renders a 28px PersonaCoin. Deprecated due to not being in the design specification.
Deprecated
Will be removed in a future major release.

member size32

size32 = 11

Renders a 32px PersonaCoin.

member size40

size40 = 12

Renders a 40px PersonaCoin.

member size48

size48 = 13

Renders a 48px PersonaCoin.

member size56

size56 = 16

Renders a 56px PersonaCoin.

member size72

size72 = 14

Renders a 72px PersonaCoin.

member size8

size8 = 17

No PersonaCoin is rendered.

member small

small = 3

small size has been deprecated in favor of standardized numeric sizing. Use size40 instead.
Deprecated
Use size40 instead.

member tiny

tiny = 0

tiny size has been deprecated in favor of standardized numeric sizing. Use size8 instead.
Deprecated
Use size8 instead.

enum PivotLinkFormat

enum PivotLinkFormat {
    links = 0,
    tabs = 1,
}

member links

links = 0

Display Pivot Links as links

member tabs

tabs = 1

Display Pivot Links as Tabs

enum PivotLinkSize

enum PivotLinkSize {
    normal = 0,
    large = 1,
}

member large

large = 1

Display links using large font size

member normal

normal = 0

Display Link using normal font size

enum Position

enum Position {
    top = 0,
    bottom = 1,
    start = 2,
    end = 3,
}

member bottom

bottom = 1

member end

end = 3

member start

start = 2

member top

top = 0

enum RatingSize

enum RatingSize {
    Small = 0,
    Large = 1,
}

member Large

Large = 1

member Small

Small = 0

enum RectangleEdge

enum RectangleEdge {
    top = 1,
    bottom = -1,
    left = 2,
    right = -2,
}

member bottom

bottom = -1

member left

left = 2

member right

right = -2

member top

top = 1

enum ResizeGroupDirection

enum ResizeGroupDirection {
    horizontal = 0,
    vertical = 1,
}

member horizontal

horizontal = 0

member vertical

vertical = 1

enum ResponsiveMode

enum ResponsiveMode {
    small = 0,
    medium = 1,
    large = 2,
    xLarge = 3,
    xxLarge = 4,
    xxxLarge = 5,
    unknown = 999,
}

member large

large = 2

member medium

medium = 1

member small

small = 0

member unknown

unknown = 999

member xLarge

xLarge = 3

member xxLarge

xxLarge = 4

member xxxLarge

xxxLarge = 5

enum SelectableOptionMenuItemType

enum SelectableOptionMenuItemType {
    Normal = 0,
    Divider = 1,
    Header = 2,
}

member Divider

Divider = 1

Header = 2

member Normal

Normal = 0

enum SelectAllVisibility

enum SelectAllVisibility {
    none = 0,
    hidden = 1,
    visible = 2,
}

member hidden

hidden = 1

member none

none = 0

member visible

visible = 2

enum SemanticColorSlots

enum SemanticColorSlots {
    bodyBackground = 0,
    bodyText = 1,
    disabledBackground = 2,
    disabledText = 3,
}

member bodyBackground

bodyBackground = 0

member bodyText

bodyText = 1

member disabledBackground

disabledBackground = 2

member disabledText

disabledText = 3

enum Shade

enum Shade {
    Unshaded = 0,
    Shade1 = 1,
    Shade2 = 2,
    Shade3 = 3,
    Shade4 = 4,
    Shade5 = 5,
    Shade6 = 6,
    Shade7 = 7,
    Shade8 = 8,
}

Shades of a given color, from softest to strongest.

member Shade1

Shade1 = 1

member Shade2

Shade2 = 2

member Shade3

Shade3 = 3

member Shade4

Shade4 = 4

member Shade5

Shade5 = 5

member Shade6

Shade6 = 6

member Shade7

Shade7 = 7

member Shade8

Shade8 = 8

member Unshaded

Unshaded = 0

enum ShimmerElementsDefaultHeights

enum ShimmerElementsDefaultHeights {
    line = 16,
    gap = 16,
    circle = 24,
}

Describes the default heights for shimmer elements when omitted in implementation.

member circle

circle = 24

Default height of the circle element when not provided by user: 24px

member gap

gap = 16

Default height of the gap element when not provided by user: 16px

member line

line = 16

Default height of the line element when not provided by user: 16px

enum ShimmerElementType

enum ShimmerElementType {
    line = 1,
    circle = 2,
    gap = 3,
}

Describes the possible types for shimmer elements used.

member circle

circle = 2

Circle element type

member gap

gap = 3

Gap element type

member line

line = 1

Line element type

enum SpinnerSize

enum SpinnerSize {
    xSmall = 0,
    small = 1,
    medium = 2,
    large = 3,
}

Possible variations of the spinner circle size.

member large

large = 3

28px Spinner diameter

member medium

medium = 2

20px Spinner diameter

member small

small = 1

16px Spinner diameter

member xSmall

xSmall = 0

12px Spinner diameter

enum SpinnerType

enum SpinnerType {
    normal = 0,
    large = 1,
}

Deprecated at v2.0.0, use SpinnerSize instead.
Deprecated
Use SpinnerSize instead.

member large

large = 1

Deprecated and will be removed at >= 2.0.0. Use SpinnerSize.large instead.
Deprecated
Use SpinnerSize.large instead.

member normal

normal = 0

Deprecated and will be removed at >= 2.0.0. Use SpinnerSize.medium instead.
Deprecated
Use SpinnerSize.medium instead.

enum StickyPositionType

enum StickyPositionType {
    Both = 0,
    Header = 1,
    Footer = 2,
}

member Both

Both = 0

Footer = 2

Header = 1

enum SuggestionActionType

enum SuggestionActionType {
    none = 0,
    forceResolve = 1,
    searchMore = 2,
}

Enum to help identify which suggestions action button is selected.

member forceResolve

forceResolve = 1

ForceResolve action is selected.

member none

none = 0

None of the actions is selected.

member searchMore

searchMore = 2

SearchMore action is selected.

enum SuggestionItemType

enum SuggestionItemType {
    header = 0,
    suggestion = 1,
    footer = 2,
}

footer = 2

header = 0

member suggestion

suggestion = 1

enum TooltipDelay

enum TooltipDelay {
    zero = 0,
    medium = 1,
    long = 2,
}

member long

long = 2

500 ms delay before showing the tooltip

member medium

medium = 1

300 ms delay before showng the tooltip

member zero

zero = 0

enum TooltipOverflowMode

enum TooltipOverflowMode {
    Parent = 0,
    Self = 1,
}

member Parent

Parent = 0

Only show tooltip if parent DOM element is overflowing

member Self

Self = 1

Only show tooltip if tooltip host's content is overflowing. Note that this does not check the children for overflow, only the TooltipHost root.

enum ValidationState

enum ValidationState {
    valid = 0,
    warning = 1,
    invalid = 2,
}

Validation state of the user's input.

member invalid

invalid = 2

User input is invalid.

member valid

valid = 0

User input is valid.

member warning

warning = 1

User input could be valid or invalid, its state is not known yet.

Type Aliases

type Alignment

type Alignment =
    | 'start'
    | 'end'
    | 'center'
    | 'space-between'
    | 'space-around'
    | 'space-evenly'
    | 'baseline'
    | 'stretch';

Defines a type made by the union of the different values that the align-items and justify-content flexbox properties can take.

type DefaultProps

type DefaultProps = Required<
    Pick<
        ISpinButtonProps,
        | 'step'
        | 'min'
        | 'max'
        | 'disabled'
        | 'labelPosition'
        | 'label'
        | 'incrementButtonIcon'
        | 'decrementButtonIcon'
    >
>;

type DirectionalHint

type DirectionalHint = typeof DirectionalHint[keyof typeof DirectionalHint];

type IAnnouncedStyleProps

type IAnnouncedStyleProps = Pick<IAnnouncedProps, 'className'>;

type IBaseFloatingPickerSuggestionProps

type IBaseFloatingPickerSuggestionProps = Pick<
    ISuggestionsControlProps<any>,
    | 'shouldSelectFirstItem'
    | 'headerItemsProps'
    | 'footerItemsProps'
    | 'showRemoveButtons'
>;

Props which are passed on to the inner Suggestions component

type IBasePickerStyleProps

type IBasePickerStyleProps = Pick<
    IBasePickerProps<any>,
    'theme' | 'className' | 'disabled'
> & {
    /** Whether text style area is focused */
    isFocused?: boolean;
    /** Optional pickerInput className */
    inputClassName?: string;
};

The props needed to construct styles.

type IBreadCrumbData

type IBreadCrumbData = IBreadcrumbData;

Deprecated
Use IBreadcrumbData

type ICheckStyleProps

type ICheckStyleProps = Required<Pick<ICheckProps, 'theme'>> &
    Pick<ICheckProps, 'className' | 'checked'> & {
        /**
         * Custom height/width for the checkbox.
         * @defaultvalue '18px'
         */
        height?: string;
        /**
         * Custom height/width for the checkbox.
         * @defaultvalue '18px'
         * @deprecated Use `height`
         */
        checkBoxHeight?: string;
    };

type ICoachmarkTypes

type ICoachmarkTypes = ICoachmarkProps;

Deprecated
No longer used.

type IColorPickerStyleProps

type IColorPickerStyleProps = Required<Pick<IColorPickerProps, 'theme'>> &
    Pick<IColorPickerProps, 'className' | 'alphaType'>;

type IColorSliderStyleProps

type IColorSliderStyleProps = Required<Pick<IColorSliderProps, 'theme'>> &
    Pick<IColorSliderProps, 'className' | 'type'> & {
        /**
         * @deprecated Use `type`
         */
        isAlpha?: boolean;
    };

type IDetailsColumnStyleProps

type IDetailsColumnStyleProps = Required<
    Pick<IDetailsColumnProps, 'theme' | 'cellStyleProps'>
> & {
    /**
     * Classname to provide for header region.
     */
    headerClassName?: string;
    /**
     * Whether or not the column is actionable.
     */
    isActionable?: boolean;
    /**
     * Whether or not the column contains contents.
     */
    isEmpty?: boolean;
    /**
     * Whether or not the column has a visible icon.
     */
    isIconVisible?: boolean;
    /**
     * Whether or not the column is padded.
     */
    isPadded?: boolean;
    /**
     * Whether or not the column has icon only content/
     */
    isIconOnly?: boolean;
    /**
     * Classname to provide for the header's icon region.
     */
    iconClassName?: string;
    /**
     * CSS transition duration on drag event.
     */
    transitionDurationDrag?: number;
    /**
     * CSS transition duration on drop event.
     */
    transitionDurationDrop?: number;
};

type IDetailsHeaderStyleProps

type IDetailsHeaderStyleProps = Required<Pick<IDetailsHeaderProps, 'theme'>> &
    Pick<IDetailsHeaderProps, 'className'> & {
        /** Whether to hide select all checkbox */
        isSelectAllHidden?: boolean;
        /** Whether the "select all" checkbox is checked */
        isAllSelected?: boolean;
        /** Is column being resized */
        isResizingColumn?: boolean;
        /** Are all columns collapsed */
        isAllCollapsed?: boolean;
        /** Whether the header is sizing */
        isSizing?: boolean;
        /** Whether checkbox is hidden  */
        isCheckboxHidden?: boolean;
        cellStyleProps?: ICellStyleProps;
    };

type IDetailsListStyleProps

type IDetailsListStyleProps = Required<Pick<IDetailsListProps, 'theme'>> &
    Pick<IDetailsListProps, 'className'> & {
        /** Whether the list is horizontally constrained */
        isHorizontalConstrained?: boolean;
        /** Whether the list is in compact mode */
        compact?: boolean;
        /** Whether the list is fixed in size */
        isFixed?: boolean;
    };

type IDetailsRowCheckStyleProps

type IDetailsRowCheckStyleProps = Required<Pick<IDetailsRowCheckProps, 'theme'>> &
    Pick<
        IDetailsRowCheckProps,
        | 'compact'
        | 'isHeader'
        | 'selected'
        | 'anySelected'
        | 'canSelect'
        | 'className'
    > & {
        /** Is checkbox visible */
        isVisible?: boolean;
    };

type IDetailsRowStyleProps

type IDetailsRowStyleProps = Required<Pick<IDetailsRowProps, 'theme'>> &
    Pick<IDetailsRowProps, 'disabled'> & {
        /** Whether the row is selected  */
        isSelected?: boolean;
        /** Whether there are any rows in the list selected */
        anySelected?: boolean;
        /** Whether this row can be selected */
        canSelect?: boolean;
        /** Class name of when this becomes a drop target. */
        droppingClassName?: string;
        /** Is the checkbox visible */
        isCheckVisible?: boolean;
        /** Is this a row header */
        isRowHeader?: boolean;
        /** A class name from the checkbox cell, so proper styling can be targeted */
        checkboxCellClassName?: string;
        /** CSS class name for the component */
        className?: string;
        /** Is list in compact mode */
        compact?: boolean;
        cellStyleProps?: ICellStyleProps;
        /** Whether to animate updates */
        enableUpdateAnimations?: boolean;
    };

type IDropdownStyleProps

type IDropdownStyleProps = Pick<
    IDropdownProps,
    'theme' | 'className' | 'disabled' | 'required'
> & {
    /**
     * Whether the dropdown is in an error state.
     */
    hasError: boolean;
    /**
     * Specifies if the dropdown has label content.
     */
    hasLabel: boolean;
    /**
     * Whether the dropdown is in an opened state.
     */
    isOpen: boolean;
    /**
     * Whether the dropdown is currently rendering placeholder text instead of a selected option.
     */
    isRenderingPlaceholder: boolean;
    /**
     * Custom className for the panel that displays in small viewports, hosting the Dropdown options.
     * This is primarily provided for backwards compatibility.
     */
    panelClassName?: string;
    /**
     * Custom className for the callout that displays in larger viewports, hosting the Dropdown options.
     * This is primarily provided for backwards compatibility.
     */
    calloutClassName?: string;
    /**
     * Which edge the dropdown callout was positioned on relative to the title.
     */
    calloutRenderEdge?: RectangleEdge;
};

The props needed to construct styles. This represents the simplified set of immutable things which control the class names.

type IGroupedListStyleProps

type IGroupedListStyleProps = Required<Pick<IGroupedListProps, 'theme'>> &
    Pick<IGroupedListProps, 'className'> & {
        /** whether or not the group is collapsed */
        isCollapsed?: boolean;
        /** Whether the group is in compact mode or not */
        compact?: boolean;
    };

type IGroupFooterStyleProps

type IGroupFooterStyleProps = Required<Pick<IGroupFooterProps, 'theme'>> &
    Pick<IGroupFooterProps, 'selected' | 'className'> & {
        /** Whether the footer is collapsed */
        isCollapsed?: boolean;
    };

type IGroupHeaderStyleProps

type IGroupHeaderStyleProps = Required<Pick<IGroupHeaderProps, 'theme'>> &
    Pick<IGroupHeaderProps, 'selected' | 'className'> & {
        /** Is Header collapsed */
        isCollapsed?: boolean;
        /** Whether the group header is in compact mode or not */
        compact?: boolean;
    };

type IGroupShowAllStyleProps

type IGroupShowAllStyleProps = Required<Pick<IGroupShowAllProps, 'theme'>>;

type IGroupSpacerStyleProps

type IGroupSpacerStyleProps = Required<Pick<IGroupSpacerProps, 'theme'>> & {
    width?: number;
};

Deprecated
unused, to be removed in 7.0. Use IGroupSpacerProps.indentWidth

type ILayerBaseState

type ILayerBaseState = {
    hostId?: string;
    layerElement?: HTMLElement;
};

type IModalStyleProps

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

type IOverflowSetStyleProps

type IOverflowSetStyleProps = Pick<IOverflowSetProps, 'vertical' | 'className'>;

The props needed to construct styles. This represents the simplified set of immutable things which control the class names.

type IOverrideColumnRenderProps

type IOverrideColumnRenderProps = Pick<
    IDetailsListProps,
    'onRenderItemColumn' | 'getCellValueKey'
> &
    Pick<IDetailsRowProps, 'cellsByColumn'>;

Extended column render props.

type IPeoplePickerItemSelectedStyleProps

type IPeoplePickerItemSelectedStyleProps = Required<
    Pick<IPeoplePickerItemSelectedProps, 'theme'>
> &
    Pick<IPeoplePickerItemSelectedProps, 'className' | 'selected' | 'disabled'> & {
        /** Whether it's invalid. */
        invalid?: boolean;
    };

Props needed to construct PeoplePickerItemSelected styles.

type IPeoplePickerItemSuggestionStyleProps

type IPeoplePickerItemSuggestionStyleProps = Required<
    Pick<IPeoplePickerItemSuggestionProps, 'theme'>
> &
    Pick<IPeoplePickerItemSuggestionProps, 'className'> & {};

Props needed to construct PeoplePickerItemSuggestion styles.

type IPersonaPresenceStyleProps

type IPersonaPresenceStyleProps = Required<Pick<IPersonaSharedProps, 'theme'>> &
    Pick<
        IPersonaSharedProps,
        'presence' | 'isOutOfOffice' | 'size' | 'presenceColors'
    > &
    Pick<IPersonaProps, 'className'>;

type IPickerAriaIds

type IPickerAriaIds = {
    /**
     * Aria id for selected suggestion alert component
     */
    selectedSuggestionAlert: string;
    /**
     * Aria id for selected items container component
     */
    selectedItems: string;
    /**
     * Aria id for suggestions list component
     */
    suggestionList: string;
    /**
     * Aria id for the component that has role=combobox
     */
    combobox: string;
};

Aria id's for internal picker components

type IPivotStyleProps

type IPivotStyleProps = Required<Pick<IPivotProps, 'theme'>> &
    Pick<IPivotProps, 'className'> & {
        /** Indicates whether Pivot has large format. */
        rootIsLarge?: boolean;
        /** Indicates whether Pivot has tabbed format. */
        rootIsTabs?: boolean;
        /**
         * Indicates whether Pivot link is selected.
         * @deprecated Is not populated with valid value. Specify `linkIsSelected` styling instead.
         */
        linkIsSelected?: boolean;
    };

type IPositioningContainerTypes

type IPositioningContainerTypes = IPositioningContainerProps;

Deprecated
Use IPositioningContainerProps

type ISeparatorStyleProps

type ISeparatorStyleProps = Required<Pick<ISeparatorProps, 'theme'>> &
    Pick<ISeparatorProps, 'className' | 'alignContent' | 'vertical'>;

type IShimmerCircleStyleProps

type IShimmerCircleStyleProps = {
    /**
     * Theme values passed to the component.
     */
    theme: ITheme;
    /**
     * Needed to provide a height to the root of the control.
     */
    height?: number;
    /**
     * Styles to override borderStyles with custom ones.
     * @deprecated in favor of mergeStyles API.
     */
    borderStyle?: IRawStyle;
};

Props needed to construct styles.

type IShimmeredDetailsListStyleProps

type IShimmeredDetailsListStyleProps = Required<
    Pick<IShimmeredDetailsListProps, 'theme'>
>;

Defines props needed to construct styles. This represents the simplified set of immutable things which control the class names.

type IShimmerGapStyleProps

type IShimmerGapStyleProps = {
    /**
     * Theme values passed to the component.
     */
    theme: ITheme;
    /**
     * Needed to provide a height to the root of the control.
     */
    height?: number;
    /**
     * Styles to override borderStyles with custom ones.
     * @deprecated in favor of mergeStyles API.
     */
    borderStyle?: IRawStyle;
};

Props needed to construct styles.

type IShimmerLineStyleProps

type IShimmerLineStyleProps = {
    /**
     * Theme values passed to the component.
     */
    theme: ITheme;
    /**
     * Needed to provide a height to the root of the control.
     */
    height?: number;
    /**
     * Styles to override borderStyles with custom ones.
     * @deprecated in favor of mergeStyles API.
     */
    borderStyle?: IRawStyle;
};

Props needed to construct styles.

type ISliderStyleProps

type ISliderStyleProps = Required<Pick<ISliderProps, 'theme'>> &
    Pick<ISliderProps, 'className' | 'disabled' | 'vertical' | 'ranged'> & {
        showTransitions?: boolean;
        showValue?: boolean;
        titleLabelClassName?: string;
    };

type IStackComponent

type IStackComponent = IComponent<IStackProps, IStackTokens, IStackStyles>;

type IStackItemComponent

type IStackItemComponent = IComponent<
    IStackItemProps,
    IStackItemTokens,
    IStackItemStyles
>;

type IStackItemSlot

type IStackItemSlot = ISlotProp<IStackItemProps>;

type IStackItemStyles

type IStackItemStyles = IComponentStyles<IStackItemSlots>;

type IStackItemStylesReturnType

type IStackItemStylesReturnType = ReturnType<
    Extract<IStackItemComponent['styles'], Function>
>;

type IStackItemTokenReturnType

type IStackItemTokenReturnType = ReturnType<
    Extract<IStackItemComponent['tokens'], Function>
>;

type IStackSlot

type IStackSlot = ISlotProp<IStackProps>;

type IStackStyles

type IStackStyles = IComponentStyles<IStackSlots>;

type IStackStylesReturnType

type IStackStylesReturnType = ReturnType<
    Extract<IStackComponent['styles'], Function>
>;

type IStackTokenReturnType

type IStackTokenReturnType = ReturnType<
    Extract<IStackComponent['tokens'], Function>
>;

type ISuggestionsItemStyleProps

type ISuggestionsItemStyleProps = Required<
    Pick<ISuggestionItemProps<any>, 'theme'>
> &
    Pick<ISuggestionItemProps<any>, 'className'> & {
        /** Whether the suggestion item is selected or not. */
        suggested?: boolean;
    };

The props needed to construct SuggestionItem styles.

type ISuggestionsStyleProps

type ISuggestionsStyleProps = Required<Pick<ISuggestionsProps<any>, 'theme'>> &
    Pick<ISuggestionsProps<any>, 'className' | 'suggestionsClassName'> & {
        /** Whether the forceResolve actionButton is selected. */
        forceResolveButtonSelected?: boolean;
        /** Whether the searchForMore actionButton is selected. */
        searchForMoreButtonSelected?: boolean;
    };

The props needed to construct Suggestions styles.

type ITagItemStyleProps

type ITagItemStyleProps = Required<Pick<ITagItemProps, 'theme'>> &
    Pick<ITagItemProps, 'className' | 'selected' | 'disabled'> & {};

The props needed to construct TagItem styles.

type ITagItemSuggestionStyleProps

type ITagItemSuggestionStyleProps = Required<
    Pick<ITagItemSuggestionProps, 'theme'>
> &
    Pick<ITagItemSuggestionProps, 'className'> & {};

The props needed to construct TagItemSuggestion styles.

type ITeachingBubbleStyleProps

type ITeachingBubbleStyleProps = Required<Pick<ITeachingBubbleProps, 'theme'>> &
    Pick<
        ITeachingBubbleProps,
        'hasCondensedHeadline' | 'hasSmallHeadline' | 'isWide'
    > & {
        /** Style props for callout. */
        calloutProps?: ICalloutContentStyleProps;
        /** Class name for primary button. */
        primaryButtonClassName?: string;
        /** Class name for secondary button. */
        secondaryButtonClassName?: string;
        /** If the close button is visible. */
        hasCloseButton?: boolean;
        /** If a headline has been specified. */
        hasHeadline?: boolean;
    };

type ITextComponent

type ITextComponent = IComponent<ITextProps, ITextTokens, ITextStyles>;

type ITextFieldStyleProps

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

type ITextSlot

type ITextSlot = ISlotProp<ITextProps, string>;

type ITextStyles

type ITextStyles = IComponentStyles<ITextSlots>;

type ITextStylesReturnType

type ITextStylesReturnType = ReturnType<Extract<ITextComponent['styles'], Function>>;

type ITextTokenReturnType

type ITextTokenReturnType = ReturnType<Extract<ITextComponent['tokens'], Function>>;

type IVerticalDividerPropsStyles

type IVerticalDividerPropsStyles = Pick<
    IVerticalDividerProps,
    'theme' | 'getClassNames' | 'className'
>;

Props that will get passed to the styling function to style the Vertical Divider

type KeytipDataOptions

type KeytipDataOptions = IKeytipDataProps;

type KeytipTransitionModifier

type KeytipTransitionModifier =
    | typeof KeyCodes.shift
    | typeof KeyCodes.ctrl
    | typeof KeyCodes.alt
    | typeof KeyCodes.leftWindow;

type OnChangeCallback

type OnChangeCallback = IChoiceGroupOptionProps['onChange'];

Deprecated
Use IChoiceGroupOptionProps['onChange'] directly

type OnFocusCallback

type OnFocusCallback = IChoiceGroupOptionProps['onFocus'];

Deprecated
Use IChoiceGroupOptionProps['onFocus'] directly

type PivotLinkFormatType

type PivotLinkFormatType = 'links' | 'tabs';

Display mode for the pivot links/tabs

type PivotLinkSizeType

type PivotLinkSizeType = 'normal' | 'large';

Size of the pivot links/tabs

type ScrollbarVisibility

type ScrollbarVisibility =
    typeof ScrollbarVisibility[keyof typeof ScrollbarVisibility];

type ScrollToMode

type ScrollToMode = typeof ScrollToMode[keyof typeof ScrollToMode];

type SpinnerLabelPosition

type SpinnerLabelPosition = 'top' | 'right' | 'bottom' | 'left';

Possible locations of the label in regards to the spinner

type SuggestionsStoreOptions

type SuggestionsStoreOptions<T> = {
    getAriaLabel?: (item: T) => string;
};

Namespaces

namespace KeytipEvents

namespace KeytipEvents {}

variable ENTER_KEYTIP_MODE

const ENTER_KEYTIP_MODE: string;

variable EXIT_KEYTIP_MODE

const EXIT_KEYTIP_MODE: string;

variable KEYTIP_ADDED

const KEYTIP_ADDED: string;

variable KEYTIP_REMOVED

const KEYTIP_REMOVED: string;

variable KEYTIP_UPDATED

const KEYTIP_UPDATED: string;

variable PERSISTED_KEYTIP_ADDED

const PERSISTED_KEYTIP_ADDED: string;

variable PERSISTED_KEYTIP_EXECUTE

const PERSISTED_KEYTIP_EXECUTE: string;

variable PERSISTED_KEYTIP_REMOVED

const PERSISTED_KEYTIP_REMOVED: string;

namespace personaPresenceSize

namespace personaPresenceSize {}

variable border

const border: string;

Deprecated
This is now unused

variable size12

const size12: string;

variable size16

const size16: string;

variable size20

const size20: string;

variable size28

const size28: string;

variable size32

const size32: string;

variable size6

const size6: string;

variable size8

const size8: string;

namespace personaSize

namespace personaSize {}

variable size10

const size10: string;

variable size100

const size100: string;

variable size120

const size120: string;

variable size16

const size16: string;

variable size24

const size24: string;

variable size28

const size28: string;

variable size32

const size32: string;

variable size40

const size40: string;

variable size48

const size48: string;

variable size56

const size56: string;

variable size72

const size72: string;

variable size8

const size8: string;

Package Files (395)

Dependencies (15)

Peer Dependencies (4)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/office-ui-fabric-react.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/office-ui-fabric-react)

HTML

<a href="https://www.jsdocs.io/package/office-ui-fabric-react"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 2 years ago.
Package analyzed in 43177 ms.
Missing or incorrect documentation? Open an issue for this package.

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