tree

import { tree } from '@markless/ui';

export default function Filesfunction Files(): Element() @{@{ · Component bodyOpens the body of a component, where ordinary statements and the markup they produce sit together.
	<tree.root(alias) function root({ disabled, children, onFocusin, onKeydown, ...rest }: tree.TreeRootProps): Element aria-label="Project files">
		<tree.item(alias) function item({ open, leaf, level, disabled, onChange, children, ...rest }: tree.TreeItemProps): Element level(property) level?: number | undefinedHow deep this node sits, counting from 1. It is written rather than read off the enclosing node, because a component that roots an instance of a family cannot also read the enclosing instance of that same family.={1}>
			<tree.itemtrigger(alias) function itemtrigger({ children, onClick, ...rest }: tree.TreeItemTriggerProps): Element>
				<tree.itemindicator(alias) function itemindicator({ children, ...rest }: tree.TreeItemIndicatorProps): Element />
				<tree.itemlabel(alias) function itemlabel({ children, ...rest }: tree.TreeItemLabelProps): Element>src</tree.itemlabel(alias) function itemlabel({ children, ...rest }: tree.TreeItemLabelProps): Element>
			</tree.itemtrigger(alias) function itemtrigger({ children, onClick, ...rest }: tree.TreeItemTriggerProps): Element>
			<tree.itemcontent(alias) function itemcontent({ children, ...rest }: tree.TreeItemContentProps): Element>
				<tree.item(alias) function item({ open, leaf, level, disabled, onChange, children, ...rest }: tree.TreeItemProps): Element leaf(property) leaf?: boolean | undefinedThis node has no children. A leaf reports no open state at all, which is the WAI-ARIA rule a reader needs to tell "nothing to open" from "closed". level(property) level?: number | undefinedHow deep this node sits, counting from 1. It is written rather than read off the enclosing node, because a component that roots an instance of a family cannot also read the enclosing instance of that same family.={2}>
					<tree.itemlabel(alias) function itemlabel({ children, ...rest }: tree.TreeItemLabelProps): Element>index.ts</tree.itemlabel(alias) function itemlabel({ children, ...rest }: tree.TreeItemLabelProps): Element>
				</tree.item(alias) function item({ open, leaf, level, disabled, onChange, children, ...rest }: tree.TreeItemProps): Element>
			</tree.itemcontent(alias) function itemcontent({ children, ...rest }: tree.TreeItemContentProps): Element>
		</tree.item(alias) function item({ open, leaf, level, disabled, onChange, children, ...rest }: tree.TreeItemProps): Element>
		<tree.item(alias) function item({ open, leaf, level, disabled, onChange, children, ...rest }: tree.TreeItemProps): Element leaf(property) leaf?: boolean | undefinedThis node has no children. A leaf reports no open state at all, which is the WAI-ARIA rule a reader needs to tell "nothing to open" from "closed". level(property) level?: number | undefinedHow deep this node sits, counting from 1. It is written rather than read off the enclosing node, because a component that roots an instance of a family cannot also read the enclosing instance of that same family.={1}>
			<tree.itemlabel(alias) function itemlabel({ children, ...rest }: tree.TreeItemLabelProps): Element>README.md</tree.itemlabel(alias) function itemlabel({ children, ...rest }: tree.TreeItemLabelProps): Element>
		</tree.item(alias) function item({ open, leaf, level, disabled, onChange, children, ...rest }: tree.TreeItemProps): Element>
	</tree.root(alias) function root({ disabled, children, onFocusin, onKeydown, ...rest }: tree.TreeRootProps): Element>
}

The whole tree holds one tab stop, and typing jumps to the next row whose label starts with what you typed. A row with no children is leaf, and a leaf reports no open state at all — that is the WAI-ARIA rule a reader needs to tell "nothing to open" apart from "closed". Depth is written on the row rather than counted, because a node that roots its own instance cannot read the one enclosing it. Name the tree with a plain aria-label on the root.

Anatomy

• tree.root — the container. It owns the tab stop and the typeahead.
• tree.label — the tree's own heading. It does not name the tree.
• tree.item — one node, declaring its level and whether it is a leaf.
• tree.itemtrigger — the control that opens and closes one node.
• tree.itemlabel — the node's name. Typeahead matches on it.
• tree.itemindicator — a decorative open/closed marker, hidden from a reader.
• tree.itemcontent — the container of one node's children.

It writes ui-open, ui-closed, ui-leaf, ui-disabled and ui-value.

Props on tree.root

Prop	Type	What it does
disabled	boolean	Nobody can open or close anything.

Everything a <div> accepts reaches the element too, aria-label included — which is how the tree is named. tree.item carries the rest: open, leaf, level and its own onChange.