Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface ProvidedTreeItemProps

Hierarchy

Index

Properties

depth

depth: number

The current depth that the tree item is being rendered at. This will be a number starting from 1 since it should be directly mapped to "aria-posinset".

expanded

expanded: boolean

Boolean if the tree item is expanded. When this is true, it should add aria-expanded="true" to the tree item.

focused

focused: boolean

Boolean if the tree item is the current keyboard focus.

id

id: string

A DOM id for the tree item. This is required for a11y since this id should reflect the aria-activedescendant value on the base Tree component to show current keyboard focus.

itemIndex

itemIndex: number

The current tree item's index within its list at the provided depth. This will be a number starting from 1 since it should be directly mapped to "aria-posinset".

key

key: string

React keys aren't really "props", but it will be provided to each TreeItem automatically.

Optional liRef

liRef: MutableRefObject<null | HTMLLIElement>

A ref that must be passed down to each TreeItem so that keyboard accessibility works. This will be omitted when the isCustom key is enabled on the item.

listSize

listSize: number

The current total list size for the tree item at the provided depth. This should be mapped directly into "aria-setsize".

Optional onClick

onClick: MouseEventHandler<HTMLLIElement>

A click handler that allows for the item to be selected or expanded. This will be omitted when the isCustom key is enabled on the item.

selected

selected: boolean

Boolean if the tree item is currently selected.

Methods

Optional renderChildItems

  • renderChildItems(): ReactNode
  • This function will only be provided when the tree item has child tree items. This function should only be called within the exported TreeGroup component or in a component that has the role="group" for accessibility.

    Returns ReactNode

Generated using TypeDoc