@allxsmith/bestax-bulma 5.36.1 → 5.37.0

package/dist/index.esm.js

@@ -30,6 +30,7 @@ export { Toast, ToastContainer, toast } from './esm/components/Toast.js';
 export { Dialog, DialogContainer, dialog } from './esm/components/Dialog.js';
 export { Carousel, CarouselItem } from './esm/components/Carousel.js';
 export { Reveal } from './esm/components/Reveal.js';
+export { TreeView, TreeViewItem } from './esm/components/TreeView.js';
 export { Block } from './esm/elements/Block.js';
 export { Box } from './esm/elements/Box.js';
 export { Button } from './esm/elements/Button.js';

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/types/components/TreeView.d.ts

@@ -0,0 +1,115 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+/**
+ * How items are picked: `none`, nothing is; `single`, one item at a time;
+ * `checkbox`, any number, with a box on every item and mixed parents.
+ */
+export type TreeViewSelectionMode = 'none' | 'single' | 'checkbox';
+/**
+ * Props for the TreeView component. The helper props, the other attributes
+ * and the `ref` land on the `<ul role="tree">`.
+ *
+ * @extraProp {string} [aria-label] - Names the tree, such as "Files". A tree needs a name, so pass this or `aria-labelledby`, and a development build warns when it has neither.
+ * @extraProp {string} [aria-labelledby] - The id of a visible heading or label that names the tree, in place of `aria-label`.
+ * @extraProp {React.Ref<HTMLUListElement>} [ref] - Ref forwarded to the `<ul>`.
+ */
+export interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLUListElement>, keyof BulmaClassesProps | 'role' | 'onSelect' | 'defaultValue' | 'defaultChecked'>, BulmaClassesProps {
+    /**
+     * `TreeView.Item`s, nested inside each other for their children. Render
+     * an item's children whenever you have them, open or not: the tree hides
+     * them while it's closed.
+     */
+    children?: React.ReactNode;
+    /**
+     * `none`: nothing is picked, and Enter and Space open and close a parent.
+     * `single`: one item, picked with Enter, Space or a click.
+     * `checkbox`: any number, checked with Space or a click. A check reaches
+     * every enabled item under it, and a parent with some of them checked is mixed.
+     */
+    selectionMode?: TreeViewSelectionMode;
+    /**
+     * The selected item's value when you hold the state, or `null` for none.
+     * Read with `single` only. Picking an item then only calls
+     * `onSelectedChange`, and nothing changes until you pass the new value.
+     */
+    selected?: string | null;
+    /** The item selected to begin with, when the tree holds its own state. Read with `single` only. */
+    defaultSelected?: string | null;
+    /**
+     * Called with the value of the item picked. Not called for the one
+     * already selected, and moving focus never calls it.
+     */
+    onSelectedChange?: (value: string) => void;
+    /**
+     * The checked items' values when you hold the state. Read with `checkbox`
+     * only. A value checks its item, and an enabled item also counts as checked
+     * when any item above it is in the list, so a parent's value stands for its
+     * whole branch, loaded or not. A disabled item is checked only by its own value.
+     */
+    checked?: string[];
+    /** The values checked to begin with, when the tree holds its own state. Read with `checkbox` only. */
+    defaultChecked?: string[];
+    /**
+     * Called after a check or an uncheck with every item that now shows
+     * checked, parents included, plus any earlier value that matches no item
+     * the tree knows, left as it was. The order means nothing. Passed back as
+     * `checked`, the list shows the same boxes.
+     */
+    onCheckedChange?: (checked: string[]) => void;
+    /**
+     * The open items' values when you hold the state. A value stays in the
+     * list while its item's parent is closed, so the item reopens as it was.
+     */
+    expanded?: string[];
+    /** The items open to begin with, when the tree holds its own state. */
+    defaultExpanded?: string[];
+    /** Called with the new list whenever an item opens or closes, `*` included. */
+    onExpandedChange?: (expanded: string[]) => void;
+    /** The text size, as Bulma's menu sizes it. The rows, the indent and the chevron scale with it. */
+    size?: 'small' | 'medium' | 'large';
+}
+/**
+ * Props for TreeView.Item, one row and, nested in it, its children. The other
+ * attributes and the `ref` land on its `<li role="treeitem">`.
+ *
+ * @extraProp {React.Ref<HTMLLIElement>} [ref] - Ref forwarded to the `<li>`.
+ */
+export interface TreeViewItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'role' | 'value' | 'onSelect' | 'children'> {
+    /** **Required.** Identifies the item in `selected`, `checked` and `expanded`. Unique in the tree. */
+    value: string;
+    /**
+     * **Required.** What the row shows, and the item's name for assistive
+     * tech. Nothing in it should be a link or a button: a tree item does one
+     * thing, and nothing else in its row takes focus.
+     */
+    label: React.ReactNode;
+    /** A picture before the label: an `Icon` name, or a node. Hidden from assistive tech. */
+    icon?: React.ReactNode;
+    /**
+     * `TreeView.Item`s under this one. Render them whenever you have them,
+     * open or not: the tree hides them while it's closed, and a checkbox tree
+     * needs them to know what a check reaches.
+     */
+    children?: React.ReactNode;
+    /** Shows the item as a parent before its children are known, such as a folder that loads when it opens. */
+    hasChildren?: boolean;
+    /**
+     * Reachable with the arrow keys, Home, End and type-ahead, so a screen
+     * reader finds it, but never selected, checked, opened or closed. One
+     * that's already open stays open.
+     */
+    disabled?: boolean;
+}
+/**
+ * One item in the tree: a row with its chevron, its box, its icon and its label, and, while it's open, a group of the items under it.
+ *
+ * @function
+ * @param {TreeViewItemProps} props - Props for TreeView.Item.
+ * @param {React.Ref<HTMLLIElement>} ref - Forwarded ref to the `<li>`.
+ * @returns {JSX.Element | null} The rendered item, or nothing under a closed one.
+ */
+export declare const TreeViewItem: React.ForwardRefExoticComponent<TreeViewItemProps & React.RefAttributes<HTMLLIElement>>;
+export declare const TreeView: React.ForwardRefExoticComponent<TreeViewProps & React.RefAttributes<HTMLUListElement>> & {
+    Item: React.ForwardRefExoticComponent<TreeViewItemProps & React.RefAttributes<HTMLLIElement>>;
+};
+export default TreeView;

package/dist/types/helpers/typeahead.d.ts

@@ -0,0 +1,41 @@
+/** How long typed characters keep adding up to one search, in milliseconds. */
+export declare const TYPEAHEAD_TIMEOUT = 500;
+/**
+ * The text typing finds an element by: what it says, without what's hidden
+ * from assistive technology, such as an icon whose glyph is a ligature's name.
+ */
+export declare function typeaheadText(element: Element): string;
+/**
+ * The item typing `search` moves to, or none. A single character looks from
+ * the item after the focused one, so typing the same letter again cycles
+ * through the items that start with it, and so does a run of one letter
+ * ("dd"). A longer search looks from the focused item, so typing more of
+ * its own text keeps it.
+ *
+ * @param items - The items typing can reach, in the order they're shown.
+ * @param search - What's been typed, lowercased.
+ * @param current - The focused item's index in `items`, or -1 for none.
+ * @param textOf - The text an item is found by. By default it's the item's
+ * own, read by `typeaheadText`.
+ */
+export declare function typeaheadMatch<T extends Element>(items: T[], search: string, current: number, textOf?: (item: T) => string): T | undefined;
+/** What `useTypeahead` returns. */
+export interface Typeahead {
+    /**
+     * Adds a typed character to the search and returns the whole search,
+     * lowercased. Characters typed within `TYPEAHEAD_TIMEOUT` of each other
+     * add up, and after that the next one starts a new search.
+     */
+    type: (char: string) => string;
+    /** Forgets what has been typed, so the next character starts a new search. */
+    reset: () => void;
+}
+/**
+ * Keeps what has been typed for a type-ahead search, and forgets it once
+ * `TYPEAHEAD_TIMEOUT` passes with nothing typed. Pair it with
+ * `typeaheadMatch` to find the item the search names.
+ *
+ * @function useTypeahead
+ * @returns A way to add a character to the search, and a way to forget it.
+ */
+export declare function useTypeahead(): Typeahead;

package/dist/types/helpers/useMenuKeys.d.ts

@@ -1,4 +1,5 @@
 import type { KeyboardEvent } from 'react';
+export { TYPEAHEAD_TIMEOUT } from './typeahead.js';
 /**
  * Every menu-item role, so an item a caller gives `menuitemcheckbox` or
  * `menuitemradio` (a filter or sort menu) stays reachable.
@@ -11,8 +12,6 @@ export declare const MENU_ITEM_SELECTOR = "[role=\"menuitem\"], [role=\"menuitem
 export declare function isEnabledMenuItem(item: Element): boolean;
 /** The items in `menu` the keys reach, in document order. */
 export declare function enabledMenuItems(menu: Element): HTMLElement[];
-/** How long typed characters keep adding up to one search, in milliseconds. */
-export declare const TYPEAHEAD_TIMEOUT = 500;
 /** What `useMenuKeys` returns. */
 export interface MenuKeys {
     /** The `keydown` handler for the `role="menu"` element. */

package/dist/types/helpers/useTreeView.d.ts

@@ -0,0 +1,88 @@
+import type React from 'react';
+import type { TreeViewSelectionMode } from '../components/TreeView.js';
+/** What an item tells the tree about itself when it registers. */
+export interface TreeViewItemRecord {
+    /** The value of the item it's in, or `null` at the top. */
+    parent: string | null;
+    disabled: boolean;
+    /** It has children, or `hasChildren` says it will. */
+    isParent: boolean;
+}
+/** An item as a key or a click on it sees it. */
+export interface TreeViewItemInfo extends TreeViewItemRecord {
+    value: string;
+    open: boolean;
+}
+/** A box's state: checked, unchecked or mixed. */
+export type TreeViewCheckState = boolean | 'mixed';
+/**
+ * What an item shows of the selection: `selected` in a `single` tree,
+ * `checked` in a `checkbox` tree, and neither with `none`.
+ */
+export interface TreeViewItemState {
+    selected?: boolean;
+    checked?: TreeViewCheckState;
+}
+/** Options for `useTreeView`: the TreeView's own props. */
+export interface TreeViewOptions {
+    mode: TreeViewSelectionMode;
+    selected?: string | null;
+    defaultSelected: string | null;
+    onSelectedChange?: (value: string) => void;
+    checked?: string[];
+    defaultChecked: string[];
+    onCheckedChange?: (checked: string[]) => void;
+    expanded?: string[];
+    defaultExpanded: string[];
+    onExpandedChange?: (expanded: string[]) => void;
+}
+/** What `useTreeView` hands the root and its items. */
+export interface TreeViewEngine {
+    /** For the `<ul role="tree">`. */
+    treeRef: React.MutableRefObject<HTMLUListElement | null>;
+    /**
+     * Whether a closed item still renders its children, drawing nothing, so a
+     * check knows everything under it. Only a checkbox tree needs to.
+     */
+    rendersClosed: boolean;
+    /** The item that holds `tabIndex={0}`. */
+    tabStop: string | null;
+    isOpen: (value: string) => boolean;
+    /**
+     * What the item shows of the selection. `path` is the values of the items
+     * above it, which decide its box until the items have registered, as on
+     * the server.
+     */
+    stateOf: (value: string, path: string[], disabled: boolean) => TreeViewItemState;
+    /** Records an item from its layout effect. Returns the function that forgets it. */
+    register: (value: string, record: TreeViewItemRecord) => () => void;
+    /** For each item's `<li>` ref: records it, and notices focus leaving with it. */
+    setElement: (value: string, element: HTMLLIElement | null) => void;
+    /** Focus arrived on the item's own `<li>`. */
+    onFocus: (value: string, element: HTMLLIElement) => void;
+    /** Focus left the item's own `<li>`. */
+    onBlur: () => void;
+    /** A key on the item's `<li>`, after its own `onKeyDown`. */
+    onKeyDown: (event: React.KeyboardEvent<HTMLLIElement>, item: TreeViewItemInfo) => void;
+    /**
+     * A click on the item's row, or with `onToggle` on its chevron. Focus and
+     * the tab stop move to the item.
+     */
+    onClick: (element: HTMLLIElement, item: TreeViewItemInfo, onToggle: boolean) => void;
+}
+/**
+ * The open state, the selection, the keys, the tab stop and the registry of
+ * a TreeView (#1096). Focus moves for real, with a roving tabindex, rather
+ * than through `aria-activedescendant`.
+ *
+ * Every item registers its value, its parent and whether it's disabled from
+ * a layout effect. In a checkbox tree a closed item's children still render
+ * and register while drawing nothing, so the registry knows every item and a
+ * check reaches all of them. The keys read the items on the page, in
+ * document order, each time they need them.
+ *
+ * @function useTreeView
+ * @param options - The TreeView's props.
+ * @returns The state and handlers the root and its items wire up.
+ */
+export declare function useTreeView(options: TreeViewOptions): TreeViewEngine;

package/dist/types/index.d.ts

@@ -29,6 +29,7 @@ export * from './components/Toast.js';
 export * from './components/Dialog.js';
 export * from './components/Carousel.js';
 export * from './components/Reveal.js';
+export * from './components/TreeView.js';
 export * from './elements/Block.js';
 export * from './elements/Box.js';
 export * from './elements/Button.js';

package/dist/types-cjs/components/TreeView.d.ts

@@ -0,0 +1,115 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+/**
+ * How items are picked: `none`, nothing is; `single`, one item at a time;
+ * `checkbox`, any number, with a box on every item and mixed parents.
+ */
+export type TreeViewSelectionMode = 'none' | 'single' | 'checkbox';
+/**
+ * Props for the TreeView component. The helper props, the other attributes
+ * and the `ref` land on the `<ul role="tree">`.
+ *
+ * @extraProp {string} [aria-label] - Names the tree, such as "Files". A tree needs a name, so pass this or `aria-labelledby`, and a development build warns when it has neither.
+ * @extraProp {string} [aria-labelledby] - The id of a visible heading or label that names the tree, in place of `aria-label`.
+ * @extraProp {React.Ref<HTMLUListElement>} [ref] - Ref forwarded to the `<ul>`.
+ */
+export interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLUListElement>, keyof BulmaClassesProps | 'role' | 'onSelect' | 'defaultValue' | 'defaultChecked'>, BulmaClassesProps {
+    /**
+     * `TreeView.Item`s, nested inside each other for their children. Render
+     * an item's children whenever you have them, open or not: the tree hides
+     * them while it's closed.
+     */
+    children?: React.ReactNode;
+    /**
+     * `none`: nothing is picked, and Enter and Space open and close a parent.
+     * `single`: one item, picked with Enter, Space or a click.
+     * `checkbox`: any number, checked with Space or a click. A check reaches
+     * every enabled item under it, and a parent with some of them checked is mixed.
+     */
+    selectionMode?: TreeViewSelectionMode;
+    /**
+     * The selected item's value when you hold the state, or `null` for none.
+     * Read with `single` only. Picking an item then only calls
+     * `onSelectedChange`, and nothing changes until you pass the new value.
+     */
+    selected?: string | null;
+    /** The item selected to begin with, when the tree holds its own state. Read with `single` only. */
+    defaultSelected?: string | null;
+    /**
+     * Called with the value of the item picked. Not called for the one
+     * already selected, and moving focus never calls it.
+     */
+    onSelectedChange?: (value: string) => void;
+    /**
+     * The checked items' values when you hold the state. Read with `checkbox`
+     * only. A value checks its item, and an enabled item also counts as checked
+     * when any item above it is in the list, so a parent's value stands for its
+     * whole branch, loaded or not. A disabled item is checked only by its own value.
+     */
+    checked?: string[];
+    /** The values checked to begin with, when the tree holds its own state. Read with `checkbox` only. */
+    defaultChecked?: string[];
+    /**
+     * Called after a check or an uncheck with every item that now shows
+     * checked, parents included, plus any earlier value that matches no item
+     * the tree knows, left as it was. The order means nothing. Passed back as
+     * `checked`, the list shows the same boxes.
+     */
+    onCheckedChange?: (checked: string[]) => void;
+    /**
+     * The open items' values when you hold the state. A value stays in the
+     * list while its item's parent is closed, so the item reopens as it was.
+     */
+    expanded?: string[];
+    /** The items open to begin with, when the tree holds its own state. */
+    defaultExpanded?: string[];
+    /** Called with the new list whenever an item opens or closes, `*` included. */
+    onExpandedChange?: (expanded: string[]) => void;
+    /** The text size, as Bulma's menu sizes it. The rows, the indent and the chevron scale with it. */
+    size?: 'small' | 'medium' | 'large';
+}
+/**
+ * Props for TreeView.Item, one row and, nested in it, its children. The other
+ * attributes and the `ref` land on its `<li role="treeitem">`.
+ *
+ * @extraProp {React.Ref<HTMLLIElement>} [ref] - Ref forwarded to the `<li>`.
+ */
+export interface TreeViewItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'role' | 'value' | 'onSelect' | 'children'> {
+    /** **Required.** Identifies the item in `selected`, `checked` and `expanded`. Unique in the tree. */
+    value: string;
+    /**
+     * **Required.** What the row shows, and the item's name for assistive
+     * tech. Nothing in it should be a link or a button: a tree item does one
+     * thing, and nothing else in its row takes focus.
+     */
+    label: React.ReactNode;
+    /** A picture before the label: an `Icon` name, or a node. Hidden from assistive tech. */
+    icon?: React.ReactNode;
+    /**
+     * `TreeView.Item`s under this one. Render them whenever you have them,
+     * open or not: the tree hides them while it's closed, and a checkbox tree
+     * needs them to know what a check reaches.
+     */
+    children?: React.ReactNode;
+    /** Shows the item as a parent before its children are known, such as a folder that loads when it opens. */
+    hasChildren?: boolean;
+    /**
+     * Reachable with the arrow keys, Home, End and type-ahead, so a screen
+     * reader finds it, but never selected, checked, opened or closed. One
+     * that's already open stays open.
+     */
+    disabled?: boolean;
+}
+/**
+ * One item in the tree: a row with its chevron, its box, its icon and its label, and, while it's open, a group of the items under it.
+ *
+ * @function
+ * @param {TreeViewItemProps} props - Props for TreeView.Item.
+ * @param {React.Ref<HTMLLIElement>} ref - Forwarded ref to the `<li>`.
+ * @returns {JSX.Element | null} The rendered item, or nothing under a closed one.
+ */
+export declare const TreeViewItem: React.ForwardRefExoticComponent<TreeViewItemProps & React.RefAttributes<HTMLLIElement>>;
+export declare const TreeView: React.ForwardRefExoticComponent<TreeViewProps & React.RefAttributes<HTMLUListElement>> & {
+    Item: React.ForwardRefExoticComponent<TreeViewItemProps & React.RefAttributes<HTMLLIElement>>;
+};
+export default TreeView;

package/dist/types-cjs/helpers/typeahead.d.ts

@@ -0,0 +1,41 @@
+/** How long typed characters keep adding up to one search, in milliseconds. */
+export declare const TYPEAHEAD_TIMEOUT = 500;
+/**
+ * The text typing finds an element by: what it says, without what's hidden
+ * from assistive technology, such as an icon whose glyph is a ligature's name.
+ */
+export declare function typeaheadText(element: Element): string;
+/**
+ * The item typing `search` moves to, or none. A single character looks from
+ * the item after the focused one, so typing the same letter again cycles
+ * through the items that start with it, and so does a run of one letter
+ * ("dd"). A longer search looks from the focused item, so typing more of
+ * its own text keeps it.
+ *
+ * @param items - The items typing can reach, in the order they're shown.
+ * @param search - What's been typed, lowercased.
+ * @param current - The focused item's index in `items`, or -1 for none.
+ * @param textOf - The text an item is found by. By default it's the item's
+ * own, read by `typeaheadText`.
+ */
+export declare function typeaheadMatch<T extends Element>(items: T[], search: string, current: number, textOf?: (item: T) => string): T | undefined;
+/** What `useTypeahead` returns. */
+export interface Typeahead {
+    /**
+     * Adds a typed character to the search and returns the whole search,
+     * lowercased. Characters typed within `TYPEAHEAD_TIMEOUT` of each other
+     * add up, and after that the next one starts a new search.
+     */
+    type: (char: string) => string;
+    /** Forgets what has been typed, so the next character starts a new search. */
+    reset: () => void;
+}
+/**
+ * Keeps what has been typed for a type-ahead search, and forgets it once
+ * `TYPEAHEAD_TIMEOUT` passes with nothing typed. Pair it with
+ * `typeaheadMatch` to find the item the search names.
+ *
+ * @function useTypeahead
+ * @returns A way to add a character to the search, and a way to forget it.
+ */
+export declare function useTypeahead(): Typeahead;

package/dist/types-cjs/helpers/useMenuKeys.d.ts

@@ -1,4 +1,5 @@
 import type { KeyboardEvent } from 'react';
+export { TYPEAHEAD_TIMEOUT } from './typeahead.js';
 /**
  * Every menu-item role, so an item a caller gives `menuitemcheckbox` or
  * `menuitemradio` (a filter or sort menu) stays reachable.
@@ -11,8 +12,6 @@ export declare const MENU_ITEM_SELECTOR = "[role=\"menuitem\"], [role=\"menuitem
 export declare function isEnabledMenuItem(item: Element): boolean;
 /** The items in `menu` the keys reach, in document order. */
 export declare function enabledMenuItems(menu: Element): HTMLElement[];
-/** How long typed characters keep adding up to one search, in milliseconds. */
-export declare const TYPEAHEAD_TIMEOUT = 500;
 /** What `useMenuKeys` returns. */
 export interface MenuKeys {
     /** The `keydown` handler for the `role="menu"` element. */

package/dist/types-cjs/helpers/useTreeView.d.ts

@@ -0,0 +1,88 @@
+import type React from 'react';
+import type { TreeViewSelectionMode } from '../components/TreeView.js';
+/** What an item tells the tree about itself when it registers. */
+export interface TreeViewItemRecord {
+    /** The value of the item it's in, or `null` at the top. */
+    parent: string | null;
+    disabled: boolean;
+    /** It has children, or `hasChildren` says it will. */
+    isParent: boolean;
+}
+/** An item as a key or a click on it sees it. */
+export interface TreeViewItemInfo extends TreeViewItemRecord {
+    value: string;
+    open: boolean;
+}
+/** A box's state: checked, unchecked or mixed. */
+export type TreeViewCheckState = boolean | 'mixed';
+/**
+ * What an item shows of the selection: `selected` in a `single` tree,
+ * `checked` in a `checkbox` tree, and neither with `none`.
+ */
+export interface TreeViewItemState {
+    selected?: boolean;
+    checked?: TreeViewCheckState;
+}
+/** Options for `useTreeView`: the TreeView's own props. */
+export interface TreeViewOptions {
+    mode: TreeViewSelectionMode;
+    selected?: string | null;
+    defaultSelected: string | null;
+    onSelectedChange?: (value: string) => void;
+    checked?: string[];
+    defaultChecked: string[];
+    onCheckedChange?: (checked: string[]) => void;
+    expanded?: string[];
+    defaultExpanded: string[];
+    onExpandedChange?: (expanded: string[]) => void;
+}
+/** What `useTreeView` hands the root and its items. */
+export interface TreeViewEngine {
+    /** For the `<ul role="tree">`. */
+    treeRef: React.MutableRefObject<HTMLUListElement | null>;
+    /**
+     * Whether a closed item still renders its children, drawing nothing, so a
+     * check knows everything under it. Only a checkbox tree needs to.
+     */
+    rendersClosed: boolean;
+    /** The item that holds `tabIndex={0}`. */
+    tabStop: string | null;
+    isOpen: (value: string) => boolean;
+    /**
+     * What the item shows of the selection. `path` is the values of the items
+     * above it, which decide its box until the items have registered, as on
+     * the server.
+     */
+    stateOf: (value: string, path: string[], disabled: boolean) => TreeViewItemState;
+    /** Records an item from its layout effect. Returns the function that forgets it. */
+    register: (value: string, record: TreeViewItemRecord) => () => void;
+    /** For each item's `<li>` ref: records it, and notices focus leaving with it. */
+    setElement: (value: string, element: HTMLLIElement | null) => void;
+    /** Focus arrived on the item's own `<li>`. */
+    onFocus: (value: string, element: HTMLLIElement) => void;
+    /** Focus left the item's own `<li>`. */
+    onBlur: () => void;
+    /** A key on the item's `<li>`, after its own `onKeyDown`. */
+    onKeyDown: (event: React.KeyboardEvent<HTMLLIElement>, item: TreeViewItemInfo) => void;
+    /**
+     * A click on the item's row, or with `onToggle` on its chevron. Focus and
+     * the tab stop move to the item.
+     */
+    onClick: (element: HTMLLIElement, item: TreeViewItemInfo, onToggle: boolean) => void;
+}
+/**
+ * The open state, the selection, the keys, the tab stop and the registry of
+ * a TreeView (#1096). Focus moves for real, with a roving tabindex, rather
+ * than through `aria-activedescendant`.
+ *
+ * Every item registers its value, its parent and whether it's disabled from
+ * a layout effect. In a checkbox tree a closed item's children still render
+ * and register while drawing nothing, so the registry knows every item and a
+ * check reaches all of them. The keys read the items on the page, in
+ * document order, each time they need them.
+ *
+ * @function useTreeView
+ * @param options - The TreeView's props.
+ * @returns The state and handlers the root and its items wire up.
+ */
+export declare function useTreeView(options: TreeViewOptions): TreeViewEngine;

package/dist/types-cjs/index.d.ts

@@ -29,6 +29,7 @@ export * from './components/Toast.js';
 export * from './components/Dialog.js';
 export * from './components/Carousel.js';
 export * from './components/Reveal.js';
+export * from './components/TreeView.js';
 export * from './elements/Block.js';
 export * from './elements/Box.js';
 export * from './elements/Button.js';