@fluentui/react-northstar/dist/es/components/Tree/TreeItem.d.ts

A themable React component library.

import { Accessibility, TreeItemBehaviorProps } from '@fluentui/accessibility';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { UIComponentProps, ChildrenComponentProps } from '../../utils';
import { ComponentEventHandler, ShorthandRenderFunction, ShorthandValue, ShorthandCollection, FluentComponentStaticProps, ComponentKeyboardEventHandler } from '../../types';
import { TreeTitleProps } from './TreeTitle';
import { BoxProps } from '../Box/Box';
export interface TreeItemProps extends UIComponentProps, ChildrenComponentProps {
    /** Accessibility behavior if overridden by the user. */
    accessibility?: Accessibility<TreeItemBehaviorProps>;
    /** Ref for the item DOM element. */
    contentRef?: React.Ref<HTMLElement>;
    /** Id needed to identify this item inside the Tree. */
    id: string;
    /** The index of the item among its siblings. Count starts at 1. */
    index?: number;
    /** Array of props for sub tree. */
    items?: ShorthandCollection<TreeItemProps>;
    /** Level of the tree/subtree that contains this item. */
    level?: number;
    /** Called when the item's first child is about to be focused. */
    onFocusFirstChild?: ComponentEventHandler<TreeItemProps>;
    /** Called when the item's parent is about to be focused. */
    onFocusParent?: ComponentEventHandler<TreeItemProps>;
    /** Called when a tree title is clicked. */
    onTitleClick?: ComponentEventHandler<TreeItemProps>;
    /**
     * Called on click.
     *
     * @param {SyntheticEvent} event - React's original SyntheticEvent.
     * @param {object} data - All props.
     */
    onClick?: ComponentEventHandler<TreeItemProps>;
    /** Called when the item's siblings are about to be expanded. */
    onSiblingsExpand?: ComponentEventHandler<TreeItemProps>;
    /** Whether or not the item is in the expanded state. Only makes sense if item has children items. If set to true, item is initialy expanded. */
    expanded?: boolean;
    /** The id of the parent tree item, if any. */
    parent?: string;
    /**
     * A custom render iterator for rendering each tree title.
     * The default component, props, and children are available for each tree title.
     *
     * @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>;
    /** Size of the tree/subtree that contains this item. */
    treeSize?: number;
    /** Properties for TreeTitle. */
    title?: ShorthandValue<TreeTitleProps>;
    /** Whether or not the item can be selectable. */
    selectable?: boolean;
    /** A selection indicator icon can be customized. */
    selectionIndicator?: ShorthandValue<BoxProps>;
    /**
     * Called on item key down.
     *
     * @param event - React's original SyntheticEvent.
     * @param data - All props and proposed value.
     */
    onKeyDown?: ComponentKeyboardEventHandler<TreeItemProps>;
    unstyled?: boolean;
}
export declare type TreeItemStylesProps = Required<Pick<TreeItemProps, 'level'>> & {
    selectable?: boolean;
};
export declare const treeItemClassName = "ui-tree__item";
/**
 * A TreeItem renders an item of a Tree.
 *
 * @accessibility
 * Implements [ARIA TreeView](https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView) design pattern.
 */
export declare const TreeItem: (<TExtendedElementType extends React.ElementType<any> = "div">(props: React.RefAttributes<HTMLDivElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof TreeItemProps> & {
    as?: TExtendedElementType;
} & TreeItemProps) => JSX.Element) & {
    propTypes?: React.WeakValidationMap<TreeItemProps> & {
        as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
    };
    contextTypes?: PropTypes.ValidationMap<any>;
    defaultProps?: Partial<TreeItemProps & {
        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 TreeItemProps> & {
        as?: "div";
    } & TreeItemProps;
} & FluentComponentStaticProps<TreeItemProps>;