List Components

/**
 * Main list page wrapper component with filtering, sorting, and pagination
 * @param props - List configuration props
 * @returns Complete list page with data management
 */
function List(props: ListProps): ReactElement;

/**
 * List actions component for page-level operations
 * @param props - ListActions configuration props
 * @returns Action buttons for list operations
 */
function ListActions(props: ListActionsProps): ReactElement;

/**
 * Auto-generated list component based on resource introspection
 * @param props - ListGuesser configuration props
 * @returns Generated list component
 */
function ListGuesser(props: ListGuesserProps): ReactElement;

interface ListProps {
  /** Child components (typically Datagrid or SimpleList) */
  children?: ReactNode;
  /** Custom list actions component */
  actions?: ComponentType<ListActionsProps> | false;
  /** Custom filters component */
  filters?: ReactElement[];
  /** Default sort field */
  sort?: { field: string; order: 'ASC' | 'DESC' };
  /** Records per page */
  perPage?: number;
  /** Custom pagination component */
  pagination?: ComponentType<PaginationProps> | false;
  /** Custom bulk actions component */
  bulkActionButtons?: ComponentType<BulkActionsProps> | false;
  /** Custom empty component */
  empty?: ComponentType;
}

interface ListActionsProps {
  /** Current filters */
  filters?: ReactElement[];
  /** Whether to show filter button */
  hasCreate?: boolean;
  /** Custom create button */
  createButton?: ReactElement;
  /** Custom export button */
  exportButton?: ReactElement;
}

/**
 * Data table component with sorting, selection, and row actions
 * @param props - Datagrid configuration props
 * @returns Advanced data table with Material UI styling
 */
function Datagrid(props: DatagridProps): ReactElement;

/**
 * Expandable data grid with collapsible row details
 * @param props - ExpandableDatagrid configuration props
 * @returns Data grid with expandable rows
 */
function ExpandableDatagrid(props: ExpandableDatagridProps): ReactElement;

interface DatagridProps {
  /** Child field components */
  children?: ReactNode;
  /** Row click behavior */
  rowClick?: string | Function | false;
  /** Custom bulk actions component */
  bulkActionButtons?: ReactElement | false;
  /** Whether rows are selectable */
  isRowSelectable?: (record: any) => boolean;
  /** Custom row style function */
  rowStyle?: (record: any, index: number) => CSSProperties;
  /** Hover effects on rows */
  hover?: boolean;
  /** Row size variant */
  size?: 'small' | 'medium';
  /** Custom header component */
  header?: ComponentType;
  /** Custom body component */
  body?: ComponentType;
  /** Optimistic updates */
  optimized?: boolean;
}

interface ExpandableDatagridProps extends DatagridProps {
  /** Expand panel component */
  expand?: ComponentType<{ record: any; id: Identifier }>;
}

/**
 * Simple list component for basic data display
 * @param props - SimpleList configuration props
 * @returns Simple list layout with Material UI styling
 */
function SimpleList(props: SimpleListProps): ReactElement;

/**
 * Single field list component for displaying one field per item
 * @param props - SingleFieldList configuration props
 * @returns List showing single field per record
 */
function SingleFieldList(props: SingleFieldListProps): ReactElement;

interface SimpleListProps {
  /** Primary text field source */
  primaryText?: string | Function;
  /** Secondary text field source */
  secondaryText?: string | Function;
  /** Tertiary text field source */
  tertiaryText?: string | Function;
  /** Left icon or avatar source */
  leftAvatar?: string | Function;
  /** Left icon component */
  leftIcon?: ComponentType | Function;
  /** Right icon component */
  rightAvatar?: string | Function;
  /** Right icon component */
  rightIcon?: ComponentType | Function;
  /** Row click behavior */
  rowClick?: string | Function;
}

interface SingleFieldListProps {
  /** Child field component */
  children: ReactElement;
  /** Link behavior for items */
  linkType?: string | Function | false;
}

/**
 * Filter component container for list filtering
 * @param props - Filter configuration props
 * @returns Filter component with input fields
 */
function Filter(props: FilterProps): ReactElement;

/**
 * Filter button for toggling filter visibility
 * @param props - FilterButton configuration props
 * @returns Button for showing/hiding filters
 */
function FilterButton(props: FilterButtonProps): ReactElement;

/**
 * Search input component for text-based filtering
 * @param props - SearchInput configuration props
 * @returns Search input with filtering functionality
 */
function SearchInput(props: SearchInputProps): ReactElement;

interface FilterProps {
  /** Child filter input components */
  children?: ReactNode;
  /** Default filter values */
  defaultValues?: any;
  /** Filter form variant */
  variant?: 'standard' | 'outlined' | 'filled';
}

interface SearchInputProps {
  /** Input placeholder text */
  placeholder?: string;
  /** Source field to search */
  source?: string;
  /** Search always on (no submit button) */
  alwaysOn?: boolean;
  /** Input variant */
  variant?: 'standard' | 'outlined' | 'filled';
}

/**
 * Pagination component with page navigation and sizing
 * @param props - Pagination configuration props
 * @returns Pagination controls with Material UI styling
 */
function Pagination(props: PaginationProps): ReactElement;

/**
 * Pagination actions component with next/previous buttons
 * @param props - PaginationActions configuration props
 * @returns Navigation buttons for pagination
 */
function PaginationActions(props: PaginationActionsProps): ReactElement;

/**
 * Pagination limit component for controlling page size
 * @param props - PaginationLimit configuration props
 * @returns Page size selector component
 */
function PaginationLimit(props: PaginationLimitProps): ReactElement;

interface PaginationProps {
  /** Available page sizes */
  rowsPerPageOptions?: number[];
  /** Show first/last page buttons */
  showFirstButton?: boolean;
  /** Show last page button */
  showLastButton?: boolean;
  /** Pagination actions component */
  ActionsComponent?: ComponentType<PaginationActionsProps>;
}

interface PaginationLimitProps {
  /** Available page size options */
  choices?: number[];
  /** Default page size */
  defaultValue?: number;
}

/**
 * Bulk actions component for selected records
 * @param props - BulkActions configuration props
 * @returns Bulk action controls and buttons
 */
function BulkActions(props: BulkActionsProps): ReactElement;

/**
 * Bulk actions toolbar with selection info and actions
 * @param props - BulkActionsToolbar configuration props
 * @returns Toolbar with bulk operation controls
 */
function BulkActionsToolbar(props: BulkActionsToolbarProps): ReactElement;

interface BulkActionsProps {
  /** Child bulk action button components */
  children?: ReactNode;
  /** Selected record IDs */
  selectedIds?: Identifier[];
  /** Resource name */
  resource?: string;
}

interface BulkActionsToolbarProps {
  /** Child bulk action components */
  children?: ReactNode;
  /** Selected record IDs */
  selectedIds?: Identifier[];
  /** Selection toggle handler */
  onUnselectItems?: () => void;
}

/**
 * Sort button component for column sorting
 * @param props - SortButton configuration props
 * @returns Sortable column header button
 */
function SortButton(props: SortButtonProps): ReactElement;

/**
 * Sortable wrapper component for making columns sortable
 * @param props - Sortable configuration props
 * @returns Sortable column wrapper
 */
function Sortable(props: SortableProps): ReactElement;

interface SortButtonProps {
  /** Field to sort by */
  fields: string[];
  /** Button label */
  label?: string;
  /** Button icon */
  icon?: ReactElement;
}

interface SortableProps {
  /** Field name for sorting */
  field: string;
  /** Child component to make sortable */
  children: ReactElement;
}

import { 
  List, 
  Datagrid, 
  TextField, 
  NumberField,
  DateField,
  EditButton,
  SearchInput,
  Filter,
  BulkDeleteButton 
} from "ra-ui-materialui";

// Basic list with datagrid
const UserList = () => (
  <List>
    <Datagrid rowClick="edit">
      <TextField source="name" />
      <TextField source="email" />
      <DateField source="createdAt" />
      <EditButton />
    </Datagrid>
  </List>
);

// List with filters and pagination
const ProductList = () => (
  <List 
    filters={[
      <SearchInput source="q" alwaysOn />,
      <SelectInput source="category" choices={categories} />
    ]}
    sort={{ field: 'name', order: 'ASC' }}
    perPage={25}
  >
    <Datagrid 
      bulkActionButtons={<BulkDeleteButton />}
      rowClick="show"
    >
      <TextField source="name" />
      <NumberField source="price" />
      <TextField source="category" />
    </Datagrid>
  </List>
);

type Identifier = string | number;

interface SortPayload {
  field: string;
  order: 'ASC' | 'DESC';
}

interface FilterPayload {
  [key: string]: any;
}

interface ListControllerResult {
  data: any[];
  total: number;
  loading: boolean;
  error?: any;
  page: number;
  perPage: number;
  setPage: (page: number) => void;
  setPerPage: (perPage: number) => void;
  setSort: (sort: SortPayload) => void;
  setFilters: (filters: FilterPayload) => void;
  selectedIds: Identifier[];
  onSelect: (ids: Identifier[]) => void;
  onToggleItem: (id: Identifier) => void;
  onUnselectItems: () => void;
}