Input Components

/**
 * Text input component with validation and accessibility support
 */
function TextField(props: ITextFieldProps): JSX.Element;

interface ITextField {
  /** Set focus to the text field */
  focus(): void;
  /** Remove focus from the text field */
  blur(): void;
  /** Select all text in the field */
  select(): void;
  /** Set the selection start position */
  setSelectionStart(start: number): void;
  /** Set the selection end position */
  setSelectionEnd(end: number): void;
  /** Set the selection range */
  setSelectionRange(start: number, end: number): void;
}

interface ITextFieldProps {
  /** Reference to access component methods */
  componentRef?: IRefObject<ITextField>;
  /** Label text displayed above the input */
  label?: string;
  /** Current value of the input */
  value?: string;
  /** Default value for uncontrolled usage */
  defaultValue?: string;
  /** Placeholder text */
  placeholder?: string;
  /** Whether the input allows multiple lines */
  multiline?: boolean;
  /** Number of rows for multiline input */
  rows?: number;
  /** Maximum number of characters allowed */
  maxLength?: number;
  /** Whether the input is disabled */
  disabled?: boolean;
  /** Whether the input is read-only */
  readOnly?: boolean;
  /** Whether the input is required for form submission */
  required?: boolean;
  /** Error message to display below the input */
  errorMessage?: string;
  /** Description text displayed below the input */
  description?: string;
  /** Prefix displayed before the input text */
  prefix?: string;
  /** Suffix displayed after the input text */
  suffix?: string;
  /** Icon to display in the input */
  iconProps?: IIconProps;
  /** Whether to auto-adjust height for multiline inputs */
  autoAdjustHeight?: boolean;
  /** Whether to resize multiline inputs */
  resizable?: boolean;
  /** Whether to underline the input */
  underlined?: boolean;
  /** Whether to show a border around the input */
  borderless?: boolean;
  /** Input type (text, password, email, etc.) */
  type?: string;
  /** Whether to validate input on load */
  validateOnLoad?: boolean;
  /** Whether to validate input on focus out */
  validateOnFocusOut?: boolean;
  /** Whether to validate input on focus in */
  validateOnFocusIn?: boolean;
  /** Whether to defer validation until after user interaction */
  deferredValidationTime?: number;
  /** Callback fired when the value changes */
  onChange?: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;
  /** Callback fired when the input receives focus */
  onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  /** Callback fired when the input loses focus */
  onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  /** Callback fired on key press */
  onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  /** Callback fired on key down */
  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  /** Callback fired on key up */
  onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  /** Function to validate input and return error message */
  onGetErrorMessage?: (value: string) => string | Promise<string>;
  /** Function to notify when error message changes */
  onNotifyValidationResult?: (errorMessage: string, value: string | undefined) => void;
  /** Custom styles */
  styles?: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldStyles>;
  /** Theme provided by higher-order component */
  theme?: ITheme;
  /** Additional CSS class */
  className?: string;
  /** ARIA label */
  ariaLabel?: string;
  /** Auto-complete attribute */
  autoComplete?: string;
}

import React, { useState } from "react";
import { TextField } from "office-ui-fabric-react";

function BasicTextInput() {
  const [value, setValue] = useState("");

  return (
    <TextField
      label="Enter your name"
      value={value}
      onChange={(e, newValue) => setValue(newValue || "")}
      placeholder="Type here..."
      required
    />
  );
}

function MultilineTextInput() {
  const [description, setDescription] = useState("");

  return (
    <TextField
      label="Description"
      multiline
      rows={4}
      value={description}
      onChange={(e, newValue) => setDescription(newValue || "")}
      placeholder="Enter a description..."
      maxLength={500}
      autoAdjustHeight
    />
  );
}

function ValidatedTextInput() {
  const [email, setEmail] = useState("");

  const validateEmail = (value: string): string => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(value) ? "" : "Please enter a valid email address";
  };

  return (
    <TextField
      label="Email Address"
      type="email"
      value={email}
      onChange={(e, newValue) => setEmail(newValue || "")}
      onGetErrorMessage={validateEmail}
      validateOnFocusOut
      required
    />
  );
}

/**
 * Search input component with built-in search and clear functionality
 */
function SearchBox(props: ISearchBoxProps): JSX.Element;

interface ISearchBox {
  /** Set focus to the search box */
  focus(): void;
  /** Clear the search box value */
  clear(): void;
}

interface ISearchBoxProps {
  /** Reference to access component methods */
  componentRef?: IRefObject<ISearchBox>;
  /** Current search value */
  value?: string;
  /** Default value for uncontrolled usage */
  defaultValue?: string;
  /** Placeholder text */
  placeholder?: string;
  /** Whether the search box is disabled */
  disabled?: boolean;
  /** Whether to show the search icon */
  showIcon?: boolean;
  /** Whether the search box is underlined */
  underlined?: boolean;
  /** Delay in milliseconds before firing onChange */
  debounceTime?: number;
  /** Callback fired when search value changes */
  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, newValue?: string) => void;
  /** Callback fired when search is cleared */
  onClear?: (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
  /** Callback fired when search is submitted */
  onSearch?: (newValue: any) => void;
  /** Callback fired when escape key is pressed */
  onEscape?: (ev?: React.KeyboardEvent<HTMLInputElement>) => void;
  /** Callback fired when focus changes */
  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
  /** Callback fired when blur occurs */
  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
  /** Custom styles */
  styles?: IStyleFunctionOrObject<ISearchBoxStyleProps, ISearchBoxStyles>;
  /** Theme provided by higher-order component */
  theme?: ITheme;
  /** Additional CSS class */
  className?: string;
}

/**
 * Dropdown selection component supporting single and multi-select modes
 */
function Dropdown(props: IDropdownProps): JSX.Element;

interface IDropdown {
  /** Currently selected options */
  selectedOptions: IDropdownOption[];
  /** Set focus to the dropdown */
  focus(): void;
}

interface IDropdownProps {
  /** Reference to access component methods */
  componentRef?: IRefObject<IDropdown>;
  /** Array of options to display */
  options: IDropdownOption[];
  /** Key of the selected option (single select) */
  selectedKey?: string | number | null;
  /** Array of keys for selected options (multi-select) */
  selectedKeys?: (string | number)[];
  /** Default selected key for uncontrolled usage */
  defaultSelectedKey?: string | number;
  /** Default selected keys for uncontrolled usage */
  defaultSelectedKeys?: (string | number)[];
  /** Whether to allow multiple selections */
  multiSelect?: boolean;
  /** Label text displayed above the dropdown */
  label?: string;
  /** Placeholder text when no option is selected */
  placeholder?: string;
  /** Whether the dropdown is disabled */
  disabled?: boolean;
  /** Whether the dropdown is required */
  required?: boolean;
  /** Error message to display below the dropdown */
  errorMessage?: string;
  /** Whether to show a border around the dropdown */
  bordered?: boolean;
  /** Custom render function for dropdown title */
  onRenderTitle?: (selectedOptions?: IDropdownOption[]) => React.ReactNode;
  /** Custom render function for individual options */
  onRenderOption?: (option?: IDropdownOption, defaultRender?: (props?: IDropdownOption) => React.ReactNode) => React.ReactNode;
  /** Custom render function for the dropdown caret */
  onRenderCaretDown?: IRenderFunction<IDropdownProps>;
  /** Custom render function for placeholder text */
  onRenderPlaceholder?: IRenderFunction<IDropdownProps>;
  /** Callback fired when selection changes */
  onChange?: (event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption, index?: number) => void;
  /** Callback fired when dropdown opens or closes */
  onDismiss?: () => void;
  /** Custom styles */
  styles?: IStyleFunctionOrObject<IDropdownStyleProps, IDropdownStyles>;
  /** Theme provided by higher-order component */
  theme?: ITheme;
  /** Additional CSS class */
  className?: string;
  /** Callout properties for the dropdown menu */
  calloutProps?: ICalloutProps;
  /** Panel properties for responsive behavior */
  panelProps?: IPanelProps;
  /** Notification properties */
  notificationProps?: INotificationProps;
}

interface IDropdownOption {
  /** Unique key for the option */
  key: string | number;
  /** Display text for the option */
  text: string;
  /** Additional data associated with the option */
  data?: any;
  /** Whether the option is disabled */
  disabled?: boolean;
  /** Whether the option is hidden */
  hidden?: boolean;
  /** Whether the option is selected */
  selected?: boolean;
  /** Title attribute for the option */
  title?: string;
  /** ARIA label for the option */
  ariaLabel?: string;
  /** Type of option (header, divider, etc.) */
  itemType?: DropdownMenuItemType;
  /** Index of the option */
  index?: number;
}

enum DropdownMenuItemType {
  Normal = 0,
  Divider = 1,
  Header = 2
}

import React, { useState } from "react";
import { Dropdown, IDropdownOption } from "office-ui-fabric-react";

function BasicDropdown() {
  const [selectedKey, setSelectedKey] = useState<string | number | undefined>();

  const options: IDropdownOption[] = [
    { key: "option1", text: "Option 1" },
    { key: "option2", text: "Option 2" },
    { key: "option3", text: "Option 3", disabled: true },
    { key: "option4", text: "Option 4" }
  ];

  return (
    <Dropdown
      label="Select an option"
      selectedKey={selectedKey}
      onChange={(e, option) => setSelectedKey(option?.key)}
      options={options}
      placeholder="Choose an option"
    />
  );
}

function MultiSelectDropdown() {
  const [selectedKeys, setSelectedKeys] = useState<(string | number)[]>([]);

  const options: IDropdownOption[] = [
    { key: "cat1", text: "Category 1" },
    { key: "cat2", text: "Category 2" },
    { key: "cat3", text: "Category 3" },
    { key: "cat4", text: "Category 4" }
  ];

  return (
    <Dropdown
      label="Select categories"
      multiSelect
      selectedKeys={selectedKeys}
      onChange={(e, option) => {
        if (option) {
          setSelectedKeys(prev => 
            option.selected 
              ? [...prev, option.key]
              : prev.filter(key => key !== option.key)
          );
        }
      }}
      options={options}
      placeholder="Choose categories"
    />
  );
}

/**
 * Editable dropdown component combining text input with dropdown selection
 */
function ComboBox(props: IComboBoxProps): JSX.Element;

interface IComboBox {
  /** Set focus to the combo box */
  focus(): void;
  /** Dismiss any open callout */
  dismissMenu(): void;
}

interface IComboBoxProps {
  /** Reference to access component methods */
  componentRef?: IRefObject<IComboBox>;
  /** Array of options to display */
  options: IComboBoxOption[];
  /** Text value of the combo box */
  text?: string;
  /** Default text for uncontrolled usage */
  defaultText?: string;
  /** Currently selected key */
  selectedKey?: string | number | null;
  /** Default selected key for uncontrolled usage */
  defaultSelectedKey?: string | number | null;
  /** Whether to allow free form text entry */
  allowFreeform?: boolean;
  /** Whether to auto-complete text based on options */
  autoComplete?: "on" | "off";
  /** Label text displayed above the combo box */
  label?: string;
  /** Placeholder text */
  placeholder?: string;
  /** Whether the combo box is disabled */
  disabled?: boolean;
  /** Whether the combo box is required */
  required?: boolean;
  /** Error message to display */
  errorMessage?: string;
  /** Whether to open menu on focus */
  openOnKeyboardFocus?: boolean;
  /** Whether to use the combo box as a menu only (no text input) */
  useComboBoxAsMenuWidth?: boolean;
  /** Custom render function for options */
  onRenderOption?: (option: IComboBoxOption) => React.ReactNode;
  /** Custom render function for the input field */
  onRenderInput?: (props: IComboBoxProps) => React.ReactNode;
  /** Callback fired when text changes */
  onChange?: (event: React.FormEvent<IComboBox>, option?: IComboBoxOption, index?: number, value?: string) => void;
  /** Callback fired when input receives focus */
  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
  /** Callback fired when input loses focus */
  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
  /** Callback fired when dropdown opens */
  onMenuOpen?: () => void;
  /** Callback fired when dropdown closes */
  onMenuDismissed?: () => void;
  /** Callback fired to resolve suggestions dynamically */
  onResolveOptions?: (options: IComboBoxOption[], filter: string) => IComboBoxOption[] | Promise<IComboBoxOption[]>;
  /** Custom styles */
  styles?: IStyleFunctionOrObject<IComboBoxStyleProps, IComboBoxStyles>;
  /** Theme provided by higher-order component */
  theme?: ITheme;
  /** Additional CSS class */
  className?: string;
}

interface IComboBoxOption {
  /** Unique key for the option */
  key: string | number;
  /** Display text for the option */
  text: string;
  /** Additional data associated with the option */
  data?: any;
  /** Whether the option is disabled */
  disabled?: boolean;
  /** Whether the option is hidden */
  hidden?: boolean;
  /** Whether the option is selected */
  selected?: boolean;
  /** Type of option (header, divider, etc.) */
  itemType?: ComboBoxMenuItemType;
  /** Index of the option */
  index?: number;
  /** ARIA label for the option */
  ariaLabel?: string;
  /** Title attribute for the option */
  title?: string;
}

enum ComboBoxMenuItemType {
  Normal = 0,
  Divider = 1,
  Header = 2
}

/**
 * Checkbox input component with indeterminate state support
 */
function Checkbox(props: ICheckboxProps): JSX.Element;

interface ICheckbox {
  /** Set focus to the checkbox */
  focus(): void;
  /** Current checked state */
  checked: boolean;
  /** Current indeterminate state */
  indeterminate: boolean;
}

interface ICheckboxProps {
  /** Reference to access component methods */
  componentRef?: IRefObject<ICheckbox>;
  /** Whether the checkbox is checked */
  checked?: boolean;
  /** Default checked state for uncontrolled usage */
  defaultChecked?: boolean;
  /** Whether the checkbox is in indeterminate state */
  indeterminate?: boolean;
  /** Default indeterminate state for uncontrolled usage */
  defaultIndeterminate?: boolean;
  /** Label text for the checkbox */
  label?: string;
  /** Whether the checkbox is disabled */
  disabled?: boolean;
  /** Whether to reverse the label and checkbox positions */
  reversed?: boolean;
  /** Custom render function for the label */
  onRenderLabel?: IRenderFunction<ICheckboxProps>;
  /** Callback fired when checked state changes */
  onChange?: (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean) => void;
  /** Custom styles */
  styles?: IStyleFunctionOrObject<ICheckboxStyleProps, ICheckboxStyles>;
  /** Theme provided by higher-order component */
  theme?: ITheme;
  /** Additional CSS class */
  className?: string;
  /** HTML id attribute */
  id?: string;
  /** ARIA label */
  ariaLabel?: string;
  /** ARIA labelledby */
  ariaLabelledBy?: string;
  /** ARIA describedby */
  ariaDescribedBy?: string;
  /** Tab index */
  tabIndex?: number;
  /** Title attribute */
  title?: string;
}

/**
 * Radio button group component for mutually exclusive selections
 */
function ChoiceGroup(props: IChoiceGroupProps): JSX.Element;

interface IChoiceGroup {
  /** Set focus to the choice group */
  focus(): void;
  /** Currently selected option */
  checkedOption: IChoiceGroupOption | undefined;
}

interface IChoiceGroupProps {
  /** Reference to access component methods */
  componentRef?: IRefObject<IChoiceGroup>;
  /** Array of choice options */
  options?: IChoiceGroupOption[];
  /** Key of the default selected option */
  defaultSelectedKey?: string | number;
  /** Key of the selected option */
  selectedKey?: string | number;
  /** Label for the choice group */
  label?: string;
  /** Whether the choice group is required */
  required?: boolean;
  /** Whether the choice group is disabled */
  disabled?: boolean;
  /** Custom render function for the label */
  onRenderLabel?: (props?: IChoiceGroupProps) => JSX.Element | null;
  /** Callback fired when selection changes */
  onChange?: (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IChoiceGroupOption) => void;
  /** Custom styles */
  styles?: IStyleFunctionOrObject<IChoiceGroupStyleProps, IChoiceGroupStyles>;
  /** Theme provided by higher-order component */
  theme?: ITheme;
  /** Additional CSS class */
  className?: string;
  /** ARIA labelledby */
  ariaLabelledBy?: string;
}

interface IChoiceGroupOption {
  /** Unique key for the option */
  key: string | number;
  /** Display text for the option */
  text: string;
  /** Whether the option is disabled */
  disabled?: boolean;
  /** Icon to display with the option */
  iconProps?: IIconProps;
  /** Image to display with the option */
  imageSrc?: string;
  /** Alt text for the image */
  imageAlt?: string;
  /** Custom render function for the label */
  onRenderLabel?: (props?: IChoiceGroupOption) => React.ReactNode;
  /** Custom render function for the field */
  onRenderField?: (props?: IChoiceGroupOption, defaultRender?: (props?: IChoiceGroupOption) => React.ReactNode) => React.ReactNode;
  /** ARIA label */
  ariaLabel?: string;
  /** HTML id attribute */
  id?: string;
  /** Label position relative to the option */
  labelId?: string;
  /** Custom styles for the option */
  styles?: Partial<IChoiceGroupOptionStyles>;
}

/**
 * Toggle switch component for boolean states
 */
function Toggle(props: IToggleProps): JSX.Element;

interface IToggle {
  /** Set focus to the toggle */
  focus(): void;
  /** Current checked state */
  checked: boolean;
}

interface IToggleProps {
  /** Reference to access component methods */
  componentRef?: IRefObject<IToggle>;
  /** Whether the toggle is checked */
  checked?: boolean;
  /** Default checked state for uncontrolled usage */
  defaultChecked?: boolean;
  /** Label text for the toggle */
  label?: string;
  /** Text to display when toggle is on */
  onText?: string;
  /** Text to display when toggle is off */
  offText?: string;
  /** ARIA label */
  ariaLabel?: string;
  /** Whether the toggle is disabled */
  disabled?: boolean;
  /** Whether the toggle is required */
  required?: boolean;
  /** Whether to inline the label and toggle */
  inlineLabel?: boolean;
  /** Custom render function for the label */
  onRenderLabel?: IRenderFunction<IToggleProps>;
  /** Callback fired when toggle state changes */
  onChange?: (event: React.MouseEvent<HTMLElement>, checked?: boolean) => void;
  /** Callback fired when toggle receives focus */
  onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
  /** Callback fired when toggle loses focus */
  onBlur?: (ev: React.FocusEvent<HTMLElement>) => void;
  /** Custom styles */
  styles?: IStyleFunctionOrObject<IToggleStyleProps, IToggleStyles>;
  /** Theme provided by higher-order component */
  theme?: ITheme;
  /** Additional CSS class */
  className?: string;
  /** HTML role attribute */
  role?: string;
}

/**
 * Range slider component for numeric value selection
 */
function Slider(props: ISliderProps): JSX.Element;

interface ISlider {
  /** Set focus to the slider */
  focus(): void;
  /** Current value of the slider */
  value: number | undefined;
}

interface ISliderProps {
  /** Reference to access component methods */
  componentRef?: IRefObject<ISlider>;
  /** Current value of the slider */
  value?: number;
  /** Default value for uncontrolled usage */
  defaultValue?: number;
  /** Minimum value */
  min?: number;
  /** Maximum value */
  max?: number;
  /** Step increment */
  step?: number;
  /** Label text for the slider */
  label?: string;
  /** Whether to show the current value */
  showValue?: boolean;
  /** Whether the slider is disabled */
  disabled?: boolean;
  /** Whether the slider is vertical */
  vertical?: boolean;
  /** Whether to snap to step increments */
  snapToStep?: boolean;
  /** Custom render function for the label */
  onRenderLabel?: IRenderFunction<ISliderProps>;
  /** Callback fired when value changes */
  onChange?: (value: number) => void;
  /** Custom styles */
  styles?: IStyleFunctionOrObject<ISliderStyleProps, ISliderStyles>;
  /** Theme provided by higher-order component */
  theme?: ITheme;
  /** Additional CSS class */
  className?: string;
  /** ARIA label */
  ariaLabel?: string;
  /** ARIA labelledby */
  ariaLabelledBy?: string;
  /** ARIA valuetext function */
  ariaValueText?: (value: number) => string;
  /** Button properties for the slider thumb */
  buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
}

/**
 * Numeric input component with increment/decrement buttons
 */
function SpinButton(props: ISpinButtonProps): JSX.Element;

interface ISpinButton {
  /** Set focus to the spin button */
  focus(): void;
  /** Current value of the spin button */
  value: string | undefined;
}

interface ISpinButtonProps {
  /** Reference to access component methods */
  componentRef?: IRefObject<ISpinButton>;
  /** Current value of the spin button */
  value?: string;
  /** Default value for uncontrolled usage */
  defaultValue?: string;
  /** Minimum value */
  min?: number;
  /** Maximum value */
  max?: number;
  /** Step increment */
  step?: number;
  /** Label text for the spin button */
  label?: string;
  /** Whether the spin button is disabled */
  disabled?: boolean;
  /** Icon properties for the increment button */
  incrementButtonIcon?: IIconProps;
  /** Icon properties for the decrement button */
  decrementButtonIcon?: IIconProps;
  /** ARIA label for the increment button */
  incrementButtonAriaLabel?: string;
  /** ARIA label for the decrement button */
  decrementButtonAriaLabel?: string;
  /** Custom validation function */
  onValidate?: (value: string, event?: React.SyntheticEvent<HTMLElement>) => string | void;
  /** Custom increment function */
  onIncrement?: (value: string) => string | void;
  /** Custom decrement function */
  onDecrement?: (value: string) => string | void;
  /** Callback fired when value changes */
  onChange?: (event: React.SyntheticEvent<HTMLElement>, newValue?: string) => void;
  /** Callback fired when focus is received */
  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
  /** Callback fired when focus is lost */
  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
  /** Custom styles */
  styles?: IStyleFunctionOrObject<ISpinButtonStyleProps, ISpinButtonStyles>;
  /** Theme provided by higher-order component */
  theme?: ITheme;
  /** Additional CSS class */
  className?: string;
  /** ARIA label */
  ariaLabel?: string;
  /** ARIA labelledby */
  ariaLabelledBy?: string;
  /** ARIA describedby */
  ariaDescribedBy?: string;
  /** Precision for decimal values */
  precision?: number;
}

/**
 * Star rating input component for user feedback
 */
function Rating(props: IRatingProps): JSX.Element;

interface IRating {
  /** Current rating value */
  rating: number | null;
}

interface IRatingProps {
  /** Reference to access component methods */
  componentRef?: IRefObject<IRating>;
  /** Current rating value */
  rating?: number;
  /** Default rating for uncontrolled usage */
  defaultRating?: number;
  /** Maximum rating value */
  max?: number;
  /** Whether to allow zero rating */
  allowZeroStars?: boolean;
  /** Size of the rating control */
  size?: RatingSize;
  /** Whether the rating is disabled */
  disabled?: boolean;
  /** Whether the rating is read-only */
  readOnly?: boolean;
  /** Icon to use for filled stars */
  icon?: string;
  /** Icon to use for unfilled stars */
  unselectedIcon?: string;
  /** Custom render function for rating stars */
  onRenderStar?: (props: IRatingStarProps) => React.ReactNode;
  /** Callback fired when rating changes */
  onChange?: (event: React.FocusEvent<HTMLElement>, rating?: number) => void;
  /** Custom styles */
  styles?: IStyleFunctionOrObject<IRatingStyleProps, IRatingStyles>;
  /** Theme provided by higher-order component */
  theme?: ITheme;
  /** Additional CSS class */
  className?: string;
  /** ARIA label */
  ariaLabel?: string;
  /** ARIA labelledby */
  ariaLabelledBy?: string;
  /** Function to generate ARIA label for each star */
  getAriaLabel?: (rating: number, max: number) => string;
}

enum RatingSize {
  Small = 0,
  Large = 1
}

interface IRatingStarProps {
  /** Whether the star is filled */
  fillPercentage: number;
  /** Whether the star is disabled */
  disabled?: boolean;
  /** Whether the star is selected */
  selected?: boolean;
  /** Icon name for the star */
  icon?: string;
  /** Unique ID for the star */
  id: string;
}

import React, { useState } from "react";
import { Rating, RatingSize } from "office-ui-fabric-react";

function BasicRating() {
  const [rating, setRating] = useState<number>(0);

  return (
    <Rating
      rating={rating}
      onChange={(e, newRating) => setRating(newRating || 0)}
      max={5}
      ariaLabel="Rate this item"
    />
  );
}

function LargeRating() {
  const [rating, setRating] = useState<number>(3);

  return (
    <Rating
      rating={rating}
      onChange={(e, newRating) => setRating(newRating || 0)}
      size={RatingSize.Large}
      max={5}
      allowZeroStars
      ariaLabel="Product rating"
    />
  );
}

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

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

interface IRenderFunction<TProps> {
  (props?: TProps, defaultRender?: (props?: TProps) => React.ReactNode | null): React.ReactNode | null;
}

// Icon interface used across components
interface IIconProps {
  iconName?: string;
  ariaLabel?: string;
  title?: string;
  className?: string;
  imageProps?: React.ImgHTMLAttributes<HTMLImageElement>;
  imageErrorAs?: React.ComponentType<React.ImgHTMLAttributes<HTMLImageElement>>;
  styles?: IStyleFunctionOrObject<IIconStyleProps, IIconStyles>;
  theme?: ITheme;
}

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