import React from 'react'; import { BaseComponentProps } from '../internal/base-component'; import { NonCancelableEventHandler } from '../internal/events'; export interface TreeViewProps extends BaseComponentProps { /** * Specifies the top-level items to display in the tree view. Use `getItemChildren` to provide nested items. */ items: ReadonlyArray; /** * Use this property to map your data to tree view items. This property must return an object with the following properties: * * `content` (ReactNode) - The content of the item. * * `icon` (ReactNode) - (Optional) The icon of the item. * * `secondaryContent` (ReactNode) - (Optional) Secondary content of the item, such as a description of the item. * * `actions` (ReactNode) - (Optional) Actions related to the item. Use [button](/components/button/?tabId=playground&example=inline-icon-button) with inline-icon or inline-link variants. For items with multiple actions, use [button dropdown](/components/button-dropdown/?tabId=playground&example=inline-icon-button-dropdown) with the inline-icon variant. * * `announcementLabel` (string) - (Optional) An announcement label for the item, used for labeling the toggle button. By default, the `content` is used. Make sure to provide the `announcementLabel` if `content` is not a string. */ renderItem: (item: T, index: number) => TreeViewProps.TreeItem; /** * Provides a unique identifier for each tree view item. */ getItemId: (item: T, index: number) => string; /** * Specifies the nested items that are displayed when a tree view item gets expanded. */ getItemChildren: (item: T, index: number) => ReadonlyArray | undefined; /** * Provides the IDs of the expanded tree view items. It controls whether an item is expanded or collapsed. */ expandedItems?: ReadonlyArray; /** * Provides an `aria-label` to the tree view that screen readers can read (for accessibility). * Don't use `ariaLabel` and `ariaLabelledby` at the same time. */ ariaLabel?: string; /** * Sets the `aria-labelledby` property on the tree view. * If there's a visible label element that you can reference, use this instead of `ariaLabel`. * Don't use `ariaLabel` and `ariaLabelledby` at the same time. */ ariaLabelledby?: string; /** * Sets the `aria-describedby` property on the tree view. */ ariaDescribedby?: string; /** * Shows connector lines highlighting hierarchy between parent and child items. */ connectorLines?: TreeViewProps.ConnectorLinesVariant; /** * Called when an item expands or collapses. */ onItemToggle?: NonCancelableEventHandler>; /** * An object containing all the necessary localized strings required by the component. * @i18n */ i18nStrings?: TreeViewProps.I18nStrings; /** * Use this property to display a custom icon in the toggle button. */ renderItemToggleIcon?: (data: TreeViewProps.ItemToggleRenderIconData) => React.ReactNode; } export declare namespace TreeViewProps { interface TreeItem { content: React.ReactNode; icon?: React.ReactNode; secondaryContent?: React.ReactNode; actions?: React.ReactNode; announcementLabel?: string; } interface ItemToggleDetail { id: string; item: T; expanded: boolean; } interface ItemToggleRenderIconData { expanded: boolean; } type ConnectorLinesVariant = 'vertical' | 'none'; interface I18nStrings { collapseButtonLabel?: (item: T) => string; expandButtonLabel?: (item: T) => string; } }