Data Display Components

/**
 * High-performance data table component
 * @param props - Details list properties
 * @returns JSX element for details list
 */
function DetailsList<T = any>(props: IDetailsListProps<T>): JSX.Element;

/**
 * Details list with loading shimmer effects
 * @param props - Shimmered details list properties
 * @returns JSX element for shimmered details list
 */
function ShimmeredDetailsList<T = any>(props: IShimmeredDetailsListProps<T>): JSX.Element;

interface IDetailsListProps<T = any> {
  /** Data items to display */
  items: T[];
  /** Column definitions */
  columns: IColumn[];
  /** Selection manager */
  selection?: ISelection;
  /** Selection mode */
  selectionMode?: SelectionMode;
  /** Layout mode */
  layoutMode?: DetailsListLayoutMode;
  /** Constrain mode for columns */
  constrainMode?: ConstrainMode;
  /** Checkbox visibility */
  checkboxVisibility?: CheckboxVisibility;
  /** Item invocation handler */
  onItemInvoked?: (item: T, index?: number, event?: Event) => void;
  /** Custom row renderer */
  onRenderRow?: (props?: IDetailsRowProps, defaultRender?: (props?: IDetailsRowProps) => JSX.Element | null) => JSX.Element | null;
  /** Custom cell renderer */
  onRenderItemColumn?: (item?: T, index?: number, column?: IColumn) => React.ReactNode;
  /** Whether list is compact */
  compact?: boolean;
  /** Enable update animations */
  enableUpdateAnimations?: boolean;
  /** Custom styles */
  styles?: IDetailsListStyles;
}

interface IColumn {
  /** Unique column key */
  key: string;
  /** Display name */
  name: string;
  /** Header display name */
  headerName?: string;
  /** Field name in data item */
  fieldName?: string;
  /** Minimum column width */
  minWidth: number;
  /** Maximum column width */
  maxWidth?: number;
  /** Current column width */
  currentWidth?: number;
  /** Whether column is resizable */
  isResizable?: boolean;
  /** Whether column is sortable */
  isSorted?: boolean;
  /** Sort direction */
  isSortedDescending?: boolean;
  /** Whether column is multi-line */
  isMultiline?: boolean;
  /** Text alignment */
  columnActionsMode?: ColumnActionsMode;
  /** Icon name for column header */
  iconName?: string;
  /** Custom cell renderer */
  onRender?: (item?: any, index?: number, column?: IColumn) => React.ReactNode;
  /** Column click handler */
  onColumnClick?: (event: React.MouseEvent<HTMLElement>, column: IColumn) => void;
  /** Additional data */
  data?: any;
}

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

enum DetailsListLayoutMode {
  fixedColumns = 0,
  justified = 1,
}

enum CheckboxVisibility {
  onHover = 0,
  always = 1,
  hidden = 2,
}

import React, { useState, useMemo } from "react";
import { 
  DetailsList, 
  IColumn, 
  Selection, 
  SelectionMode,
  ISelection
} from "@fluentui/react";

interface IDocument {
  id: number;
  name: string;
  modified: Date;
  size: number;
  author: string;
}

function DocumentList() {
  const [items, setItems] = useState<IDocument[]>([
    { id: 1, name: 'Document1.pdf', modified: new Date(), size: 1024000, author: 'John Doe' },
    { id: 2, name: 'Spreadsheet.xlsx', modified: new Date(), size: 2048000, author: 'Jane Smith' },
  ]);

  const [sortedColumn, setSortedColumn] = useState<string>('');
  const [isSortedDescending, setIsSortedDescending] = useState(false);

  const selection = useMemo(() => new Selection({
    onSelectionChanged: () => {
      console.log('Selection changed:', selection.getSelection());
    }
  }), []);

  const columns: IColumn[] = [
    {
      key: 'name',
      name: 'Name',
      fieldName: 'name',
      minWidth: 100,
      maxWidth: 200,
      isResizable: true,
      isSorted: sortedColumn === 'name',
      isSortedDescending: isSortedDescending,
      onColumnClick: onColumnClick,
    },
    {
      key: 'modified',
      name: 'Modified',
      fieldName: 'modified',
      minWidth: 70,
      maxWidth: 90,
      isResizable: true,
      onRender: (item: IDocument) => item.modified.toLocaleDateString(),
    },
    {
      key: 'size',
      name: 'Size',
      fieldName: 'size',
      minWidth: 70,
      maxWidth: 90,
      isResizable: true,
      onRender: (item: IDocument) => `${(item.size / 1024).toFixed(1)} KB`,
    },
    {
      key: 'author',
      name: 'Author',
      fieldName: 'author',
      minWidth: 100,
      maxWidth: 150,
      isResizable: true,
    },
  ];

  function onColumnClick(event: React.MouseEvent<HTMLElement>, column: IColumn) {
    const newIsSortedDescending = column.key === sortedColumn ? !isSortedDescending : false;
    const sortedItems = [...items].sort((a, b) => {
      const aVal = a[column.fieldName as keyof IDocument];
      const bVal = b[column.fieldName as keyof IDocument];
      
      if (aVal < bVal) return newIsSortedDescending ? 1 : -1;
      if (aVal > bVal) return newIsSortedDescending ? -1 : 1;
      return 0;
    });

    setItems(sortedItems);
    setSortedColumn(column.key);
    setIsSortedDescending(newIsSortedDescending);
  }

  return (
    <DetailsList
      items={items}
      columns={columns}
      selection={selection}
      selectionMode={SelectionMode.multiple}
      onItemInvoked={(item) => console.log('Invoked:', item.name)}
      layoutMode={DetailsListLayoutMode.justified}
      constrainMode={ConstrainMode.horizontalConstrained}
    />
  );
}

/**
 * Virtualized list component for large datasets
 * @param props - List properties
 * @returns JSX element for list
 */
function List<T = any>(props: IListProps<T>): JSX.Element;

interface IListProps<T = any> {
  /** Items to render */
  items?: T[];
  /** Item height or height function */
  getItemHeight?: (itemIndex: number) => number;
  /** Render function for each item */
  onRenderCell?: (item?: T, index?: number, isScrolling?: boolean) => React.ReactNode;
  /** Page size for virtualization */
  getPageSpecification?: (itemIndex?: number, visibleRect?: IRectangle) => IPageSpecification;
  /** Scroll to mode */
  scrollToMode?: ScrollToMode;
  /** Custom styles */
  styles?: any;
}

enum ScrollToMode {
  auto = 0,
  top = 1,
  bottom = 2,
  center = 3,
}

/**
 * List with hierarchical grouping support
 * @param props - Grouped list properties
 * @returns JSX element for grouped list
 */
function GroupedList<T = any>(props: IGroupedListProps<T>): JSX.Element;

/**
 * Next generation grouped list (unstable)
 * @param props - Grouped list v2 properties
 * @returns JSX element for grouped list v2
 */
function GroupedListV2_unstable<T = any>(props: IGroupedListV2Props<T>): JSX.Element;

interface IGroupedListProps<T = any> {
  /** Items to display */
  items: T[];
  /** Group definitions */
  groups?: IGroup[];
  /** Selection manager */
  selection?: ISelection;
  /** Selection mode */
  selectionMode?: SelectionMode;
  /** Custom item renderer */
  onRenderCell?: (nestingDepth?: number, item?: T, itemIndex?: number) => React.ReactNode;
  /** Group header renderer */
  onRenderGroupHeader?: (props?: IGroupHeaderProps, defaultRender?: (props?: IGroupHeaderProps) => JSX.Element | null) => JSX.Element | null;
  /** Group footer renderer */
  onRenderGroupFooter?: (props?: IGroupFooterProps, defaultRender?: (props?: IGroupFooterProps) => JSX.Element | null) => JSX.Element | null;
  /** Group expand/collapse handler */
  onGroupExpandStateChanged?: (isSomeGroupExpanded: boolean) => void;
}

interface IGroup {
  /** Group key */
  key: string;
  /** Group name */
  name: string;
  /** Start index in items array */
  startIndex: number;
  /** Number of items in group */
  count: number;
  /** Nesting level */
  level?: number;
  /** Whether group is expanded */
  isExpanded?: boolean;
  /** Whether group is loading */
  isShowingAll?: boolean;
  /** Whether group is collapsible */
  isCollapsed?: boolean;
  /** Child groups */
  children?: IGroup[];
  /** Additional data */
  data?: any;
}

/**
 * Card component for document previews
 * @param props - Document card properties
 * @returns JSX element for document card
 */
function DocumentCard(props: IDocumentCardProps): JSX.Element;

/**
 * Document card action buttons
 * @param props - Document card actions properties
 * @returns JSX element for document card actions
 */
function DocumentCardActions(props: IDocumentCardActionsProps): JSX.Element;

/**
 * Document card activity section
 * @param props - Document card activity properties
 * @returns JSX element for document card activity
 */
function DocumentCardActivity(props: IDocumentCardActivityProps): JSX.Element;

/**
 * Document card details section
 * @param props - Document card details properties
 * @returns JSX element for document card details
 */
function DocumentCardDetails(props: IDocumentCardDetailsProps): JSX.Element;

/**
 * Document card image preview
 * @param props - Document card image properties
 * @returns JSX element for document card image
 */
function DocumentCardImage(props: IDocumentCardImageProps): JSX.Element;

interface IDocumentCardProps {
  /** Card type */
  type?: DocumentCardType;
  /** Click handler */
  onClick?: (event?: React.SyntheticEvent<HTMLElement>) => void;
  /** Hover handler */
  onClickHref?: string;
  /** Custom styles */
  styles?: IDocumentCardStyles;
  /** Theme */
  theme?: ITheme;
}

enum DocumentCardType {
  normal = 0,
  compact = 1,
}

import { 
  DocumentCard, 
  DocumentCardActivity, 
  DocumentCardActions, 
  DocumentCardDetails, 
  DocumentCardImage, 
  DocumentCardPreview, 
  DocumentCardTitle,
  DocumentCardType,
  IDocumentCardActivityPerson
} from "@fluentui/react";

function DocumentCardExample() {
  const people: IDocumentCardActivityPerson[] = [
    { name: 'John Doe', profileImageSrc: 'https://example.com/john.jpg' },
    { name: 'Jane Smith', profileImageSrc: 'https://example.com/jane.jpg' },
  ];

  return (
    <DocumentCard
      type={DocumentCardType.normal}
      onClick={() => console.log('Card clicked')}
    >
      <DocumentCardPreview
        previewImages={[
          {
            previewImageSrc: 'https://example.com/preview.jpg',
            width: 318,
            height: 196,
          },
        ]}
      />
      <DocumentCardDetails>
        <DocumentCardTitle
          title="Quarterly Report Q3 2023"
          shouldTruncate
        />
        <DocumentCardActivity
          activity="Modified 2 hours ago"
          people={people}
        />
      </DocumentCardDetails>
      <DocumentCardActions
        actions={[
          { iconProps: { iconName: 'Share' }, onClick: () => console.log('Share') },
          { iconProps: { iconName: 'Pin' }, onClick: () => console.log('Pin') },
          { iconProps: { iconName: 'Redo' }, onClick: () => console.log('Redo') },
        ]}
      />
    </DocumentCard>
  );
}

/**
 * Component for displaying person information
 * @param props - Persona properties
 * @returns JSX element for persona
 */
function Persona(props: IPersonaProps): JSX.Element;

/**
 * Circular person photo/initials component
 * @param props - Persona coin properties
 * @returns JSX element for persona coin
 */
function PersonaCoin(props: IPersonaCoinProps): JSX.Element;

/**
 * Online status indicator for persona
 * @param props - Persona presence properties
 * @returns JSX element for persona presence
 */
function PersonaPresence(props: IPersonaPresenceProps): JSX.Element;

interface IPersonaProps extends IPersonaSharedProps {
  /** Primary text (name) */
  text?: string;
  /** Secondary text (title/role) */
  secondaryText?: string;
  /** Tertiary text (department) */
  tertiaryText?: string;
  /** Optional text (additional info) */
  optionalText?: string;
  /** Whether to hide persona details */
  hidePersonaDetails?: boolean;
  /** Click handler */
  onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
  /** Custom styles */
  styles?: IPersonaStyles;
}

interface IPersonaSharedProps {
  /** Person's image URL */
  imageUrl?: string;
  /** Alternative image URL */
  imageAlt?: string;
  /** Image initials */
  imageInitials?: string;
  /** Initials color */
  initialsColor?: PersonaInitialsColor;
  /** Presence status */
  presence?: PersonaPresence;
  /** Custom presence title */
  presenceTitle?: string;
  /** Persona size */
  size?: PersonaSize;
  /** Whether persona allows phone initials */
  allowPhoneInitials?: boolean;
  /** Component ref */
  componentRef?: IRefObject<IPersona>;
}

enum PersonaSize {
  size8 = 1,
  size24 = 0,
  size32 = 2,
  size40 = 3,
  size48 = 4,
  size56 = 16,
  size72 = 5,
  size100 = 6,
  size120 = 7,
}

enum PersonaPresence {
  none = 0,
  offline = 1,
  online = 2,
  away = 3,
  dnd = 4,
  blocked = 5,
  busy = 6,
}

enum PersonaInitialsColor {
  lightBlue = 0,
  blue = 1,
  darkBlue = 2,
  teal = 3,
  lightGreen = 4,
  green = 5,
  darkGreen = 6,
  lightPink = 7,
  pink = 8,
  magenta = 9,
  purple = 10,
  orange = 11,
  rust = 12,
  gold = 13,
  warmGray = 14,
  coolGray = 15,
  gray = 16,
  cyan = 17,
  red = 18,
  transparent = 19,
}

/**
 * Component for displaying multiple person photos
 * @param props - Facepile properties
 * @returns JSX element for facepile
 */
function Facepile(props: IFacepileProps): JSX.Element;

interface IFacepileProps {
  /** Array of personas to display */
  personas: IFacepilePersona[];
  /** Maximum personas to show before overflow */
  maxDisplayablePersonas?: number;
  /** Overflow button type */
  overflowButtonType?: OverflowButtonType;
  /** Overflow button properties */
  overflowButtonProps?: IButtonProps;
  /** Add button properties */
  addButtonProps?: IButtonProps;
  /** Show add button */
  showAddButton?: boolean;
  /** Show tooltip on hover */
  showTooltip?: boolean;
  /** Click handler for personas */
  onRenderPersona?: (props: IFacepilePersona) => JSX.Element;
  /** Custom styles */
  styles?: IFacepileStyles;
}

interface IFacepilePersona extends IPersonaSharedProps {
  /** Person's name */
  personaName?: string;
  /** Click handler */
  onClick?: (event?: React.MouseEvent<HTMLElement>, persona?: IFacepilePersona, index?: number) => void;
  /** Custom data */
  data?: any;
}

enum OverflowButtonType {
  none = 0,
  descriptive = 1,
  more = 2,
  downArrow = 3,
}

import { 
  Persona, 
  PersonaSize, 
  PersonaPresence, 
  Facepile, 
  IFacepilePersona 
} from "@fluentui/react";

// Single persona
<Persona
  text="John Doe"
  secondaryText="Software Engineer"
  tertiaryText="Engineering Team"
  size={PersonaSize.size72}
  presence={PersonaPresence.online}
  imageUrl="https://example.com/john.jpg"
/>

// Facepile with multiple personas
const personas: IFacepilePersona[] = [
  {
    personaName: 'John Doe',
    imageUrl: 'https://example.com/john.jpg',
  },
  {
    personaName: 'Jane Smith',
    imageInitials: 'JS',
    presence: PersonaPresence.away,
  },
  {
    personaName: 'Bob Johnson',
    imageInitials: 'BJ',
    presence: PersonaPresence.busy,
  },
];

<Facepile
  personas={personas}
  maxDisplayablePersonas={3}
  showTooltip={true}
  onRenderPersona={(persona) => (
    <Persona
      text={persona.personaName}
      size={PersonaSize.size32}
      {...persona}
    />
  )}
/>

/**
 * Build column definitions from items array
 * @param items - Data items
 * @param canResizeColumns - Whether columns can be resized
 * @param onColumnClick - Column click handler
 * @param sortedColumnKey - Currently sorted column
 * @param isSortedDescending - Sort direction
 * @param groupedColumnKey - Grouped column key
 * @param isMultiline - Whether columns are multiline
 * @returns Array of column definitions
 */
function buildColumns<T>(
  items: T[],
  canResizeColumns?: boolean,
  onColumnClick?: (event: React.MouseEvent<HTMLElement>, column: IColumn) => void,
  sortedColumnKey?: string,
  isSortedDescending?: boolean,
  groupedColumnKey?: string,
  isMultiline?: boolean
): IColumn[];

/**
 * Get cell styles for details list
 * @param props - Cell style properties
 * @returns Cell styles object
 */
function getCellStyles(props: ICellStyleProps): any;

/**
 * Get details list styles
 * @param props - Details list style properties
 * @returns Details list styles object
 */
function getDetailsListStyles(props: IDetailsListStyleProps): IDetailsListStyles;

/**
 * Activity feed item component with icon, content, and timestamp
 * @param props - Activity item properties
 * @returns JSX element for activity item
 */
function ActivityItem(props: IActivityItemProps): JSX.Element;

interface IActivityItemProps {
  /** Key for the activity item */
  key?: string;
  /** Activity description text */
  activityDescription?: string | JSX.Element[];
  /** Activity description text as JSX elements */
  activityDescriptionText?: string;
  /** Activity icon */
  activityIcon?: JSX.Element;
  /** Activity persona details */
  activityPersonas?: IPersonaSharedProps[];
  /** Comments or additional content */
  comments?: string | JSX.Element[];
  /** Comments text */
  commentsText?: string;
  /** Whether item is compact */
  isCompact?: boolean;
  /** Timestamp for the activity */
  timeStamp?: string | JSX.Element;
  /** Whether timestamp is clickable */
  onRenderTimeStamp?: (props: IActivityItemProps) => JSX.Element | null;
  /** Activity icon render function */
  onRenderIcon?: (props: IActivityItemProps) => JSX.Element | null;
  /** Comments render function */
  onRenderComments?: (props: IActivityItemProps) => JSX.Element | null;
  /** Activity description render function */
  onRenderDescription?: (props: IActivityItemProps) => JSX.Element | null;
  /** Custom styles */
  styles?: IActivityItemStyles;
  /** Class name */
  className?: string;
}

import { ActivityItem, PersonaSize } from "@fluentui/react";

// Basic activity item
<ActivityItem
  activityDescription="John Doe created a new document"
  activityIcon={<Icon iconName="Add" />}
  timeStamp="2 hours ago"
  isCompact={false}
/>

// Activity with persona
<ActivityItem
  activityDescription="shared the document with you"
  activityPersonas={[{
    primaryText: "Sarah Johnson",
    size: PersonaSize.size32,
    imageUrl: "/images/sarah.jpg"
  }]}
  timeStamp="30 minutes ago"
  comments="Thanks for sharing this! I'll review it today."
/>

// Compact activity item
<ActivityItem
  activityDescription="Document was approved"
  activityIcon={<Icon iconName="CheckMark" />}
  timeStamp="1 day ago"
  isCompact={true}
/>