import { AriaTreeItemOptions } from 'react-aria/useTree'; import { AriaTreeProps } from 'react-aria/useTree'; import { ChildrenOrFunction, ClassNameOrFunction, ContextValue, DOMRenderProps, RenderProps, SlotProps, StyleRenderProps } from './utils'; import { CollectionProps, ItemRenderProps, SectionProps } from './Collection'; import { DisabledBehavior, Expandable, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, MultipleSelection, PressEvents, SelectionMode } from '@react-types/shared'; import { DragAndDropHooks } from './useDragAndDrop'; import { GridListHeaderProps } from './GridList'; import { LoadMoreSentinelProps } from 'react-aria/private/utils/useLoadMoreSentinel'; import { SelectionBehavior } from '@react-types/shared'; import React, { ReactNode } from 'react'; import { TreeState } from 'react-stately/useTreeState'; export interface TreeRenderProps { /** * Whether the tree has no items and should display its empty state. * @selector [data-empty] */ isEmpty: boolean; /** * Whether the tree is currently focused. * @selector [data-focused] */ isFocused: boolean; /** * Whether the tree is currently keyboard focused. * @selector [data-focus-visible] */ isFocusVisible: boolean; /** * The type of selection that is allowed in the collection. * @selector [data-selection-mode="single | multiple"] */ selectionMode: SelectionMode; /** * Whether the tree allows dragging. * @selector [data-allows-dragging] */ allowsDragging: boolean; /** * State of the tree. */ state: TreeState; } export interface TreeEmptyStateRenderProps extends Omit { } export interface TreeProps extends Omit, 'children'>, MultipleSelection, CollectionProps, StyleRenderProps, SlotProps, Expandable, GlobalDOMAttributes { /** * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. * @default 'react-aria-Tree' */ className?: ClassNameOrFunction; /** * How multiple selection should behave in the tree. * @default "toggle" */ selectionBehavior?: SelectionBehavior; /** Provides content to display when there are no items in the list. */ renderEmptyState?: (props: TreeEmptyStateRenderProps) => ReactNode; /** * Whether `disabledKeys` applies to all interactions, or only selection. * @default 'all' */ disabledBehavior?: DisabledBehavior; /** The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the Tree. */ dragAndDropHooks?: DragAndDropHooks>; } export declare const TreeContext: React.Context, HTMLDivElement>>; export declare const TreeStateContext: React.Context | null>; /** * A tree provides users with a way to navigate nested hierarchical information, with support for keyboard navigation * and selection. */ export declare const Tree: (props: TreeProps & React.RefAttributes) => React.ReactElement> | null; export interface TreeItemRenderProps extends ItemRenderProps { /** * Whether the tree item is expanded. * @selector [data-expanded] */ isExpanded: boolean; /** * Whether the tree item has child tree items. * @selector [data-has-child-items] */ hasChildItems: boolean; /** * What level the tree item has within the tree. * @selector [data-level="number"] */ level: number; /** * Whether the tree item's children have keyboard focus. * @selector [data-focus-visible-within] */ isFocusVisibleWithin: boolean; /** The state of the tree. */ state: TreeState; /** The unique id of the tree row. */ id: Key; } export interface TreeItemContentRenderProps extends TreeItemRenderProps { } export interface TreeItemContentProps { /** The children of the component. A function may be provided to alter the children based on component state. */ children: ChildrenOrFunction; } export declare const TreeItemContent: (props: TreeItemContentProps & React.RefAttributes) => React.ReactElement> | null; export declare const TreeItemContentContext: React.Context; export interface TreeItemProps extends StyleRenderProps, LinkDOMProps, HoverEvents, PressEvents, Pick, Omit, 'onClick'> { /** * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. * @default 'react-aria-TreeItem' */ className?: ClassNameOrFunction; /** The unique id of the tree row. */ id?: Key; /** The object value that this tree item represents. When using dynamic collections, this is set automatically. */ value?: T; /** A string representation of the tree item's contents, used for features like typeahead. */ textValue: string; /** An accessibility label for this tree item. */ 'aria-label'?: string; /** The content of the tree item along with any nested children. Supports static nested tree items or use of a Collection to dynamically render nested tree items. */ children: ReactNode; /** Whether the item is disabled. */ isDisabled?: boolean; /** * Handler that is called when a user performs an action on this tree item. The exact user event depends on * the collection's `selectionBehavior` prop and the interaction modality. */ onAction?: () => void; } /** * A TreeItem represents an individual item in a Tree. */ export declare const TreeItem: (props: TreeItemProps & React.RefAttributes) => React.ReactElement> | null; export interface TreeLoadMoreItemRenderProps { /** * What level the tree item has within the tree. * @selector [data-level] */ level: number; } export interface TreeLoadMoreItemProps extends Omit, RenderProps { /** * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. * @default 'react-aria-TreeLoadMoreItem' */ className?: ClassNameOrFunction; /** * The load more spinner to render when loading additional items. */ children?: ChildrenOrFunction; /** * Whether or not the loading spinner should be rendered or not. */ isLoading?: boolean; } export declare const TreeLoadMoreItem: (props: TreeLoadMoreItemProps & React.RefAttributes) => React.ReactElement> | null; export interface GridListSectionProps extends SectionProps, DOMRenderProps<'div', undefined> { } /** * A TreeSection represents a section within a Tree. */ export declare const TreeSection: (props: GridListSectionProps & React.RefAttributes) => React.ReactElement> | null; export declare const TreeHeader: (props: GridListHeaderProps) => ReactNode;