office-ui-fabric-react package

Classes

ActionButton
ActivityItem
AnnouncedBase
Autofill
BaseAutoFill
BaseButton
BaseExtendedPeoplePicker
BaseExtendedPicker
BaseFloatingPeoplePicker
BaseFloatingPicker
BasePeoplePicker
BasePeopleSelectedItemsList
BasePicker
BasePickerListBelow
BaseSelectedItemsList
BreadcrumbBase
Button

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

ButtonGridCell
Calendar
Callout
CheckboxBase
ChoiceGroupBase
CoachmarkBase
ColorPickerBase
ColorPickerGridCellBase
ComboBox
CommandBarBase
CommandBarButton
CompactPeoplePickerBase

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

CompoundButton
ContextualMenuBase
ContextualMenuItemBase
DatePickerBase
DefaultButton
DetailsColumnBase

Component for rendering columns in a DetailsList.

DetailsHeaderBase
DetailsListBase
DetailsRowBase
DialogBase
DialogContentBase
DialogFooterBase
DragDropHelper
DropdownBase
ExpandingCardBase
ExtendedPeoplePicker
ExtendedSelectedItem
FabricBase
FacepileBase

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

FloatingPeoplePicker
FocusTrapZone
GroupedListBase
GroupedListSection
HoverCardBase
IconBase
IconButton
ImageBase
Keytip

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

KeytipLayerBase

A layer that holds all keytip items

KeytipManager

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

LabelBase
LayerBase
LayerHost
LinkBase
List

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.

ListPeoplePickerBase

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

MaskedTextField
MemberListPeoplePicker
MessageBarBase
MessageBarButton
ModalBase
NavBase
NormalPeoplePickerBase

Standard People Picker.

OverflowSetBase
OverlayBase
PersonaBase

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

PersonaCoinBase

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

PivotBase

Usage:

PivotItem
PlainCardBase
Popup

This adds accessibility to Dialog and Panel controls

PositioningContainer
PrimaryButton
ProgressIndicatorBase

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

RatingBase
ResizeGroupBase
ScrollablePaneBase
SearchBoxBase
SelectedPeopleList

Standard People Picker.

SelectionZone
ShimmerBase
ShimmeredDetailsListBase
SliderBase
SpinButton
SpinnerBase
Sticky
Suggestions
SuggestionsControl

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

SuggestionsController
SuggestionsCore

Class when used with SuggestionsStore, renders a basic suggestions control

SuggestionsHeaderFooterItem
SuggestionsItem
SuggestionsStore
SwatchColorPickerBase
TagPickerBase
TeachingBubbleBase
TeachingBubbleContentBase
TextFieldBase
ThemeGenerator
ToggleBase
TooltipBase
TooltipHostBase
VirtualizedComboBox

Interfaces

IAccessiblePopupProps
IActivityItemProps
IActivityItemStyles
IAnnouncedProps
IAnnouncedStyles
IAutofill
IAutofillProps
IAutofillState
IBaseAutoFill

Deprecated, do not use.

IBaseAutoFillProps

Deprecated, do not use.

IBaseButtonProps
IBaseButtonState
IBaseExtendedPicker
IBaseExtendedPickerProps
IBaseExtendedPickerState
IBaseFloatingPicker
IBaseFloatingPickerProps
IBaseFloatingPickerState
IBasePicker

BasePicker component.

IBasePickerProps

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

IBasePickerState
IBasePickerStyles

Represents the stylable areas of the control.

IBasePickerSuggestionsProps

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

IBaseSelectedItemsList
IBaseSelectedItemsListProps
IBaseSelectedItemsListState
IBreadcrumb
IBreadcrumbData
IBreadcrumbItem
IBreadcrumbProps
IBreadcrumbStyleProps
IBreadcrumbStyles
IButton
IButtonGrid
IButtonGridCellProps
IButtonGridProps
IButtonGridStyleProps

Properties required to build the styles for the ButtonGrid component.

IButtonGridStyles

Styles for the ButtonGrid Component.

IButtonProps
IButtonStyles
ICalendar
ICalendarFormatDateCallbacks
ICalendarIconStrings
ICalendarProps
ICalendarState
ICalendarStrings
ICalloutBeakPositionedInfo
ICalloutContentStyleProps
ICalloutContentStyles
ICalloutPositionedInfo
ICalloutPositionProps
ICalloutProps
ICellStyleProps
ICheckbox

Checkbox class interface.

ICheckboxProps

Checkbox properties.

ICheckboxState
ICheckboxStyleProps
ICheckboxStyles
ICheckProps
ICheckStyles
IChoiceGroup
IChoiceGroupOption
IChoiceGroupOptionProps
IChoiceGroupOptionStyleProps

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

IChoiceGroupOptionStyles
IChoiceGroupProps
IChoiceGroupState
IChoiceGroupStyleProps
IChoiceGroupStyles
ICircle

Circle element interface

ICoachmark
ICoachmarkProps

Coachmark component props

ICoachmarkState
ICoachmarkStyleProps

The props needed to construct styles.

ICoachmarkStyles

Represents the stylable areas of the control.

IColor
IColorCellProps
IColorPicker
IColorPickerGridCellProps
IColorPickerGridCellStyleProps
IColorPickerGridCellStyles
IColorPickerProps
IColorPickerState
IColorPickerStrings
IColorPickerStyles
IColorRectangle
IColorRectangleProps
IColorRectangleStyleProps
IColorRectangleStyles
IColorSlider
IColorSliderProps
IColorSliderStyles
IColumn
IColumnDragDropDetails
IColumnReorderHeaderProps
IColumnReorderOptions
IColumnResizeDetails
IComboBox
IComboBoxClassNames
IComboBoxOption
IComboBoxOptionClassNames
IComboBoxOptionStyles
IComboBoxProps
IComboBoxState
IComboBoxStyles
ICommandBar
ICommandBarData
ICommandBarItemProps

ICommandBarItemProps extends IContextualMenuItem and adds a few CommandBar-specific props.

ICommandBarProps
ICommandBarStyleProps
ICommandBarStyles
IContextualMenu
IContextualMenuItem
IContextualMenuItemProps
IContextualMenuItemRenderFunctions
IContextualMenuItemRenderProps
IContextualMenuItemStyleProps
IContextualMenuItemStyles
IContextualMenuListProps
IContextualMenuProps
IContextualMenuRenderItem
IContextualMenuSection
IContextualMenuState
IContextualMenuStyleProps
IContextualMenuStyles
IContextualMenuSubComponentStyles
IDatePicker
IDatePickerProps
IDatePickerState
IDatePickerStrings
IDatePickerStyleProps
IDatePickerStyles
IDetailsCheckboxProps
IDetailsColumnProps
IDetailsColumnRenderTooltipProps
IDetailsColumnStyles
IDetailsFooterBaseProps
IDetailsFooterProps
IDetailsGroupDividerProps
IDetailsGroupRenderProps
IDetailsHeader
IDetailsHeaderBaseProps
IDetailsHeaderProps
IDetailsHeaderState
IDetailsHeaderStyles
IDetailsItemProps
IDetailsList
IDetailsListCheckboxProps
IDetailsListProps
IDetailsListState
IDetailsListStyles
IDetailsRow
IDetailsRowBaseProps
IDetailsRowCheckProps
IDetailsRowCheckStyles
IDetailsRowFieldsProps

Props interface for the DetailsRowFields component.

IDetailsRowProps
IDetailsRowSelectionState
IDetailsRowState
IDetailsRowStyles
IDialog
IDialogContent
IDialogContentProps
IDialogContentStyleProps
IDialogContentStyles
IDialogFooter
IDialogFooterProps
IDialogFooterStyleProps
IDialogFooterStyles
IDialogProps
IDialogState
IDialogStyleProps
IDialogStyles
IDividerAsProps
IDocumentCard
IDocumentCardActions
IDocumentCardActionsProps
IDocumentCardActionsStyleProps
IDocumentCardActionsStyles
IDocumentCardActivity
IDocumentCardActivityPerson
IDocumentCardActivityProps
IDocumentCardActivityStyleProps
IDocumentCardActivityStyles
IDocumentCardDetails
IDocumentCardDetailsProps
IDocumentCardDetailsStyleProps
IDocumentCardDetailsStyles
IDocumentCardImage
IDocumentCardImageProps
IDocumentCardImageStyleProps
IDocumentCardImageStyles
IDocumentCardLocation
IDocumentCardLocationProps
IDocumentCardLocationStyleProps
IDocumentCardLocationStyles
IDocumentCardLogo
IDocumentCardLogoProps
IDocumentCardLogoStyleProps
IDocumentCardLogoStyles
IDocumentCardPreview
IDocumentCardPreviewImage
IDocumentCardPreviewProps
IDocumentCardPreviewStyleProps
IDocumentCardPreviewStyles
IDocumentCardProps
IDocumentCardStatus
IDocumentCardStatusProps
IDocumentCardStatusStyleProps
IDocumentCardStatusStyles
IDocumentCardStyleProps
IDocumentCardStyles
IDocumentCardTitle
IDocumentCardTitleProps
IDocumentCardTitleStyleProps
IDocumentCardTitleStyles
IDragDropContext

Drag & drop event contextual information.

IDragDropEvent
IDragDropEvents

Drag & drop event callback interface.

IDragDropHelper

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

IDragDropHelperParams
IDragDropOptions

The drag and drop event listener configuration.

IDragDropTarget
IDragOptions
IDropdown
IDropdownInternalProps

Internal only props interface to support mixing in responsive mode

IDropdownOption
IDropdownProps
IDropdownState
IDropdownStyles

Represents the stylable areas of the control.

IDropdownSubComponentStyles
IDropHintDetails
IEditingSelectedPeopleItemProps
IEditingSelectedPeopleItemStyles
IEditingSelectedPeopleItemStylesProps
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

IElementPositionInfo
IEntityRect

An interface for the cached dimensions of entity inner host.

IExpandingCard
IExpandingCardProps

ExpandingCard component props.

IExpandingCardState
IExpandingCardStyleProps
IExpandingCardStyles
IExtendedPeoplePickerProps
IExtendedPersonaProps
IFabricProps
IFabricStyleProps
IFabricStyles
IFacepile
IFacepilePersona
IFacepileProps
IFacepileStyleProps
IFacepileStyles
IFocusTrapCalloutProps
IFocusTrapZone
IFocusTrapZoneProps
IFontIconProps

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

IGap

Gap element interface

IGenericItem
IGrid
IGridCellProps
IGridProps
IGridStyleProps
IGridStyles
IGroup
IGroupDividerProps
IGroupedList
IGroupedListProps
IGroupedListSectionProps
IGroupedListSectionState
IGroupedListState
IGroupedListStyles
IGroupFooterProps
IGroupFooterStyles
IGroupHeaderCheckboxProps
IGroupHeaderProps
IGroupHeaderStyles
IGroupRenderProps
IGroupShowAllProps
IGroupShowAllStyles
IGroupSpacerProps
IGroupSpacerStyles
IHoverCard
IHoverCardProps

HoverCard component props.

IHoverCardState
IHoverCardStyleProps
IHoverCardStyles
IHSL
IHSV
IIconContent
IIconProps
IIconState
IIconStyleProps
IIconStyles
IImage
IImageIconProps

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

IImageProps
IImageState
IImageStyleProps
IImageStyles
IInputProps

Pickers' input props interface

IKeytipConfig
IKeytipConfigItem
IKeytipConfigMap
IKeytipLayer
IKeytipLayerProps
IKeytipLayerState
IKeytipLayerStyleProps
IKeytipLayerStyles
IKeytipProps
IKeytipStyleProps

Props to style Keytip component

IKeytipStyles
IKeytipTransitionKey
ILabel
ILabelProps
ILabelStyleProps
ILabelStyles
ILayer
ILayerProps
ILayerStyleProps
ILayerStyles
ILine

Line element interface

ILink
ILinkHTMLAttributes
ILinkProps
ILinkStyleProps
ILinkStyles
IList
IListOnRenderRootProps

Props passed to the render override for the list root.

IListOnRenderSurfaceProps

Props passed to the render override for the list surface.

IListProps
IListState
IMarqueeSelection
IMarqueeSelectionProps
IMarqueeSelectionStyleProps
IMarqueeSelectionStyles
IMaskedTextFieldProps

MaskedTextField component props.

IMaskedTextFieldState

State for the MaskedTextField component.

IMenuItemStyles
IMessageBar
IMessageBarProps
IMessageBarState
IMessageBarStyleProps
IMessageBarStyles
IModal
IModalProps
IModalStyles
INav
INavButtonProps
INavLink
INavLinkGroup
INavProps
INavState
INavStyleProps
INavStyles
IOnRenderComboBoxLabelProps
IOverflowSet
IOverflowSetItemProps
IOverflowSetProps
IOverflowSetStyles
IOverlay
IOverlayProps
IOverlayStyleProps
IOverlayStyles
IPage
IPageProps
IPageSpecification
IPanel
IPanelHeaderRenderer

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.

IPanelProps
IPanelStyleProps
IPanelStyles
IPanelSubComponentStyles
IPeopleFloatingPickerProps
IPeoplePickerItemProps
IPeoplePickerItemSelectedProps

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

IPeoplePickerItemSelectedStyles

Represents the stylable areas of the PeoplePickerItemSelected.

IPeoplePickerItemSelectedSubComponentStyles

Styles interface of the SubComponents rendered within PeoplePickerItemSelected.

IPeoplePickerItemSharedProps

Common props in between IPeoplePickerItemSelectedProps, IPeoplePickerItemWithMenuProps and IPeoplePickerItemSuggestionProps.

IPeoplePickerItemState
IPeoplePickerItemSuggestionProps

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

IPeoplePickerItemSuggestionStyles

Represents the stylable areas of the PeoplePickerItemSuggestion.

IPeoplePickerItemWithMenuProps

PeoplePickerItemWithMenu props interface.

IPeoplePickerProps

PeoplePicker props interface which renders Personas as items.

IPersona
IPersonaCoinProps
IPersonaCoinStyleProps
IPersonaCoinStyles
IPersonaPresenceProps
IPersonaPresenceStyles
IPersonaProps
IPersonaSharedProps
IPersonaState
IPersonaStyleProps
IPersonaStyles
IPersonaWithMenu

Extended interface from IPersonaProps to add menuItems property PeoplePickerItemWithMenu items.

IPickerItem

PickerItem component.

IPickerItemProps

PickerItem props common for any type of items.

IPivot
IPivotItemProps
IPivotProps
IPivotState
IPivotStyles
IPlainCard
IPlainCardProps

PlainCard component props.

IPlainCardStyleProps
IPlainCardStyles
IPopupProps
IPopupState
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.

IPositionDirectionalHintData
IPositionedData
IPositioningContainer
IPositioningContainerProps
IPositioningContainerState
IPositionProps
IProgressIndicatorProps
IProgressIndicatorStyleProps
IProgressIndicatorStyles
IRating
IRatingProps

Rating component props.

IRatingState
IRatingStyleProps
IRatingStyles
IRelativePositions
IRenderGroupHeaderProps
IResizeGroup
IResizeGroupProps
IResizeGroupState
IResizeGroupStyleProps
IResizeGroupStyles
IRGB

RGB color with optional alpha value.

IScrollablePane
IScrollablePaneContext
IScrollablePaneProps
IScrollablePaneState
IScrollablePaneStyleProps
IScrollablePaneStyles
ISearchBox
ISearchBoxProps
ISearchBoxState
ISearchBoxStyleProps
ISearchBoxStyles
ISelectableDroppableTextProps
  • TComponent - Component used for reference properties, such as componentRef. - TListenerElement - Listener element associated with HTML event callbacks. Optional. If not provided, TComponent is assumed.
ISelectableOption
ISelectedItemProps
ISelectedPeopleItemProps
ISelectedPeopleProps
ISelectionZone
ISelectionZoneProps
ISelectionZoneState
ISeparator
ISeparatorProps
ISeparatorStyles
IShimmer
IShimmerCircle
IShimmerCircleProps

ShimmerCircle component props.

IShimmerCircleStyles

Represents the stylable areas of the control.

IShimmerColors

Interface describing the possible color customizations of Shimmer.

IShimmeredDetailsListProps

ShimmeredDetailsList props interface

IShimmeredDetailsListStyles

Represents the stylable areas of the control.

IShimmerElement

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

IShimmerElementsGroup
IShimmerElementsGroupProps

ShimmerElementsGroup component props.

IShimmerElementsGroupStyleProps

Props needed to construct styles.

IShimmerElementsGroupStyles

Represents the stylable areas of the control.

IShimmerGap
IShimmerGapProps

ShimmerGap component props.

IShimmerGapStyles

Represents the stylable areas of the control.

IShimmerLine
IShimmerLineProps

ShimmerLine component props.

IShimmerLineStyles

Represents the stylable areas of the control.

IShimmerProps

Shimmer component props.

IShimmerState
IShimmerStyleProps

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

IShimmerStyles

Represents the stylable areas of the control.

ISlider
ISliderProps
ISliderState
ISliderStyles
ISpinButton
ISpinButtonClassNames
ISpinButtonProps
ISpinButtonState
ISpinButtonStyles
ISpinner
ISpinnerProps

Spinner component props.

ISpinnerStyleProps

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

ISpinnerStyles

Represents the stylable areas of the control.

ISplitButtonClassNames
IStackItemProps
IStackItemSlots
IStackItemTokens
IStackProps
IStackSlots
IStackTokens
IStickyContext
IStickyProps
IStickyState
ISuggestionItemProps

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.

ISuggestionModel

SuggestionModel interface. Type T is the type of the item that is suggested (Persona, Tag or any other custom picker).

ISuggestions

Suggestions component.

ISuggestionsControlProps
ISuggestionsControlState
ISuggestionsCoreProps
ISuggestionsHeaderFooterItemProps
ISuggestionsHeaderFooterProps
ISuggestionsItem

SuggestionItem component.

ISuggestionsItemStyles

Represents the stylable areas of the SuggestionItem.

ISuggestionsProps

Suggestions props interface. Refers to the entire container holding all the suggestions. Type T is the type of the items that are displayed.

ISuggestionsState
ISuggestionsStyles

Represents the stylable areas of the Suggestions.

ISuggestionsSubComponentStyles

Styles interface of the SubComponents rendered within PeoplePickerItemSelected.

ISwatchColorPickerProps
ISwatchColorPickerState
ISwatchColorPickerStyleProps

Properties required to build the styles for the color picker component.

ISwatchColorPickerStyles

Styles for the Color Picker Component.

ITag

TagPickerItem item interface.

ITagItemProps

TagItem component props

ITagItemStyles

Represents the stylable areas of the TagItem.

ITagItemSuggestionProps

TagItemSuggestion component props

ITagItemSuggestionStyles

Represents the stylable areas of the TagItemSuggestion

ITagPickerProps

TagPicker component props

ITeachingBubble
ITeachingBubbleProps

TeachingBubble component props.

ITeachingBubbleState
ITeachingBubbleStyles
ITeachingBubbleSubComponentStyles
ITextField
ITextFieldProps

TextField component props.

ITextFieldStyles
ITextFieldSubComponentStyles
ITextProps

Inputs to the component

ITextSlots
ITextTokens
IThemeRules
IThemeSlotRule
IToggle
IToggleProps

Toggle component props.

IToggleState
IToggleStyleProps

Properties required to build the styles for the Toggle component.

IToggleStyles

Styles for the Toggle component.

ITooltip
ITooltipHost
ITooltipHostProps

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.

ITooltipHostState
ITooltipHostStyleProps
ITooltipHostStyles
ITooltipProps
ITooltipStyleProps
ITooltipStyles
IUniqueKeytip
IVerticalDividerClassNames
IVerticalDividerProps

Props for the Vertical Divider

IVerticalDividerStyles

Style interface that defines the different areas that styles can be customized on the Vertical Divider

IViewport

Viewport rectangle dimensions.

IWindowWithSegments

Window with typings for experimental features regarding Dual Screen devices.

IWithViewportProps

Props interface for the withViewport component.

Enums

BaseSlots
ButtonType
CheckboxVisibility
CollapseAllVisibility
ColumnActionsMode

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.

ColumnDragEndLocation

Enum to describe where the column has been dropped, after starting the drag

ConstrainMode
ContextualMenuItemType
DetailsListLayoutMode
DialogType
DocumentCardType
ElementType
ExpandingCardMode
FabricSlots
HoverCardType
IconType
ImageCoverStyle

The cover style to be used on the image

ImageFit

The possible methods that can be used to fit the image.

ImageLoadState
KeyboardSpinDirection
MessageBarType
OpenCardMode
OverflowButtonType
PanelType
PersonaInitialsColor
PersonaPresence
PersonaSize
PivotLinkFormat
PivotLinkSize
Position
RatingSize
RectangleEdge
ResizeGroupDirection
ResponsiveMode
SelectableOptionMenuItemType
SelectAllVisibility
SemanticColorSlots
Shade

Shades of a given color, from softest to strongest.

ShimmerElementsDefaultHeights

Describes the default heights for shimmer elements when omitted in implementation.

ShimmerElementType

Describes the possible types for shimmer elements used.

SpinnerSize

Possible variations of the spinner circle size.

SpinnerType

Deprecated at v2.0.0, use SpinnerSize instead.

StickyPositionType
SuggestionActionType

Enum to help identify which suggestions action button is selected.

SuggestionItemType
TooltipDelay
TooltipOverflowMode
ValidationState

Validation state of the user's input.

Functions

buildColumns(items, canResizeColumns, onColumnClick, sortedColumnKey, isSortedDescending, groupedColumnKey, isMultiline)
buildKeytipConfigMap(config)

Builds a map of ID to IKeytipProps

canAnyMenuItemsCheck(items)

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

clamp(value, max, min)

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

constructKeytip(configMap, parentSequence, keytip)

Constructs a keytip from an IKeytipConfigItem and puts it in the configMap

correctHex(hex)

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.

correctHSV(color)

Corrects an HSV color to fall within the valid range.

correctRGB(color)

Corrects an RGB color to fall within the valid range.

createGenericItem(name, currentValidationState)
createItem(name, isValid)
cssColor(color)

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.

getAllSelectedOptions(options, selectedIndices)
getAriaDescribedBy(keySequences)

Gets the aria-describedby value to put on the component with this keytip.

getBackgroundShade(color, shade, isInverted)
getBoundsFromTargetWindow(target, targetWindow)
getColorFromHSV(hsv, a)

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 #)

getColorFromRGBA(rgba)

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

getColorFromString(inputColor)

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.

getContrastRatio(color1, color2)
getFullColorString(color)

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

getMaxHeight(target, targetEdge, gapSpace, bounds, coverTarget)

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.

getOppositeEdge(edge)

Returns the opposite edge of the given RectangleEdge.

getPersonaInitialsColor(props)

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

getShade(color, shade, isInverted)

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#

getSubmenuItems(item)
hsl2hsv(h, s, l)

Converts HSL components to an HSV color.

hsl2rgb(h, s, l)

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

hsv2hex(h, s, v)

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

hsv2hsl(h, s, v)

Converts HSV components to an HSL color.

hsv2rgb(h, s, v)

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

isDark(color)
isRelativeUrl(url)
isValidShade(shade)

Returns true if the argument is a valid Shade value

ktpTargetFromId(keytipId)

Constructs the data-ktp-execute-target attribute selector from a keytip ID.

ktpTargetFromSequences(keySequences)

Constructs the data-ktp-target attribute selector from a full key sequence.

mergeOverflows(keySequences, overflowKeySequences)

Merges an overflow sequence with a key sequence.

positionCallout(props, hostElement, elementToPosition, previousPositions)
positionCard(props, hostElement, elementToPosition, previousPositions)
positionElement(props, hostElement, elementToPosition, previousPositions)

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.

rgb2hex(r, g, b)

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

rgb2hsv(r, g, b)

Converts RGB components to an HSV color.

sequencesToID(keySequences)

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.

themeRulesStandardCreator()
transitionKeysAreEqual(key1, key2)

Tests for equality between two IKeytipTransitionKeys.

transitionKeysContain(keys, key)

Tests if 'key' is present in 'keys'.

updateA(color, a)

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

updateH(color, h)

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.

updateRGB(color, component, value)

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.

updateSV(color, s, v)

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.

updateT(color, t)

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

useKeytipRef(options)

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 Details

buildColumns(items, canResizeColumns, onColumnClick, sortedColumnKey, isSortedDescending, groupedColumnKey, isMultiline)

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

Parameters

items

any[]

canResizeColumns

boolean

onColumnClick

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

sortedColumnKey

string

isSortedDescending

boolean

groupedColumnKey

string

isMultiline

boolean

Returns

IColumn[]

buildKeytipConfigMap(config)

Builds a map of ID to IKeytipProps

export declare function buildKeytipConfigMap(config: IKeytipConfig): IKeytipConfigMap;

Parameters

config

IKeytipConfig

IKeytipConfig object

Returns

IKeytipConfigMap

Config map

canAnyMenuItemsCheck(items)

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

export declare function canAnyMenuItemsCheck(items: IContextualMenuItem[]): boolean;

Parameters

items

IContextualMenuItem[]

Returns

boolean

clamp(value, max, min)

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

export declare function clamp(value: number, max: number, min?: number): number;

Parameters

value

number

max

number

min

number

Returns

number

constructKeytip(configMap, parentSequence, keytip)

Constructs a keytip from an IKeytipConfigItem and puts it in the configMap

export declare function constructKeytip(configMap: IKeytipConfigMap, parentSequence: string[], keytip: IKeytipConfigItem): void;

Parameters

configMap

IKeytipConfigMap

IKeytipConfigMap to store the keytip in

parentSequence

string[]

string of the parent keytip

keytip

IKeytipConfigItem

IKeytipConfigItem data

Returns

void

correctHex(hex)

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.

export declare function correctHex(hex: string): string;

Parameters

hex

string

Returns

string

correctHSV(color)

Corrects an HSV color to fall within the valid range.

export declare function correctHSV(color: IHSV): IHSV;

Parameters

color

IHSV

Returns

IHSV

correctRGB(color)

Corrects an RGB color to fall within the valid range.

export declare function correctRGB(color: IRGB): IRGB;

Parameters

color

IRGB

Returns

IRGB

createGenericItem(name, currentValidationState)

export declare function createGenericItem(name: string, currentValidationState: ValidationState): IGenericItem & {
    key: React.Key;
};

Parameters

name

string

currentValidationState

ValidationState

Returns

IGenericItem & { key: React.Key; }

createItem(name, isValid)

export declare function createItem(name: string, isValid: boolean): ISuggestionModel<IPersonaProps>;

Parameters

name

string

isValid

boolean

Returns

ISuggestionModel<IPersonaProps>

cssColor(color)

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.

export declare function cssColor(color?: string): IRGB | undefined;

Parameters

color

string

Returns

IRGB | undefined

getAllSelectedOptions(options, selectedIndices)

export declare function getAllSelectedOptions(options: ISelectableOption[], selectedIndices: number[]): ISelectableOption[];

Parameters

options

ISelectableOption[]

selectedIndices

number[]

Returns

ISelectableOption[]

getAriaDescribedBy(keySequences)

Gets the aria-describedby value to put on the component with this keytip.

export declare function getAriaDescribedBy(keySequences: string[]): string;

Parameters

keySequences

string[]

KeySequences of the keytip.

Returns

string

The aria-describedby value to set on the component with this keytip.

getBackgroundShade(color, shade, isInverted)

export declare function getBackgroundShade(color: IColor, shade: Shade, isInverted?: boolean): IColor | null;

Parameters

color

IColor

shade

Shade

isInverted

boolean

Returns

IColor | null

getBoundsFromTargetWindow(target, targetWindow)

export declare function getBoundsFromTargetWindow(target: Element | MouseEvent | Point | null, targetWindow: IWindowWithSegments): IRectangle;

Parameters

target

Element | MouseEvent | Point | null

targetWindow

IWindowWithSegments

Returns

getColorFromHSV(hsv, a)

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 #)

export declare function getColorFromHSV(hsv: IHSV, a?: number): IColor;

Parameters

hsv

IHSV

a

number

Returns

IColor

getColorFromRGBA(rgba)

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

export declare function getColorFromRGBA(rgba: IRGB): IColor;

Parameters

rgba

IRGB

Returns

IColor

getColorFromString(inputColor)

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.

export declare function getColorFromString(inputColor: string): IColor | undefined;

Parameters

inputColor

string

Returns

IColor | undefined

getContrastRatio(color1, color2)

export declare function getContrastRatio(color1: IColor, color2: IColor): number;

Parameters

color1

IColor

color2

IColor

Returns

number

getFullColorString(color)

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

export declare function getFullColorString(color: IColor): string;

Parameters

color

IColor

Returns

string

getMaxHeight(target, targetEdge, gapSpace, bounds, coverTarget)

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.

export declare function getMaxHeight(target: Element | MouseEvent | Point, targetEdge: DirectionalHint, gapSpace?: number, bounds?: IRectangle, coverTarget?: boolean): number;

Parameters

target

Element | MouseEvent | Point

targetEdge

DirectionalHint

gapSpace

number

bounds
IRectangle
coverTarget

boolean

Returns

number

getOppositeEdge(edge)

Returns the opposite edge of the given RectangleEdge.

export declare function getOppositeEdge(edge: RectangleEdge): RectangleEdge;

Parameters

edge

RectangleEdge

Returns

RectangleEdge

getPersonaInitialsColor(props)

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

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

Parameters

props

Pick<IPersonaProps, 'primaryText' | 'text' | 'initialsColor'>

Current persona props

Returns

string

Hex color string prefixed with #

getShade(color, shade, isInverted)

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#

export declare function getShade(color: IColor, shade: Shade, isInverted?: boolean): IColor | null;

Parameters

color

IColor

The base color whose shade is to be computed

shade

Shade

The shade of the base color to compute

isInverted

boolean

Default false. Whether the given theme is inverted (reverse strongen/soften logic)

Returns

IColor | null

getSubmenuItems(item)

export declare function getSubmenuItems(item: IContextualMenuItem): IContextualMenuItem[] | undefined;

Parameters

item

IContextualMenuItem

Returns

IContextualMenuItem[] | undefined

hsl2hsv(h, s, l)

Converts HSL components to an HSV color.

export declare function hsl2hsv(h: number, s: number, l: number): IHSV;

Parameters

h

number

s

number

l

number

Returns

IHSV

hsl2rgb(h, s, l)

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

export declare function hsl2rgb(h: number, s: number, l: number): IRGB;

Parameters

h

number

s

number

l

number

Returns

IRGB

hsv2hex(h, s, v)

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

export declare function hsv2hex(h: number, s: number, v: number): string;

Parameters

h

number

s

number

v

number

Returns

string

hsv2hsl(h, s, v)

Converts HSV components to an HSL color.

export declare function hsv2hsl(h: number, s: number, v: number): IHSL;

Parameters

h

number

s

number

v

number

Returns

IHSL

hsv2rgb(h, s, v)

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

export declare function hsv2rgb(h: number, s: number, v: number): IRGB;

Parameters

h

number

s

number

v

number

Returns

IRGB

isDark(color)

export declare function isDark(color: IColor): boolean;

Parameters

color

IColor

Returns

boolean

isRelativeUrl(url)

export declare function isRelativeUrl(url: string): boolean;

Parameters

url

string

Returns

boolean

isValidShade(shade)

Returns true if the argument is a valid Shade value

export declare function isValidShade(shade?: Shade): boolean;

Parameters

shade

Shade

The Shade value to validate.

Returns

boolean

ktpTargetFromId(keytipId)

Constructs the data-ktp-execute-target attribute selector from a keytip ID.

export declare function ktpTargetFromId(keytipId: string): string;

Parameters

keytipId

string

ID of the Keytip.

Returns

string

String selector to use to query for the keytip execute target.

ktpTargetFromSequences(keySequences)

Constructs the data-ktp-target attribute selector from a full key sequence.

export declare function ktpTargetFromSequences(keySequences: string[]): string;

Parameters

keySequences

string[]

Full string[] for a Keytip.

Returns

string

String selector to use to query for the keytip target.

mergeOverflows(keySequences, overflowKeySequences)

Merges an overflow sequence with a key sequence.

export declare function mergeOverflows(keySequences: string[], overflowKeySequences: string[]): string[];

Parameters

keySequences

string[]

Full sequence for one keytip.

overflowKeySequences

string[]

Full overflow keytip sequence.

Returns

string[]

Sequence that will be used by the keytip when in the overflow.

positionCallout(props, hostElement, elementToPosition, previousPositions)

export declare function positionCallout(props: IPositionProps, hostElement: HTMLElement, elementToPosition: HTMLElement, previousPositions?: ICalloutPositionedInfo): ICalloutPositionedInfo;

Parameters

props

IPositionProps

hostElement

HTMLElement

elementToPosition

HTMLElement

previousPositions

ICalloutPositionedInfo

Returns

ICalloutPositionedInfo

positionCard(props, hostElement, elementToPosition, previousPositions)

export declare function positionCard(props: IPositionProps, hostElement: HTMLElement, elementToPosition: HTMLElement, previousPositions?: ICalloutPositionedInfo): ICalloutPositionedInfo;

Parameters

props

IPositionProps

hostElement

HTMLElement

elementToPosition

HTMLElement

previousPositions

ICalloutPositionedInfo

Returns

ICalloutPositionedInfo

positionElement(props, hostElement, elementToPosition, previousPositions)

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.

export declare function positionElement(props: IPositionProps, hostElement: HTMLElement, elementToPosition: HTMLElement, previousPositions?: IPositionedData): IPositionedData;

Parameters

props

IPositionProps

hostElement

HTMLElement

elementToPosition

HTMLElement

previousPositions

IPositionedData

Returns

IPositionedData

rgb2hex(r, g, b)

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

export declare function rgb2hex(r: number, g: number, b: number): string;

Parameters

r

number

g

number

b

number

Returns

string

rgb2hsv(r, g, b)

Converts RGB components to an HSV color.

export declare function rgb2hsv(r: number, g: number, b: number): IHSV;

Parameters

r

number

g

number

b

number

Returns

IHSV

sequencesToID(keySequences)

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.

export declare function sequencesToID(keySequences: string[]): string;

Parameters

keySequences

string[]

Full path of IKeySequences for one keytip.

Returns

string

String to use for the keytip ID.

themeRulesStandardCreator()

export declare function themeRulesStandardCreator(): IThemeRules;

Returns

IThemeRules

transitionKeysAreEqual(key1, key2)

Tests for equality between two IKeytipTransitionKeys.

export declare function transitionKeysAreEqual(key1: IKeytipTransitionKey, key2: IKeytipTransitionKey): boolean;

Parameters

key1

IKeytipTransitionKey

First IKeytipTransitionKey.

key2

IKeytipTransitionKey

Second IKeytipTransitionKey.

Returns

boolean

T/F if the transition keys are equal.

transitionKeysContain(keys, key)

Tests if 'key' is present in 'keys'.

export declare function transitionKeysContain(keys: IKeytipTransitionKey[], key: IKeytipTransitionKey): boolean;

Parameters

keys

IKeytipTransitionKey[]

Array of IKeytipTransitionKey.

key

IKeytipTransitionKey

IKeytipTransitionKey to find in 'keys'.

Returns

boolean

T/F if 'keys' contains 'key'.

updateA(color, a)

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

export declare function updateA(color: IColor, a: number): IColor;

Parameters

color

IColor

a

number

Returns

IColor

updateH(color, h)

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.

export declare function updateH(color: IColor, h: number): IColor;

Parameters

color

IColor

h

number

Returns

IColor

updateRGB(color, component, value)

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.

export declare function updateRGB(color: IColor, component: keyof IRGB, value: number): IColor;

Parameters

color

IColor

component

keyof IRGB

value

number

Returns

IColor

updateSV(color, s, v)

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.

export declare function updateSV(color: IColor, s: number, v: number): IColor;

Parameters

color

IColor

s

number

v

number

Returns

IColor

updateT(color, t)

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

export declare function updateT(color: IColor, t: number): IColor;

Parameters

color

IColor

t

number

Returns

IColor

useKeytipRef(options)

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.

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

Parameters

options

KeytipDataOptions

Returns

React.Ref<TElement>