Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface LayoutTreeProps<T>

Type parameters

Hierarchy

Index

Properties

Methods

Properties

about?: string
accessKey?: string
aria-activedescendant?: string

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

aria-atomic?: Booleanish

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

aria-autocomplete?: "list" | "none" | "inline" | "both"

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.

aria-busy?: Booleanish

Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.

aria-checked?: boolean | "true" | "false" | "mixed"

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

see

aria-pressed @see aria-selected.

aria-colcount?: number

Defines the total number of columns in a table, grid, or treegrid.

see

aria-colindex.

aria-colindex?: number

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

see

aria-colcount @see aria-colspan.

aria-colspan?: number

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

see

aria-colindex @see aria-rowspan.

aria-controls?: string

Identifies the element (or elements) whose contents or presence are controlled by the current element.

see

aria-owns.

aria-current?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"

Indicates the element that represents the current item within a container or set of related elements.

aria-describedby?: string

Identifies the element (or elements) that describes the object.

see

aria-labelledby

aria-details?: string

Identifies the element that provides a detailed, extended description for the object.

see

aria-describedby.

aria-disabled?: Booleanish

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

see

aria-hidden @see aria-readonly.

aria-dropeffect?: "link" | "none" | "copy" | "execute" | "move" | "popup"

Indicates what functions can be performed when a dragged object is released on the drop target.

deprecated

in ARIA 1.1

aria-errormessage?: string

Identifies the element that provides an error message for the object.

see

aria-invalid @see aria-describedby.

aria-expanded?: Booleanish

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

aria-flowto?: string

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.

aria-grabbed?: Booleanish

Indicates an element's "grabbed" state in a drag-and-drop operation.

deprecated

in ARIA 1.1

aria-haspopup?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree"

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

aria-hidden?: Booleanish

Indicates whether the element is exposed to an accessibility API.

see

aria-disabled.

aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"

Indicates the entered value does not conform to the format expected by the application.

see

aria-errormessage.

aria-keyshortcuts?: string

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

aria-label?: string

An optional aria-label to provide to the tree. This will be defaulted to "Navigation".

aria-labelledby?: string

An optional space-delimited list of ids that help describe this tree. This can be used instead of an aria-label or alongside for additional screen reader description.

aria-level?: number

Defines the hierarchical level of an element within a structure.

aria-live?: "off" | "assertive" | "polite"

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

aria-modal?: Booleanish

Indicates whether an element is modal when displayed.

aria-multiline?: Booleanish

Indicates whether a text box accepts multiple lines of input or only a single line.

aria-multiselectable?: Booleanish

Indicates that the user may select more than one item from the current selectable descendants.

aria-orientation?: "horizontal" | "vertical"

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

aria-owns?: string

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

see

aria-controls.

aria-placeholder?: string

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

aria-posinset?: number

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

see

aria-setsize.

aria-pressed?: boolean | "true" | "false" | "mixed"

Indicates the current "pressed" state of toggle buttons.

see

aria-checked @see aria-selected.

aria-readonly?: Booleanish

Indicates that the element is not editable, but is otherwise operable.

see

aria-disabled.

aria-relevant?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

see

aria-atomic.

aria-required?: Booleanish

Indicates that user input is required on the element before a form may be submitted.

aria-roledescription?: string

Defines a human-readable, author-localized description for the role of an element.

aria-rowcount?: number

Defines the total number of rows in a table, grid, or treegrid.

see

aria-rowindex.

aria-rowindex?: number

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

see

aria-rowcount @see aria-rowspan.

aria-rowspan?: number

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

see

aria-rowindex @see aria-colspan.

aria-selected?: Booleanish

Indicates the current "selected" state of various widgets.

see

aria-checked @see aria-pressed.

aria-setsize?: number

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

see

aria-posinset.

aria-sort?: "none" | "ascending" | "descending" | "other"

Indicates if items in a table or grid are sorted in ascending or descending order.

aria-valuemax?: number

Defines the maximum allowed value for a range widget.

aria-valuemin?: number

Defines the minimum allowed value for a range widget.

aria-valuenow?: number

Defines the current value for a range widget.

see

aria-valuetext.

aria-valuetext?: string

Defines the human readable text alternative of aria-valuenow for a range widget.

autoCapitalize?: string
autoCorrect?: string
autoSave?: string
children?: ReactNode
className?: string
color?: string
contentEditable?: Booleanish | "inherit"
contextMenu?: string
dangerouslySetInnerHTML?: { __html: string }

Type declaration

  • __html: string
datatype?: string
defaultChecked?: boolean
defaultValue?: string | number | readonly string[]
dense?: boolean

Boolean if the dense spec should be applied to the list.

dir?: string
disableTemporaryAutoclose?: boolean

Boolean if the temporary navigation type should no longer automatically close when the selectedIds updates to contain a new route when using the useLayoutNavigation hook. This makes it so when a user on mobile clicks a route within your app in the main navigation pane, it will automatically close if it was a link.

draggable?: Booleanish
expandedIds: ExpandedIds

The list of expanded ids within the tree. These ids should reference itemIds for tree items.

expanderIcon?: ReactNode

The icon to show within each item within the tree that helps show that there are child items.

NOTE: This will override the rightAddon prop if defined on each item by default so they can't be used. If the expanderLeft prop is enabled, the leftAddon will be overridden instead.

expanderLeft?: boolean

Boolean if the expander icon should appear to the left instead of the right.

getItemProps?: GetItemProps<T>
see

GetItemProps

hidden?: boolean
horizontal?: boolean

Boolean if the list should appear horizontally instead of vertically.

id?: string

The id to use for the tree. When this is omitted, it will be set to ${baseId}-navigation-tree where the baseId is the id provided to the parent Layout component.

inlist?: any
inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal"

Hints at the type of data that might be entered by the user while editing the element or its contents

see

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

is?: string

Specify that a standard HTML element should behave like a defined custom built-in element

see

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

itemID?: string
itemProp?: string
itemRef?: string
itemRenderer?: TreeItemRenderer<T>

A function that gets called to render each TreeItem within the tree. This can be overridden if you need to add additional functionality around the TreeItem (such as drag and drop). The default behavior is to extract the ListItem props:

  • leftAddon
  • leftAddonType
  • leftAddonPosition
  • rightAddon
  • rightAddonType
  • rightAddonPosition
  • children
  • to / href
  • isLink

and try to render as a TreeItem with those props. It will also override the expanderLeft and expanderIcon on the TreeItem with whatever was provided to the Tree component.

itemScope?: boolean
itemType?: string
labelKey?: string

The key to use to extract a renderable label from each tree item. This will be displayed in the DOM as the children in each tree item.

lang?: string
linkComponent?: ElementType<any>

The component to use for any treeitem that has a to, href, or isLink attribute. This is a nice way to be able to update treeitems to be links instead of storing the contentComponent in the tree's data.

mini?: boolean

Boolean if the LayoutTree is being rendered as the mini variant. This will update the itemRenderer to default to the defaultMiniNavigationItemRenderer instead of the defaultNavigationItemRenderer.

remarks

@since 2.7.0

miniItemRenderer?: TreeItemRenderer<T>

The TreeItemRenderer to use if the mini prop is enabled.

remarks

@since 2.8.3

multiSelect?: boolean

Boolean if multiple items within the tree can be selected at once.

navClassName?: string

Optional className to provide to the <nav> element surrounding the tree

navItems: TreeData<T>

The navigation items to render.

navStyle?: CSSProperties

Optional style to provide to the <nav> element surrounding the tree

onAbort?: ReactEventHandler<ListElement>
onAbortCapture?: ReactEventHandler<ListElement>
onAnimationEnd?: AnimationEventHandler<ListElement>
onAnimationEndCapture?: AnimationEventHandler<ListElement>
onAnimationIteration?: AnimationEventHandler<ListElement>
onAnimationIterationCapture?: AnimationEventHandler<ListElement>
onAnimationStart?: AnimationEventHandler<ListElement>
onAnimationStartCapture?: AnimationEventHandler<ListElement>
onAuxClick?: MouseEventHandler<ListElement>
onAuxClickCapture?: MouseEventHandler<ListElement>
onBeforeInput?: FormEventHandler<ListElement>
onBeforeInputCapture?: FormEventHandler<ListElement>
onBlur?: FocusEventHandler<ListElement>
onBlurCapture?: FocusEventHandler<ListElement>
onCanPlay?: ReactEventHandler<ListElement>
onCanPlayCapture?: ReactEventHandler<ListElement>
onCanPlayThrough?: ReactEventHandler<ListElement>
onCanPlayThroughCapture?: ReactEventHandler<ListElement>
onChange?: FormEventHandler<ListElement>
onChangeCapture?: FormEventHandler<ListElement>
onClick?: MouseEventHandler<ListElement>
onClickCapture?: MouseEventHandler<ListElement>
onCompositionEnd?: CompositionEventHandler<ListElement>
onCompositionEndCapture?: CompositionEventHandler<ListElement>
onCompositionStart?: CompositionEventHandler<ListElement>
onCompositionStartCapture?: CompositionEventHandler<ListElement>
onCompositionUpdate?: CompositionEventHandler<ListElement>
onCompositionUpdateCapture?: CompositionEventHandler<ListElement>
onContextMenu?: MouseEventHandler<ListElement>
onContextMenuCapture?: MouseEventHandler<ListElement>
onCopy?: ClipboardEventHandler<ListElement>
onCopyCapture?: ClipboardEventHandler<ListElement>
onCut?: ClipboardEventHandler<ListElement>
onCutCapture?: ClipboardEventHandler<ListElement>
onDoubleClick?: MouseEventHandler<ListElement>
onDoubleClickCapture?: MouseEventHandler<ListElement>
onDrag?: DragEventHandler<ListElement>
onDragCapture?: DragEventHandler<ListElement>
onDragEnd?: DragEventHandler<ListElement>
onDragEndCapture?: DragEventHandler<ListElement>
onDragEnter?: DragEventHandler<ListElement>
onDragEnterCapture?: DragEventHandler<ListElement>
onDragExit?: DragEventHandler<ListElement>
onDragExitCapture?: DragEventHandler<ListElement>
onDragLeave?: DragEventHandler<ListElement>
onDragLeaveCapture?: DragEventHandler<ListElement>
onDragOver?: DragEventHandler<ListElement>
onDragOverCapture?: DragEventHandler<ListElement>
onDragStart?: DragEventHandler<ListElement>
onDragStartCapture?: DragEventHandler<ListElement>
onDrop?: DragEventHandler<ListElement>
onDropCapture?: DragEventHandler<ListElement>
onDurationChange?: ReactEventHandler<ListElement>
onDurationChangeCapture?: ReactEventHandler<ListElement>
onEmptied?: ReactEventHandler<ListElement>
onEmptiedCapture?: ReactEventHandler<ListElement>
onEncrypted?: ReactEventHandler<ListElement>
onEncryptedCapture?: ReactEventHandler<ListElement>
onEnded?: ReactEventHandler<ListElement>
onEndedCapture?: ReactEventHandler<ListElement>
onError?: ReactEventHandler<ListElement>
onErrorCapture?: ReactEventHandler<ListElement>
onFocus?: FocusEventHandler<ListElement>
onFocusCapture?: FocusEventHandler<ListElement>
onGotPointerCapture?: PointerEventHandler<ListElement>
onGotPointerCaptureCapture?: PointerEventHandler<ListElement>
onInput?: FormEventHandler<ListElement>
onInputCapture?: FormEventHandler<ListElement>
onInvalid?: FormEventHandler<ListElement>
onInvalidCapture?: FormEventHandler<ListElement>
onKeyDown?: KeyboardEventHandler<ListElement>
onKeyDownCapture?: KeyboardEventHandler<ListElement>
onKeyPress?: KeyboardEventHandler<ListElement>
deprecated
onKeyPressCapture?: KeyboardEventHandler<ListElement>
deprecated
onKeyUp?: KeyboardEventHandler<ListElement>
onKeyUpCapture?: KeyboardEventHandler<ListElement>
onLoad?: ReactEventHandler<ListElement>
onLoadCapture?: ReactEventHandler<ListElement>
onLoadStart?: ReactEventHandler<ListElement>
onLoadStartCapture?: ReactEventHandler<ListElement>
onLoadedData?: ReactEventHandler<ListElement>
onLoadedDataCapture?: ReactEventHandler<ListElement>
onLoadedMetadata?: ReactEventHandler<ListElement>
onLoadedMetadataCapture?: ReactEventHandler<ListElement>
onLostPointerCapture?: PointerEventHandler<ListElement>
onLostPointerCaptureCapture?: PointerEventHandler<ListElement>
onMouseDown?: MouseEventHandler<ListElement>
onMouseDownCapture?: MouseEventHandler<ListElement>
onMouseEnter?: MouseEventHandler<ListElement>
onMouseLeave?: MouseEventHandler<ListElement>
onMouseMove?: MouseEventHandler<ListElement>
onMouseMoveCapture?: MouseEventHandler<ListElement>
onMouseOut?: MouseEventHandler<ListElement>
onMouseOutCapture?: MouseEventHandler<ListElement>
onMouseOver?: MouseEventHandler<ListElement>
onMouseOverCapture?: MouseEventHandler<ListElement>
onMouseUp?: MouseEventHandler<ListElement>
onMouseUpCapture?: MouseEventHandler<ListElement>
onMultiItemExpansion: Dispatch<SetStateAction<ExpandedIds>>

A function to call when the user presses the asterisk key (*) that will expand all tree items at the same level as the currently focused item.

remarks

@since 4.0.1 Allows for callback behavior to get current expandedIds.

onPaste?: ClipboardEventHandler<ListElement>
onPasteCapture?: ClipboardEventHandler<ListElement>
onPause?: ReactEventHandler<ListElement>
onPauseCapture?: ReactEventHandler<ListElement>
onPlay?: ReactEventHandler<ListElement>
onPlayCapture?: ReactEventHandler<ListElement>
onPlaying?: ReactEventHandler<ListElement>
onPlayingCapture?: ReactEventHandler<ListElement>
onPointerCancel?: PointerEventHandler<ListElement>
onPointerCancelCapture?: PointerEventHandler<ListElement>
onPointerDown?: PointerEventHandler<ListElement>
onPointerDownCapture?: PointerEventHandler<ListElement>
onPointerEnter?: PointerEventHandler<ListElement>
onPointerEnterCapture?: PointerEventHandler<ListElement>
onPointerLeave?: PointerEventHandler<ListElement>
onPointerLeaveCapture?: PointerEventHandler<ListElement>
onPointerMove?: PointerEventHandler<ListElement>
onPointerMoveCapture?: PointerEventHandler<ListElement>
onPointerOut?: PointerEventHandler<ListElement>
onPointerOutCapture?: PointerEventHandler<ListElement>
onPointerOver?: PointerEventHandler<ListElement>
onPointerOverCapture?: PointerEventHandler<ListElement>
onPointerUp?: PointerEventHandler<ListElement>
onPointerUpCapture?: PointerEventHandler<ListElement>
onProgress?: ReactEventHandler<ListElement>
onProgressCapture?: ReactEventHandler<ListElement>
onRateChange?: ReactEventHandler<ListElement>
onRateChangeCapture?: ReactEventHandler<ListElement>
onReset?: FormEventHandler<ListElement>
onResetCapture?: FormEventHandler<ListElement>
onScroll?: UIEventHandler<ListElement>
onScrollCapture?: UIEventHandler<ListElement>
onSeeked?: ReactEventHandler<ListElement>
onSeekedCapture?: ReactEventHandler<ListElement>
onSeeking?: ReactEventHandler<ListElement>
onSeekingCapture?: ReactEventHandler<ListElement>
onSelect?: ReactEventHandler<ListElement>
onSelectCapture?: ReactEventHandler<ListElement>
onStalled?: ReactEventHandler<ListElement>
onStalledCapture?: ReactEventHandler<ListElement>
onSubmit?: FormEventHandler<ListElement>
onSubmitCapture?: FormEventHandler<ListElement>
onSuspend?: ReactEventHandler<ListElement>
onSuspendCapture?: ReactEventHandler<ListElement>
onTimeUpdate?: ReactEventHandler<ListElement>
onTimeUpdateCapture?: ReactEventHandler<ListElement>
onTouchCancel?: TouchEventHandler<ListElement>
onTouchCancelCapture?: TouchEventHandler<ListElement>
onTouchEnd?: TouchEventHandler<ListElement>
onTouchEndCapture?: TouchEventHandler<ListElement>
onTouchMove?: TouchEventHandler<ListElement>
onTouchMoveCapture?: TouchEventHandler<ListElement>
onTouchStart?: TouchEventHandler<ListElement>
onTouchStartCapture?: TouchEventHandler<ListElement>
onTransitionEnd?: TransitionEventHandler<ListElement>
onTransitionEndCapture?: TransitionEventHandler<ListElement>
onVolumeChange?: ReactEventHandler<ListElement>
onVolumeChangeCapture?: ReactEventHandler<ListElement>
onWaiting?: ReactEventHandler<ListElement>
onWaitingCapture?: ReactEventHandler<ListElement>
onWheel?: WheelEventHandler<ListElement>
onWheelCapture?: WheelEventHandler<ListElement>
ordered?: boolean

Boolean if the list's order is important. This will update the list to be rendered as an <ol> instead of <ul>.

placeholder?: string
prefix?: string
property?: string
radioGroup?: string
resource?: string
results?: number
role?: AriaRole

The role is set to "none" by default for lists screen readers announce lists differently than other elements on the page. Since the major use-case for lists is to contain clickable items, setting this to "none" fixes this issue.

rootId?: null | string

An optional id to use to determine the root items within the tree. You'll most likely want to keep this as the default of null, but it can also be used if you have a different identifier for root items.

security?: string
selectedIds: SelectedIds

The list of selected ids within the tree. If you only want to allow a single item to be selected at a time within a tree, keep this as either an empty list (no selections) or a single itemId.

slot?: string
sort?: TreeItemSorter<T>
see

TreeItemSorter

spellCheck?: Booleanish
sticky?: boolean

Boolean if the mini navigation should be treated as a "sticky" element. This should really only be true if disabling the fixed AppBar behavior in the Layout.

remarks

@since 2.8.3

style?: CSSProperties
suppressContentEditableWarning?: boolean
suppressHydrationWarning?: boolean
tabIndex?: number
title?: string
translate?: "yes" | "no"
typeof?: string
unselectable?: "on" | "off"
valueKey?: string

The key to use to extract a text string from each tree item. This is used for keyboard accessibility and being able to "search" the tree for items starting with the typed letters.

vocab?: string

Methods

  • getItemLabel(item: T, labelKey: string): ReactNode
  • A function to extract the renderable label from each tree item. The default behavior will be to just return item[labelKey].

    Parameters

    • item: T
    • labelKey: string

    Returns ReactNode

  • getItemValue(item: T, valueKey: string): string
  • A function to extract the text string from each tree item. The default behavior will be to return the item[valueKey] and stringify it.

    Parameters

    • item: T
    • valueKey: string

    Returns string

  • onItemExpansion(itemId: string, expanded: boolean): void
  • A function to call that will update the expandedIds to collapse or expand a clicked item.

    Parameters

    • itemId: string
    • expanded: boolean

    Returns void

  • onItemSelect(itemId: string): void
  • A function to call that will update the selectedIds to include itemId of the newly selected tree item. This will be triggered when:

    • the user clicks a tree item with mouse or touch
    • user presses the space or enter key while keyboard focusing a tree item

    Note: If you are using the useTreeItemSelection hook, this will always cause the selectedIds to be a list of just the selected itemId unless the multiSelect (second argument) is enabled.

    Parameters

    • itemId: string

    Returns void

  • onMultiItemSelect(itemIds: SelectedIds): void
  • A function to call that will update the selectedIds for "batch" selection updates. This will always be called with a unique list of itemIds that contained the previous itemIds including the new itemIds. This will only be called when the multiSelect prop has been enabled and:

    • the user Shift + Clicks items within the tree
    • triggers "select-to" keyboard functionality with Control+Shift+Home or Control+Shift+End

    Parameters

    • itemIds: SelectedIds

    Returns void

Generated using TypeDoc