or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

button-components.mddata-display-components.mdindex.mdinput-components.mdlayout-components.mdnavigation-components.mdoverlay-components.md
tile.json

tessl/npm-office-ui-fabric-react

Comprehensive React component library implementing Microsoft's Fluent Design System for building Office 365 experiences

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/office-ui-fabric-react@6.214.x

To install, run

npx @tessl/cli install tessl/npm-office-ui-fabric-react@6.214.0

index.mddocs/

Office UI Fabric React

Office UI Fabric React is Microsoft's comprehensive React component library that implements the Fluent Design System for building consistent web experiences across Office and Office 365 applications. It provides a robust collection of 80+ production-ready UI components including inputs, navigation, data display, overlays, and layout systems, all designed with accessibility, theming, and responsive design principles.

Package Information

  • Package Name: office-ui-fabric-react
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install office-ui-fabric-react

Core Imports

import { Button, TextField, DetailsList, Panel, Fabric } from "office-ui-fabric-react";

For CommonJS:

const { Button, TextField, DetailsList, Panel, Fabric } = require("office-ui-fabric-react");

Basic Usage

import React from "react";
import { 
  Fabric, 
  PrimaryButton, 
  TextField, 
  Panel,
  PanelType,
  IColumn,
  DetailsList 
} from "office-ui-fabric-react";

function App() {
  const [isOpen, setIsOpen] = React.useState(false);
  const [text, setText] = React.useState("");
  
  const items = [
    { name: "John Doe", email: "john@example.com", department: "Engineering" },
    { name: "Jane Smith", email: "jane@example.com", department: "Design" }
  ];
  
  const columns: IColumn[] = [
    { key: "name", name: "Name", fieldName: "name", minWidth: 100 },
    { key: "email", name: "Email", fieldName: "email", minWidth: 150 },
    { key: "department", name: "Department", fieldName: "department", minWidth: 100 }
  ];

  return (
    <Fabric>
      <TextField
        label="Enter text"
        value={text}
        onChange={(e, newValue) => setText(newValue || "")}
      />
      
      <PrimaryButton
        text="Open Panel"
        onClick={() => setIsOpen(true)}
      />
      
      <DetailsList
        items={items}
        columns={columns}
        setKey="set"
        layoutMode={DetailsListLayoutMode.justified}
      />
      
      <Panel
        isOpen={isOpen}
        type={PanelType.medium}
        headerText="Sample Panel"
        onDismiss={() => setIsOpen(false)}
      >
        <p>Panel content goes here</p>
      </Panel>
    </Fabric>
  );
}

Architecture

Office UI Fabric React is built around several key architectural principles:

  • Fluent Design System: Consistent visual language and interaction patterns following Microsoft's design principles
  • Theme System: Comprehensive theming support through design tokens, allowing deep customization of colors, fonts, and spacing
  • CSS-in-JS Styling: Uses @uifabric/merge-styles for performant, component-scoped styling with theme integration
  • Accessibility First: Full ARIA support, keyboard navigation, screen reader optimization, and high contrast support
  • Foundation Framework: Component composition system using slots and higher-order components for extensibility
  • TypeScript Integration: Complete type definitions with generic type preservation and strict type safety
  • Performance Optimization: Virtualization for large datasets, lazy loading, and efficient re-rendering patterns

Capabilities

Input Components

Comprehensive form controls including text inputs, dropdowns, checkboxes, and specialized pickers for building interactive forms and data entry interfaces.

// Text Input
interface ITextField {
  focus(): void;
  blur(): void;
  select(): void;
  setSelectionStart(start: number): void;
  setSelectionEnd(end: number): void;
  setSelectionRange(start: number, end: number): void;
}

interface ITextFieldProps {
  label?: string;
  value?: string;
  defaultValue?: string;
  placeholder?: string;
  multiline?: boolean;
  rows?: number;
  maxLength?: number;
  disabled?: boolean;
  readOnly?: boolean;
  required?: boolean;
  errorMessage?: string;
  onChange?: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;
  onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
}

// Dropdown Selection
interface IDropdown {
  selectedOptions: IDropdownOption[];
  focus(): void;
}

interface IDropdownProps {
  options: IDropdownOption[];
  selectedKey?: string | number;
  selectedKeys?: (string | number)[];
  multiSelect?: boolean;
  placeholder?: string;
  disabled?: boolean;
  required?: boolean;
  label?: string;
  errorMessage?: string;
  onChange?: (event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption, index?: number) => void;
}

interface IDropdownOption {
  key: string | number;
  text: string;
  disabled?: boolean;
  hidden?: boolean;
  selected?: boolean;
  title?: string;
  ariaLabel?: string;
}

Input Components

Button Components

Comprehensive button system with multiple variants optimized for different contexts and user actions, from simple clicks to complex dropdown menus.

interface IButton {
  focus(): void;
  dismissMenu(): void;
  openMenu(shouldFocusOnContainer?: boolean): void;
}

interface IButtonProps {
  text?: string;
  primary?: boolean;
  disabled?: boolean;
  href?: string;
  target?: string;
  iconProps?: IIconProps;
  menuProps?: IContextualMenuProps;
  split?: boolean;
  onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>) => void;
  onMenuClick?: (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, button?: IButtonProps) => void;
}

enum ButtonType {
  normal = 0,
  primary = 1,
  hero = 2,
  compound = 3,
  command = 4,
  icon = 5,
  default = 6
}

Button Components

Data Display Components

High-performance components for displaying structured data including virtualized lists, data tables, and user representation elements.

// High-Performance Data Table
interface IDetailsList {
  forceUpdate(): void;
  focusIndex(index: number): void;
}

interface IDetailsListProps {
  items: any[];
  columns: IColumn[];
  groups?: IGroup[];
  groupProps?: IDetailsGroupRenderProps;
  selection?: ISelection;
  selectionMode?: SelectionMode;
  layoutMode?: DetailsListLayoutMode;
  compact?: boolean;
  isHeaderVisible?: boolean;
  onItemInvoked?: (item: any, index: number) => void;
  onColumnHeaderClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => void;
  checkboxVisibility?: CheckboxVisibility;
  setKey?: string;
  className?: string;
}

interface IColumn {
  key: string;
  name: string;
  fieldName?: string;
  minWidth: number;
  maxWidth?: number;
  isResizable?: boolean;
  isSorted?: boolean;
  isSortedDescending?: boolean;
  isRowHeader?: boolean;
  isMultiline?: boolean;
  columnActionsMode?: ColumnActionsMode;
  onColumnClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => void;
  onRender?: (item: any, index: number, column: IColumn) => React.ReactNode;
}

enum DetailsListLayoutMode {
  fixedColumns = 0,
  justified = 1
}

enum SelectionMode {
  none = 0,
  single = 1,
  multiple = 2
}

Data Display Components

Layout Components

Flexible layout system including Stack for flexbox layouts, Grid for CSS grid layouts, and responsive container components.

interface IStackProps {
  as?: React.ElementType;
  horizontal?: boolean;
  reversed?: boolean;
  horizontalAlign?: Alignment;
  verticalAlign?: Alignment;
  verticalFill?: boolean;
  disableShrink?: boolean;
  wrap?: boolean;
  gap?: number | string;
  padding?: number | string;
  maxWidth?: number | string;
  tokens?: IStackTokens;
  styles?: IStyleFunctionOrObject<IStackStyleProps, IStackStyles>;
  theme?: ITheme;
  children?: React.ReactNode;
}

interface IStackTokens {
  childrenGap?: number | string;
  maxHeight?: number | string;
  maxWidth?: number | string;
  padding?: number | string | IStackTokens;
}

type Alignment = 
  | "start" 
  | "end" 
  | "center" 
  | "space-between" 
  | "space-around" 
  | "space-evenly" 
  | "baseline" 
  | "stretch";

Layout Components

Navigation Components

Navigation components for building consistent wayfinding experiences including vertical navigation, breadcrumbs, command bars, and pivot tabs.

// Command Bar for Actions
interface ICommandBarProps {
  items: ICommandBarItemProps[];
  overflowItems?: ICommandBarItemProps[];
  overflowButtonProps?: IButtonProps;
  farItems?: ICommandBarItemProps[];
  elippsisAriaLabel?: string;
  className?: string;
  styles?: IStyleFunctionOrObject<ICommandBarStyleProps, ICommandBarStyles>;
  theme?: ITheme;
}

interface ICommandBarItemProps extends IContextualMenuItem {
  cacheKey?: string;
  renderedInOverflow?: boolean;
  iconOnly?: boolean;
  buttonStyles?: Partial<IButtonStyles>;
}

// Pivot Navigation
interface IPivotProps {
  selectedKey?: string;
  defaultSelectedKey?: string;
  onLinkClick?: (item?: PivotItem, ev?: React.MouseEvent<HTMLElement>) => void;
  linkFormat?: PivotLinkFormat;
  linkSize?: PivotLinkSize;
  headersOnly?: boolean;
  styles?: IStyleFunctionOrObject<IPivotStyleProps, IPivotStyles>;
}

enum PivotLinkFormat {
  links = 0,
  tabs = 1
}

enum PivotLinkSize {
  normal = 0,
  large = 1
}

Navigation Components

Overlay Components

Modal and non-modal overlay components including dialogs, panels, callouts, and tooltips for displaying contextual information and actions.

// Side Panel
interface IPanel {
  open(): void;
  dismiss(): void;
}

interface IPanelProps {
  isOpen?: boolean;
  hasCloseButton?: boolean;
  isLightDismiss?: boolean;
  isHiddenOnDismiss?: boolean;
  isBlocking?: boolean;
  type?: PanelType;
  headerText?: string;
  headerTextProps?: React.HTMLProps<HTMLDivElement>;
  closeButtonAriaLabel?: string;
  customWidth?: string;
  onDismiss?: (ev?: React.SyntheticEvent<HTMLElement>) => void;
  onOpened?: () => void;
  styles?: IStyleFunctionOrObject<IPanelStyleProps, IPanelStyles>;
  theme?: ITheme;
  children?: React.ReactNode;
}

enum PanelType {
  smallFluid = 0,
  smallFixedFar = 1,
  smallFixedNear = 2,
  medium = 3,
  large = 4,
  largeFixed = 5,
  extraLarge = 6,
  custom = 99
}

// Dialog
interface IDialogProps {
  isOpen?: boolean;
  onDismiss?: (ev?: React.MouseEvent<HTMLButtonElement>) => void;
  isBlocking?: boolean;
  isDarkOverlay?: boolean;
  type?: DialogType;
  title?: string;
  subText?: string;
  maxWidth?: number | string;
  minWidth?: number | string;
  styles?: IStyleFunctionOrObject<IDialogStyleProps, IDialogStyles>;
  children?: React.ReactNode;
}

enum DialogType {
  normal = 0,
  largeHeader = 1,
  close = 2
}

Overlay Components

Picker Components

Specialized selection components for people, tags, and other complex objects with search, filtering, and suggestion capabilities.

interface IBasePickerProps<T> {
  selectedItems?: T[];
  defaultSelectedItems?: T[];
  onChange?: (items?: T[]) => void;
  onResolveSuggestions: (filter: string, selectedItems?: T[]) => T[] | Promise<T[]>;
  onEmptyInputFocus?: (selectedItems?: T[]) => T[] | Promise<T[]>;
  getTextFromItem?: (item: T, currentValue?: string) => string;
  pickerSuggestionsProps?: IBasePickerSuggestionsProps;
  pickerCalloutProps?: ICalloutProps;
  className?: string;
  inputProps?: IInputProps;
  disabled?: boolean;
  itemLimit?: number;
  createGenericItem?: (input: string, ValidationState: ValidationState) => ISuggestionModel<T>;
  onValidateInput?: (input: string) => ValidationState;
  removeButtonAriaLabel?: string;
  onItemSelected?: (selectedItem?: T) => T | null;
  selectedItemsListProps?: ISelectedItemsListProps<T>;
  onGetMoreResults?: (filter: string, selectedItems?: T[]) => T[] | Promise<T[]>;
  searchingText?: ((props: { input: string }) => string) | string;
  enableTabKeyInputSubmit?: boolean;
  resolveDelay?: number;
}

Note: This library also includes specialized picker components for people/tags with search and filtering capabilities, plus additional feedback components like MessageBar, ProgressIndicator, and Spinner that are integrated throughout the documented components above.

Styling and Theming

Comprehensive theming system with design tokens, CSS-in-JS utilities, and theme customization for consistent branding across applications.

// Theme System
interface ITheme {
  palette: IPalette;
  fonts: IFontStyles;
  semanticColors: ISemanticColors;
  spacing: ISpacing;
  effects: IEffects;
  isInverted?: boolean;
  disableGlobalClassNames?: boolean;
}

interface IPalette {
  themePrimary: string;
  themeLighterAlt: string;
  themeLighter: string;
  themeLight: string;
  themeTertiary: string;
  themeSecondary: string;
  themeDarkAlt: string;
  themeDark: string;
  themeDarker: string;
  neutralLighterAlt: string;
  neutralLighter: string;
  neutralLight: string;
  neutralQuaternaryAlt: string;
  neutralQuaternary: string;
  neutralTertiaryAlt: string;
  neutralTertiary: string;
  neutralSecondary: string;
  neutralPrimaryAlt: string;
  neutralPrimary: string;
  neutralDark: string;
  black: string;
  white: string;
}

// Styling Functions
function mergeStyles(...args: (IStyle | IStyleObject | string | false | null | undefined)[]): string;
function mergeStyleSets<T extends IConcatenatedStyleSet<T>>(
  ...styleSets: Array<T | undefined | false | null>
): IProcessedStyleSet<T>;

// Theme Creation
function createTheme(theme?: IPartialTheme, depComments?: boolean): ITheme;
function loadTheme(theme: IPartialTheme, depComments?: boolean): ITheme;

Additional theming capabilities: Comprehensive theming system with ITheme, IPalette interfaces and mergeStyles functions for deep customization.

Utilities

Essential utility functions for focus management, keyboard handling, event management, and responsive behavior that support the component ecosystem.

// Focus Management
interface IFocusZoneProps {
  direction?: FocusZoneDirection;
  defaultActiveElement?: string;
  isCircularNavigation?: boolean;
  isInnerZoneKeystroke?: (ev: React.KeyboardEvent<HTMLElement>) => boolean;
  onActiveElementChanged?: (element?: HTMLElement, ev?: React.FocusEvent<HTMLElement>) => void;
  onBeforeFocus?: (childElement?: HTMLElement) => boolean;
  checkForNoWrap?: boolean;
  allowFocusRoot?: boolean;
  allowTabKey?: boolean;
  disabled?: boolean;
  shouldInputLoseFocusOnArrowKey?: (inputElement: HTMLInputElement) => boolean;
  shouldReceiveFocus?: (childElement?: HTMLElement) => boolean;
  handleTabKey?: FocusZoneTabbableElements;
  doNotAllowFocusEventToPropagate?: boolean;
  stopFocusPropagation?: boolean;
  preventDefaultWhenHandled?: boolean;
  preventFocusRestoration?: boolean;
  shouldRestoreFocus?: boolean;
  as?: React.ElementType<React.HTMLAttributes<HTMLDivElement>>;
  elementRef?: React.Ref<HTMLElement>;
  rootProps?: React.HTMLAttributes<HTMLDivElement>;
  onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
  onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
  role?: string;
}

enum FocusZoneDirection {
  vertical = 0,
  horizontal = 1,
  bidirectional = 2,
  domOrder = 3
}

// Selection Management
interface ISelection {
  count: number;
  mode: SelectionMode;
  canSelectItem: (item: any, index?: number) => boolean;
  getItems(): any[];
  getSelectedCount(): number;
  getSelectedIndices(): number[];
  setAllSelected(isAllSelected: boolean): void;
  setKeySelected(key: string, isSelected: boolean, shouldAnchor: boolean): void;
  setIndexSelected(index: number, isSelected: boolean, shouldAnchor: boolean): void;
  setRangeSelected(fromIndex: number, count: number, isSelected: boolean, shouldAnchor: boolean): void;
  isAllSelected(): boolean;
  isKeySelected(key: string): boolean;
  isIndexSelected(index: number): boolean;
  setItems(items: any[], shouldClear: boolean): void;
  setChangeEvents(isEnabled: boolean, suppressChange?: boolean): void;
  toggleAllSelected(): void;
  toggleKeySelected(key: string): void;
  toggleIndexSelected(index: number): void;
  toggleRangeSelected(fromIndex: number, count: number): void;
}

Additional utility capabilities: Advanced focus management (FocusZone) and selection state management (ISelection) utilities integrated throughout the components.

Types

// Core component interfaces
interface IStyleFunctionOrObject<TStylesProps, TStyleSet extends IStyleSet<TStyleSet>> {
  (props: TStylesProps): Partial<TStyleSet>;
}

interface IRefObject<T> {
  (ref: T | null): void;
}

// Event handling
type IStyleFunction<TStylesProps, TStyleSet> = (props: TStylesProps) => Partial<TStyleSet>;

// Style definitions
interface IStyle {
  [key: string]: any;
}

interface IStyleSet<TStyleSet> {
  [P in keyof Omit<TStyleSet, keyof IStyleSet<TStyleSet>>]: IStyle;
}

// Component composition
interface IProcessedStyleSet<T> {
  [P in keyof T]: string;
}