@fluentui/react-northstar
Version:
A themable React component library.
92 lines (91 loc) • 4.97 kB
TypeScript
import { Accessibility, TreeBehaviorProps } from '@fluentui/accessibility';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { TreeItem, TreeItemProps } from './TreeItem';
import { TreeTitle, TreeTitleProps } from './TreeTitle';
import { UIComponentProps, ChildrenComponentProps } from '../../utils';
import { ComponentEventHandler, ObjectShorthandCollection, FluentComponentStaticProps, ShorthandRenderFunction } from '../../types';
export interface TreeProps extends UIComponentProps, ChildrenComponentProps {
/** Accessibility behavior if overridden by the user. */
accessibility?: Accessibility<TreeBehaviorProps>;
/** Ids of expanded items. */
activeItemIds?: string[];
/** Ids of selected leaf items. */
selectedItemIds?: string[];
/** Initial activeItemIds value. */
defaultActiveItemIds?: string[];
/** Initial selectedItemIds value. */
defaultSelectedItemIds?: string[];
/** Only allow one subtree to be expanded at a time. */
exclusive?: boolean;
/** Shorthand array of props for Tree. */
items?: ObjectShorthandCollection<TreeItemProps>;
/**
* A custom render function for the title slot.
*
* @param Component - The computed component for this slot.
* @param props - The computed props for this slot.
* @param children - The computed children for this slot.
*/
renderItemTitle?: ShorthandRenderFunction<TreeTitleProps>;
/**
* Called when active item ids change.
* @param event - React's original SyntheticEvent.
* @param data - All props, with `activeItemIds` reflecting the new state.
*/
onActiveItemIdsChange?: ComponentEventHandler<TreeProps>;
/**
* Called when tree item selection state is changed.
* @param event - React's original SyntheticEvent.
* @param data - All props, with `selectedItemIds` reflecting the new state.
*/
onSelectedItemIdsChange?: ComponentEventHandler<TreeProps>;
/**
* Callback that provides rendered tree items to be used by react-virtualized for instance.
* Acts as a render prop, with the rendered tree items being the re-used logic.
*
* @param renderedItem - The array of rendered items.
* @returns The render prop result.
*/
renderedItems?: (renderedItems: React.ReactElement[]) => React.ReactNode;
/** Whether or not tree items are selectable. */
selectable?: boolean;
unstyled?: boolean;
}
export declare const treeClassName = "ui-tree";
export declare type TreeStylesProps = never;
/**
* A Tree displays data organised in tree hierarchy.
*
* @accessibility
* Implements [ARIA TreeView](https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView) design pattern.
* @accessibilityIssues
* [Treeview - JAWS doesn't narrate position for each tree item](https://github.com/FreedomScientific/VFO-standards-support/issues/338)
* [Aria-selected and aria-checked are not output correctly for trees #432](https://github.com/FreedomScientific/VFO-standards-support/issues/432)
* [Aria compliant trees are read as empty tables](https://bugs.chromium.org/p/chromium/issues/detail?id=1048770)
* [VoiceOver narrates "selected false" for DOM with role=option and no aria-selected attribute](http://www.openradar.me/FB8050959)
* [VoiceOver does not support Aria 1.2 listbox role owning unselectable group role](http://www.openradar.me/FB8050958)
* [Tree as table in Mac > VoiceOver narrates " no selection " when user navigates to tree/table](https://bugs.chromium.org/p/chromium/issues/detail?id=1273538)
* [Tree as table in Mac > VoiceOver narrates " 0 items enclosed " when user navigates to expaded treeitem](https://bugs.chromium.org/p/chromium/issues/detail?id=1273540)
* [Tree as table in Mac > VoiceOver doesn't narrate aria-labelledby element on treeitem](https://bugs.chromium.org/p/chromium/issues/detail?id=1273544)
*/
export declare const Tree: (<TExtendedElementType extends React.ElementType<any> = "div">(props: React.RefAttributes<HTMLDivElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof TreeProps> & {
as?: TExtendedElementType;
} & TreeProps) => JSX.Element) & {
propTypes?: React.WeakValidationMap<TreeProps> & {
as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
};
contextTypes?: PropTypes.ValidationMap<any>;
defaultProps?: Partial<TreeProps & {
as: "div";
}>;
displayName?: string;
readonly __PRIVATE_PROPS?: React.RefAttributes<HTMLDivElement> & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
}, "as" | keyof TreeProps> & {
as?: "div";
} & TreeProps;
} & FluentComponentStaticProps<TreeProps> & {
Item: typeof TreeItem;
Title: typeof TreeTitle;
};