Button Components

/**
 * Primary action button with emphasized styling
 */
function PrimaryButton(props: IButtonProps): JSX.Element;

/**
 * Standard button with default styling
 */
function DefaultButton(props: IButtonProps): JSX.Element;

/**
 * Command-style button without background, suitable for toolbars
 */
function ActionButton(props: IButtonProps): JSX.Element;

/**
 * Button optimized for command bars with proper spacing and styling
 */
function CommandBarButton(props: IButtonProps): JSX.Element;

/**
 * Button displaying only an icon, no text
 */
function IconButton(props: IButtonProps): JSX.Element;

/**
 * Button with primary and secondary text areas
 */
function CompoundButton(props: IButtonProps): JSX.Element;

/**
 * Button styled for message bars with appropriate contrast
 */
function MessageBarButton(props: IButtonProps): JSX.Element;

/**
 * Button with dropdown menu functionality
 */
function SplitButton(props: IButtonProps): JSX.Element;

interface IButton {
  /** Set focus to the button */
  focus(): void;
  /** Dismiss any open menu */
  dismissMenu(): void;
  /** Open the button's menu with optional focus settings */
  openMenu(shouldFocusOnContainer?: boolean, shouldFocusOnMount?: boolean): void;
}

interface IButtonProps extends React.AllHTMLAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton | Button> {
  /** Reference to access component methods */
  componentRef?: IRefObject<IButton>;
  /** If provided, this component will be rendered as an anchor */
  href?: string;
  /** Changes the visual presentation of the button to be emphasized */
  primary?: boolean;
  /** Unique id to identify the item. Typically a duplicate of key value */
  uniqueId?: string | number;
  /** Whether the button is disabled */
  disabled?: boolean;
  /** Whether the button can have focus in disabled mode */
  allowDisabledFocus?: boolean;
  /** If set to true and if this is a splitButton (split == true) then the primary action of a split button is disabled */
  primaryDisabled?: boolean;
  /** Custom styling for individual elements within the button DOM */
  styles?: IButtonStyles;
  /** Theme provided by HOC */
  theme?: ITheme;
  /** Whether the button is checked */
  checked?: boolean;
  /** Whether button is a toggle button with distinct on and off states */
  toggle?: boolean;
  /** If provided, additional class name to provide on the root element */
  className?: string;
  /** The aria label of the button for the benefit of screen readers */
  ariaLabel?: string;
  /** Detailed description of the button for the benefit of screen readers */
  ariaDescription?: string;
  /** If provided and is true it adds an 'aria-hidden' attribute instructing screen readers to ignore the element */
  ariaHidden?: boolean;
  /** Text to render button label. If text is supplied, it will override any string in button children */
  text?: string;
  /** The props for the icon shown in the button */
  iconProps?: IIconProps;
  /** Props for button menu. Providing this will default to showing the menu icon */
  menuProps?: IContextualMenuProps;
  /** Callback that runs after Button's contextualmenu was closed (removed from the DOM) */
  onAfterMenuDismiss?: () => void;
  /** If set to true, and if menuProps and onClick are provided, the button will render as a SplitButton */
  split?: boolean;
  /** The props for the icon shown when providing a menu dropdown */
  menuIconProps?: IIconProps;
  /** Accessible label for the dropdown chevron button if this button is split */
  splitButtonAriaLabel?: string;
  /** Optional callback when menu is clicked */
  onMenuClick?: (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, button?: IButtonProps) => void;
  /** Custom render function for the icon */
  onRenderIcon?: IRenderFunction<IButtonProps>;
  /** Custom render function for the label text */
  onRenderText?: IRenderFunction<IButtonProps>;
  /** Custom render function for the desciption text */
  onRenderDescription?: IRenderFunction<IButtonProps>;
  /** Custom render function for the aria description element */
  onRenderAriaDescription?: IRenderFunction<IButtonProps>;
  /** Custom render function for rendering the button children */
  onRenderChildren?: IRenderFunction<IButtonProps>;
  /** Custom render function for button menu icon */
  onRenderMenuIcon?: IRenderFunction<IButtonProps>;
  /** Deprecated at v6.3.2, to be removed at >= v7.0.0. Use menuAs instead */
  onRenderMenu?: IRenderFunction<IContextualMenuProps>;
  /** Render a custom menu in place of the normal one */
  menuAs?: IComponentAs<IContextualMenuProps>;
  /** Description of the action this button takes. Only used for compound buttons */
  secondaryText?: string;
  /** Deprecated at v1.2.3, to be removed at >= v2.0.0. Use specific button component instead */
  buttonType?: ButtonType;
  /** Deprecated at v0.56.2, to be removed at >= v1.0.0. Just pass in button props instead */
  rootProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | React.AnchorHTMLAttributes<HTMLAnchorElement>;
  /** Any custom data the developer wishes to associate with the menu item. Deprecated, use checked if setting state */
  toggled?: boolean;
  /** Any custom data the developer wishes to associate with the menu item */
  data?: any;
  /** Method to provide the classnames to style a button */
  getClassNames?: (
    theme: ITheme,
    className: string,
    variantClassName: string,
    iconClassName: string | undefined,
    menuIconClassName: string | undefined,
    disabled: boolean,
    checked: boolean,
    expanded: boolean,
    isSplit: boolean | undefined,
    allowDisabledFocus: boolean
  ) => IButtonClassNames;
  /** Method to provide the classnames to style a button */
  getSplitButtonClassNames?: (
    disabled: boolean,
    expanded: boolean,
    checked: boolean,
    allowDisabledFocus: boolean
  ) => ISplitButtonClassNames;
  /** Provides a custom KeyCode that can be used to open the button menu */
  menuTriggerKeyCode?: KeyCodes | null;
  /** Optional keytip for this button */
  keytipProps?: IKeytipProps;
  /** Menu will not be created or destroyed when opened or closed, instead it will be hidden */
  persistMenu?: boolean;
  /** Style for the description text if applicable (for compound buttons.) Deprecated, use secondaryText instead */
  description?: IStyle;
}

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

enum ElementType {
  button = 0,
  anchor = 1
}

import React, { useState } from "react";
import { 
  PrimaryButton, 
  DefaultButton, 
  ActionButton, 
  IconButton,
  CompoundButton,
  SplitButton,
  IContextualMenuProps 
} from "office-ui-fabric-react";

function BasicButtons() {
  const handleClick = () => {
    console.log("Button clicked!");
  };

  return (
    <div>
      <PrimaryButton 
        text="Primary Action" 
        onClick={handleClick} 
      />
      
      <DefaultButton 
        text="Secondary Action" 
        onClick={handleClick} 
        style={{ marginLeft: 8 }}
      />
      
      <ActionButton 
        text="Action Button"
        iconProps={{ iconName: "Add" }}
        onClick={handleClick} 
      />
    </div>
  );
}

function IconButtons() {
  return (
    <div>
      <IconButton 
        iconProps={{ iconName: "Edit" }}
        title="Edit"
        ariaLabel="Edit item"
      />
      
      <IconButton 
        iconProps={{ iconName: "Delete" }}
        title="Delete"
        ariaLabel="Delete item"
      />
      
      <IconButton 
        iconProps={{ iconName: "More" }}
        title="More actions"
        ariaLabel="More actions"
      />
    </div>
  );
}

function CompoundButtons() {
  return (
    <div>
      <CompoundButton
        text="Create Document"
        secondaryText="Start with a blank document"
        iconProps={{ iconName: "Add" }}
        onClick={() => console.log("Creating document")}
      />
      
      <CompoundButton
        text="Upload File"
        secondaryText="Choose from your computer"
        iconProps={{ iconName: "Upload" }}
        onClick={() => console.log("Uploading file")}
      />
    </div>
  );
}

function MenuButtons() {
  const menuProps: IContextualMenuProps = {
    items: [
      {
        key: "save",
        text: "Save",
        iconProps: { iconName: "Save" },
        onClick: () => console.log("Save clicked")
      },
      {
        key: "saveAs",
        text: "Save As...",
        iconProps: { iconName: "SaveAs" },
        onClick: () => console.log("Save As clicked")
      },
      {
        key: "divider1",
        itemType: ContextualMenuItemType.Divider
      },
      {
        key: "export",
        text: "Export",
        iconProps: { iconName: "Download" },
        subMenuProps: {
          items: [
            {
              key: "pdf",
              text: "Export as PDF",
              onClick: () => console.log("Export PDF")
            },
            {
              key: "word",
              text: "Export as Word",
              onClick: () => console.log("Export Word")
            }
          ]
        }
      }
    ]
  };

  return (
    <div>
      <DefaultButton
        text="File Actions"
        iconProps={{ iconName: "ChevronDown" }}
        menuProps={menuProps}
      />
      
      <SplitButton
        text="Save"
        onClick={() => console.log("Quick save")}
        menuProps={{
          items: [
            {
              key: "save",
              text: "Save",
              onClick: () => console.log("Save")
            },
            {
              key: "saveAs",
              text: "Save As...",
              onClick: () => console.log("Save As")
            }
          ]
        }}
      />
    </div>
  );
}

function DisabledButtons() {
  return (
    <div>
      <PrimaryButton 
        text="Disabled Primary" 
        disabled={true}
      />
      
      <DefaultButton 
        text="Disabled with Focus" 
        disabled={true}
        allowDisabledFocus={true}
        title="This button is disabled but can receive focus"
      />
    </div>
  );
}

/**
 * Base button component providing common functionality
 * Generally not used directly - use specific button variants instead
 */
class BaseButton extends React.Component<IButtonProps, IButtonState> {
  /** Set focus to the button */
  focus(): void;
  /** Dismiss any open menu */
  dismissMenu(): void;
  /** Open the button's menu with optional focus settings */
  openMenu(shouldFocusOnContainer?: boolean, shouldFocusOnMount?: boolean): void;
}

interface IButtonState {
  menuProps?: IContextualMenuProps;
}

interface IButtonStyles {
  /** Root button element styles */
  root?: IStyle;
  /** Root element when button is hovered */
  rootHovered?: IStyle;
  /** Root element when button is pressed */
  rootPressed?: IStyle;
  /** Root element when button is checked */
  rootChecked?: IStyle;
  /** Root element when button is checked and hovered */
  rootCheckedHovered?: IStyle;
  /** Root element when button is checked and pressed */
  rootCheckedPressed?: IStyle;
  /** Root element when button is disabled */
  rootDisabled?: IStyle;
  /** Root element when button has focus */
  rootFocused?: IStyle;
  /** Flex container holding button contents */
  flexContainer?: IStyle;
  /** Text portion of the button */
  textContainer?: IStyle;
  /** Icon portion of the button */
  icon?: IStyle;
  /** Icon when button is hovered */
  iconHovered?: IStyle;
  /** Icon when button is pressed */
  iconPressed?: IStyle;
  /** Icon when button is checked */
  iconChecked?: IStyle;
  /** Icon when button is disabled */
  iconDisabled?: IStyle;
  /** Primary text label */
  label?: IStyle;
  /** Secondary text (for compound buttons) */
  secondaryText?: IStyle;
  /** Description text (for compound buttons) */
  description?: IStyle;
  /** Menu icon styles */
  menuIcon?: IStyle;
  /** Menu icon when hovered */
  menuIconHovered?: IStyle;
  /** Menu icon when pressed */
  menuIconPressed?: IStyle;
  /** Menu icon when button is checked */
  menuIconChecked?: IStyle;
  /** Menu icon when disabled */
  menuIconDisabled?: IStyle;
  /** Split button divider */
  splitButtonDivider?: IStyle;
  /** Split button menu button */
  splitButtonMenuButton?: IStyle;
  /** Split button menu button when hovered */
  splitButtonMenuButtonHovered?: IStyle;
  /** Split button menu button when pressed */
  splitButtonMenuButtonPressed?: IStyle;
  /** Split button menu button when checked */
  splitButtonMenuButtonChecked?: IStyle;
  /** Split button menu button when disabled */
  splitButtonMenuButtonDisabled?: IStyle;
  /** Split button menu icon */
  splitButtonMenuIcon?: IStyle;
  /** Split button menu icon when disabled */
  splitButtonMenuIconDisabled?: IStyle;
  /** Screen reader text */
  screenReaderText?: IStyle;
}

interface IButtonStyleProps {
  /** Theme provided by higher-order component */
  theme: ITheme;
  /** Additional CSS class */
  className?: string;
  /** Whether the button has focus */
  focused?: boolean;
  /** Whether the button is checked */
  checked?: boolean;
  /** Whether the button is disabled */
  disabled?: boolean;
  /** Whether the button has a menu */
  hasMenu?: boolean;
  /** Whether this is a split button */
  split?: boolean;
  /** Whether the button is primary styled */
  primary?: boolean;
}

// Contextual menu interfaces for button menus
interface IContextualMenuProps {
  /** Array of menu items */
  items: IContextualMenuItem[];
  /** Target element for menu positioning */
  target?: Element | string | MouseEvent | Point;
  /** Whether the menu should be positioned above the target */
  directionalHint?: DirectionalHint;
  /** Additional CSS class */
  className?: string;
  /** Whether to use target width for menu width */
  useTargetWidth?: boolean;
  /** Whether the menu covers the target */
  coverTarget?: boolean;
  /** Gap between target and menu */
  gapSpace?: number;
  /** Beak width for callout */
  beakWidth?: number;
  /** Minimum width for the menu */
  minWidth?: number;
  /** Maximum width for the menu */
  maxWidth?: number;
  /** Whether to focus on menu open */
  shouldFocusOnMount?: boolean;
  /** Whether to focus on container */
  shouldFocusOnContainer?: boolean;
  /** Callback fired when menu is dismissed */
  onDismiss?: (ev?: any, dismissAll?: boolean) => void;
  /** Callback fired when item is clicked */
  onItemClick?: (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, item?: IContextualMenuItem) => boolean | void;
  /** Custom render function for menu list */
  onRenderMenuList?: IRenderFunction<IContextualMenuListProps>;
  /** Properties for the callout */
  calloutProps?: ICalloutProps;
  /** Title for the menu */
  title?: string;
  /** ID for the menu */
  id?: string;
  /** ARIA label */
  ariaLabel?: string;
  /** Whether to hide scroll bars */
  hidden?: boolean;
}

interface IContextualMenuItem {
  /** Unique key for the item */
  key: string;
  /** Display text */
  text?: string;
  /** Item type (normal, divider, header, section) */
  itemType?: ContextualMenuItemType;
  /** Icon properties */
  iconProps?: IIconProps;
  /** Submenu properties */
  subMenuProps?: IContextualMenuProps;
  /** Whether the item is disabled */
  disabled?: boolean;
  /** Whether the item is checked */
  checked?: boolean;
  /** Whether the item can be checked */
  canCheck?: boolean;
  /** Whether the item is split into primary and secondary actions */
  split?: boolean;
  /** Data associated with the item */
  data?: any;
  /** Callback fired when item is clicked */
  onClick?: (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, item?: IContextualMenuItem) => boolean | void;
  /** Custom render function for the item */
  onRender?: (item: IContextualMenuItem, dismissMenu: (ev?: any, dismissAll?: boolean) => void) => React.ReactNode;
  /** ARIA label */
  ariaLabel?: string;
  /** Title attribute */
  title?: string;
  /** Section properties for section items */
  sectionProps?: IContextualMenuSection;
  /** Additional CSS class */
  className?: string;
  /** Custom styles */
  style?: React.CSSProperties;
  /** Role attribute */
  role?: string;
  /** Primary disabled state (for split items) */
  primaryDisabled?: boolean;
  /** Short name for the item */
  shortName?: string;
}

enum ContextualMenuItemType {
  Normal = 0,
  Divider = 1,
  Header = 2,
  Section = 3
}

// Key codes for keyboard interactions
enum KeyCodes {
  enter = 13,
  space = 32,
  escape = 27,
  tab = 9,
  up = 38,
  down = 40,
  left = 37,
  right = 39
}