@fluentui/react-northstar
Version:
A themable React component library.
84 lines (83 loc) • 4.31 kB
TypeScript
import { Accessibility, ListBehaviorProps } from '@fluentui/accessibility';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { ComponentEventHandler, ShorthandCollection, ReactChildren, FluentComponentStaticProps } from '../../types';
import { UIComponentProps, ChildrenComponentProps } from '../../utils';
import { ListItem, ListItemProps } from './ListItem';
import { ListItemContent } from './ListItemContent';
import { ListItemContentMedia } from './ListItemContentMedia';
import { ListItemEndMedia } from './ListItemEndMedia';
import { ListItemHeader } from './ListItemHeader';
import { ListItemHeaderMedia } from './ListItemHeaderMedia';
import { ListItemMedia } from './ListItemMedia';
export interface ListProps extends UIComponentProps, ChildrenComponentProps {
/** Accessibility behavior if overridden by the user. */
accessibility?: Accessibility<ListBehaviorProps>;
/** Toggle debug mode */
debug?: boolean;
/** Shorthand array of props for ListItem. */
items?: ShorthandCollection<ListItemProps>;
/** A selectable list formats list items as possible choices. */
selectable?: boolean;
/** A navigable list allows user to navigate through items. */
navigable?: boolean;
/** Index of the currently selected item. */
selectedIndex?: number;
/** Initial selectedIndex value. */
defaultSelectedIndex?: number;
/**
* Event for request to change 'selectedIndex' value.
* @param event - React's original SyntheticEvent.
* @param data - All props and proposed value.
*/
onSelectedIndexChange?: ComponentEventHandler<ListProps>;
/** Truncates content */
truncateContent?: boolean;
/** Truncates header */
truncateHeader?: boolean;
/** A horizontal list displays elements horizontally. */
horizontal?: boolean;
/** An optional wrapper function. */
wrap?: (children: ReactChildren) => React.ReactNode;
}
export declare type ListStylesProps = Pick<ListProps, 'debug' | 'horizontal'> & {
isListTag: boolean;
};
export declare const listClassName = "ui-list";
/**
* A List displays a group of related sequential items.
*
* @accessibility
* List may follow one of the following accessibility semantics:
* - Static non-navigable list. Implements [ARIA list](https://www.w3.org/TR/wai-aria-1.1/#list) role.
* - Selectable list: allows the user to select item from a list of choices. Implements [ARIA Listbox](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox) design pattern.
* @accessibilityIssues
* [NVDA - Browse Mode does not work with listbox #12350](https://github.com/nvaccess/nvda/issues/12350)
* [JAWS - Listbox options are not reachable in Virtual Cursor PC mode #517](https://github.com/FreedomScientific/VFO-standards-support/issues/517)
* [JAWS - Aria-selected is not narrated for the single-select listbox, when selection is NOT moved with focus #440](https://github.com/FreedomScientific/VFO-standards-support/issues/440)
*/
export declare const List: (<TExtendedElementType extends React.ElementType<any> = "ul">(props: React.RefAttributes<HTMLUListElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof ListProps> & {
as?: TExtendedElementType;
} & ListProps) => JSX.Element) & {
propTypes?: React.WeakValidationMap<ListProps> & {
as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
};
contextTypes?: PropTypes.ValidationMap<any>;
defaultProps?: Partial<ListProps & {
as: "ul";
}>;
displayName?: string;
readonly __PRIVATE_PROPS?: React.RefAttributes<HTMLUListElement> & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof React.HTMLAttributes<HTMLUListElement>> & {
ref?: React.Ref<HTMLUListElement>;
}, "as" | keyof ListProps> & {
as?: "ul";
} & ListProps;
} & FluentComponentStaticProps<ListProps> & {
Item: typeof ListItem;
ItemContent: typeof ListItemContent;
ItemContentMedia: typeof ListItemContentMedia;
ItemEndMedia: typeof ListItemEndMedia;
ItemHeader: typeof ListItemHeader;
ItemHeaderMedia: typeof ListItemHeaderMedia;
ItemMedia: typeof ListItemMedia;
};