@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.0

package/tooltip/index.jsx

@@ -0,0 +1,193 @@
+// Ported from React Aria Components (Tooltip.tsx: TooltipTrigger, Tooltip, TooltipInner,
+// TooltipContext, TooltipTriggerStateContext), Apache-2.0, © Adobe.
+// A tooltip displays a description of an element on hover or focus. TooltipTrigger wraps around a
+// trigger element and a Tooltip (`<TooltipTrigger><Button/><Tooltip>Edit</Tooltip></TooltipTrigger>`).
+// Rivet:
+// - TooltipTrigger renders no element: the trigger props reach its focusable child through
+//   FocusableProvider (RAC) — a cdk Button / Link, or a custom element wrapped in `<Focusable>`. The
+//   provider's `ref` is the trigger element (`triggerRef`: positioning target, `aria-describedby` set while
+//   open by `attachTooltip`).
+// - Tooltip renders in the div overlay layer (`<Portal>`, no focus management: not modal, focus never
+//   moves) while open or exiting; the presence sits in its own binding site
+//   (`span[data-rv-overlay-anchor]`, `display: contents`), so a resumed page re-creates only the
+//   tooltip, never the trigger. Nothing renders at SSR while closed.
+// - enter / exit: `createEnterAnimation` / `createExitAnimation` (`@rivetjs/cdk/animation`), skipped
+//   while moving between warm tooltips (`state.shouldSkipAnimation`); `data-entering` / `data-exiting`.
+//   The exit state lives on the outer Tooltip (`createExitAnimationState`), its effect in TooltipInner
+//   (`watchExitAnimation`): a closed tooltip records no client effect (a resumed page stays cold at load).
+// - render props are accessors (`placement()`, `isEntering()`, `isExiting()`); `class` (RAC
+//   `className`), default `rv-Tooltip`; OverlayArrow through `OverlayArrowContext`.
+// - the PortalProvider container is resolved by Tooltip outside its presence (a re-created region has
+//   no context above it).
+// - collection build pass (`isHidden()`): children render directly.
+// Deviations: no `UNSTABLE_portalContainer` (PortalProvider only); `render` (RAC DOMRenderProps) on the tooltip element: given, the attributes object (handlers included) goes to `render(attrs, TooltipRenderProps)` instead of the default `<div>`.
+import {} from "../utils/render.js";
+import { read as readAccessor } from "../interactions/utils.js";
+import { createContext, signal, untrack, useContext } from "@rivetjs/reactivity";
+import { Show, clientEffect, ref as createRef } from "@rivetjs/runtime/dom";
+import { resumableContext } from "@rivetjs/runtime/resume-format";
+import { isSlot, renderSlot } from "@rivetjs/runtime/slot";
+import { Provider, contextProps } from "../slots/index.jsx";
+import { createEnterAnimation, createExitAnimationState, watchExitAnimation } from "../utils/animation.jsx";
+import { dataBool } from "../utils/data-attrs.jsx";
+import { createId } from "../utils/id.js";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { isHidden } from "../collections/components.jsx";
+import { FocusableProvider } from "../focus/focusable.jsx";
+import { OverlayArrowContext } from "../overlay/contexts.js";
+import { Portal, PortalContext } from "../portal/index.jsx";
+import { createTooltipTriggerState } from "../state/tooltip.js";
+import { attachTooltip, tooltipPointerEnter, tooltipPointerLeave, tooltipTriggerBlur, tooltipTriggerFocus, tooltipTriggerPointerEnter, tooltipTriggerPointerLeave, } from "./behaviour.jsx";
+import { renderPropsOf } from "../slots/index.jsx";
+import { hasLive, isLive, liveAt, liveOptions, liveView } from "../utils/live.jsx";
+/** TooltipTrigger props that stay live (LIVE-SWEEP round 2: read at event time); `isOpen` is controlled. */
+const TRIGGER_LIVE = ["isDisabled", "delay", "closeDelay", "trigger", "shouldCloseOnPress"];
+export { createTooltipTriggerState, openTooltip, closeTooltip } from "../state/tooltip.js";
+/** RAC `TooltipTriggerStateContext`: the state of the nearest TooltipTrigger. */
+export const TooltipTriggerStateContext = resumableContext(createContext(null, { id: "rv-tooltip-trigger-state" }));
+/** RAC `TooltipContext`: props for the Tooltip inside a TooltipTrigger (`triggerRef`, the tooltip `id`). */
+export const TooltipContext = resumableContext(createContext(null, { id: "rv-tooltip" }));
+/**
+ * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing the
+ * Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip relative to
+ * the trigger.
+ */
+export function TooltipTrigger(props) {
+    // Live props: a controlled `isOpen={open()}` stays live (accessor; `controllable` reads it, never writes it).
+    const live = hasLive(props) ? liveOptions(props, TRIGGER_LIVE, ["isOpen"]) : props;
+    const state = createTooltipTriggerState(live);
+    const triggerRef = createRef();
+    const tooltipId = createId();
+    const options = { isDisabled: live.isDisabled, trigger: live.trigger, shouldCloseOnPress: live.shouldCloseOnPress };
+    const children = props.children;
+    return (<Provider values={[
+            [TooltipTriggerStateContext, state],
+            [TooltipContext, { id: tooltipId, triggerRef }],
+        ]}>
+      {() => (<FocusableProvider ref={triggerRef} onPointerEnter={(event) => tooltipTriggerPointerEnter(event, options, state)} onPointerLeave={(event) => tooltipTriggerPointerLeave(event, options, state)} onFocus={(event) => tooltipTriggerFocus(event, options, state)} onBlur={(event) => tooltipTriggerBlur(event, options, state)}>
+          {children}
+        </FocusableProvider>)}
+    </Provider>);
+}
+/** A tooltip displays a description of an element on hover or focus. */
+export function Tooltip(props) {
+    const element = createRef();
+    const [merged, mergedRef] = contextProps(props, element, TooltipContext);
+    const p = merged;
+    // The user's own ref receives the element too.
+    const ownRef = props.ref;
+    if (ownRef)
+        clientEffect(() => {
+            const el = element() ?? null;
+            untrack(() => {
+                if (typeof ownRef === "function") {
+                    const signalRef = ownRef;
+                    if (signalRef.set)
+                        signalRef.set(el ?? undefined);
+                    else
+                        ownRef(el);
+                }
+                else
+                    ownRef.current = el;
+            });
+        });
+    // If we are in a hidden tree, we still need to preserve our children.
+    if (isHidden()) {
+        const children = p.children;
+        if (typeof children === "function" && !isSlot(children))
+            return null;
+        return renderSlot(children);
+    }
+    const contextState = useContext(TooltipTriggerStateContext);
+    const state = p.isOpen != null || p.defaultOpen != null || !contextState ? createTooltipTriggerState(liveOptions(p, [], ["isOpen"])) : contextState;
+    // The exit effect is attached in TooltipInner (mounted while open / exiting): a closed tooltip records no client
+    // effect, so a resumed page with closed tooltips stays cold.
+    const exitAnimation = createExitAnimationState(state.isOpen);
+    const explicitExiting = p.isExiting;
+    // Closing instantly (swapping between warm tooltips) skips the exit animation.
+    const isExiting = () => !!readAccessor(explicitExiting) || (!state.shouldSkipAnimation() && exitAnimation.isExiting());
+    // Resolved here (a selector / ref serializes): a re-created tooltip region has no context above it.
+    const mount = useContext(PortalContext);
+    const id = p.id ?? createId();
+    return (<span data-rv-overlay-anchor="" style={{ display: "contents" }}>
+      <Show when={() => state.isOpen() || isExiting()}>
+        {() => (<Portal mount={mount}>
+            <TooltipInner {...p} id={id} state={state} element={element} tooltipRef={mergedRef} isExitingNow={isExiting} exit={exitAnimation}/>
+          </Portal>)}
+      </Show>
+    </span>);
+}
+/** Global DOM events the tooltip handles itself (hover keeps it open); the user's handlers run from its own. */
+const OWNED = ["style", "onPointerEnter", "onPointerLeave"];
+function TooltipInner(props) {
+    const { state, element, tooltipRef, isExitingNow: isExiting, exit } = props;
+    watchExitAnimation(element, exit);
+    const arrowRef = createRef();
+    const placement = signal(null);
+    const arrowOffset = signal(null);
+    const enterAnimation = createEnterAnimation(element, () => !!placement());
+    const explicitEntering = props.isEntering;
+    const isEntering = () => !!readAccessor(explicitEntering) || (!state.shouldSkipAnimation() && enterAnimation());
+    const rp = renderPropsOf(props, {
+        defaultClassName: "rv-Tooltip",
+        values: { placement, isEntering, isExiting, state },
+    });
+    const options = {
+        triggerRef: props.triggerRef ?? null,
+        arrowRef,
+        placement: props.placement ?? "top",
+        offset: props.offset,
+        crossOffset: props.crossOffset,
+        containerPadding: props.containerPadding,
+        shouldFlip: props.shouldFlip,
+        arrowBoundaryOffset: props.arrowBoundaryOffset,
+        placement$: placement,
+        arrowOffset$: arrowOffset,
+    };
+    clientEffect(() => {
+        const el = element();
+        if (!el || !state.isOpen())
+            return;
+        // RAC: overlayProps' zIndex is overridden by the render props' style.
+        return attachTooltip(el, state, { ...options, zIndex: untrack(() => rp.style()?.zIndex) != null ? null : undefined });
+    });
+    const hover = { trigger: isLive(props, "trigger") ? liveAt(liveView(props, ["trigger"]), "trigger") : props.trigger };
+    const { onPointerEnter, onPointerLeave } = props;
+    // Read up front: an element with a spread is one binding; it captures these locals, not `props`.
+    const domProps = globalDOMProps(props, OWNED), id = props.id, ariaLabel = props["aria-label"], ariaLabelledBy = props["aria-labelledby"], ariaDescribedBy = props["aria-describedby"];
+    if (props.render) {
+        const attrs = {
+            ...domProps,
+            id,
+            role: "tooltip",
+            class: () => rp.class(),
+            style: () => rp.style(),
+            ref: tooltipRef,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": ariaDescribedBy,
+            "data-placement": () => placement() ?? undefined,
+            "data-entering": () => dataBool(isEntering()),
+            "data-exiting": () => dataBool(isExiting()),
+            onPointerEnter: (event) => {
+                tooltipPointerEnter(event, hover, state);
+                onPointerEnter?.(event);
+            },
+            onPointerLeave: (event) => {
+                tooltipPointerLeave(event, hover, state);
+                onPointerLeave?.(event);
+            },
+            children: () => <Provider values={[[OverlayArrowContext, { placement, ref: arrowRef, offset: arrowOffset }]]}>{() => () => rp.children()}</Provider>,
+        };
+        return props.render(attrs, { placement, isEntering, isExiting, state });
+    }
+    return (<div {...domProps} id={id} role="tooltip" class={rp.class()} style={rp.style()} ref={tooltipRef} aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} aria-describedby={ariaDescribedBy} data-placement={placement() ?? undefined} data-entering={dataBool(isEntering())} data-exiting={dataBool(isExiting())} onPointerEnter={(event) => {
+            tooltipPointerEnter(event, hover, state);
+            onPointerEnter?.(event);
+        }} onPointerLeave={(event) => {
+            tooltipPointerLeave(event, hover, state);
+            onPointerLeave?.(event);
+        }}>
+      <Provider values={[[OverlayArrowContext, { placement, ref: arrowRef, offset: arrowOffset }]]}>{() => () => rp.children()}</Provider>
+    </div>);
+}

package/tree/behaviour.d.ts

@@ -0,0 +1,51 @@
+import type { KeyboardDelegate, Node } from "../collections/types.js";
+import { type AriaGridListItemOptions, type AriaGridListOptions, type GridListItemAria, type GridListStateLike } from "../grid-list/behaviour.js";
+export interface AriaTreeOptions extends Omit<AriaGridListOptions, "shouldFocusWrap"> {
+    /** An optional keyboard delegate implementation for type to select, to override the default. */
+    keyboardDelegate?: KeyboardDelegate | undefined;
+}
+export interface TreeAria {
+    /** Props for the treegrid element. */
+    gridProps: Record<string, unknown>;
+}
+/**
+ * Provides the behavior and accessibility implementation for a single column treegrid component with
+ * interactive children (react-aria `useTree`). Reads state: bind values as accessors. Wire the grid
+ * handlers of `../grid-list/behaviour.ts` (`gridListKeyDown`, `gridListFocus`, …) on the element.
+ */
+export declare function treeProps(props: AriaTreeOptions, state: GridListStateLike<any>, hasTabbableChild?: boolean): TreeAria;
+export interface AriaTreeItemOptions extends Omit<AriaGridListItemOptions, "isVirtualized"> {
+    /** The node of the treegrid row. */
+    node: Node<unknown>;
+    /** Rivet: locale of the expand button label (default: the row's / document's language). */
+    locale?: string | undefined;
+}
+export interface TreeItemAria extends GridListItemAria {
+    /** Props for the tree grid row element. */
+    rowProps: Record<string, unknown>;
+    /** Props for the tree grid cell element within the tree grid list row. */
+    gridCellProps: Record<string, unknown>;
+    /** Props for the tree grid row description element, if any. */
+    descriptionProps: Record<string, unknown>;
+    /** Props for the tree grid row expand button (RAC Button props; `onPress` = `treeItemExpandPress`). */
+    expandButtonProps: TreeExpandButtonProps;
+}
+export interface TreeExpandButtonProps {
+    id: string;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    excludeFromTabOrder: true;
+    preventFocusOnPress: true;
+    "data-rv-prevent-focus": true;
+    onPress: (event?: unknown) => void;
+}
+/**
+ * Provides the behavior and accessibility implementation for a row in a tree grid list (react-aria
+ * `useTreeItem`). Reads state: bind values as accessors. Row handlers: `gridListItem<Event>`.
+ */
+export declare function treeItemProps(props: AriaTreeItemOptions, state: GridListStateLike<any>): TreeItemAria;
+/**
+ * The expand button's `onPress` (react-aria useTreeItem): toggles the row's expansion and moves
+ * focus state to it, unless the row is disabled. `isDisabled` defaults to the manager's answer.
+ */
+export declare function treeItemExpandPress(_event: unknown, props: Pick<AriaTreeItemOptions, "node">, state: GridListStateLike<any>, isDisabled?: boolean): void;

package/tree/behaviour.jsx

@@ -0,0 +1,51 @@
+import { gridListItemProps, gridListProps, } from "../grid-list/behaviour.js";
+import { formatMessage, localeOf } from "../_adapters/intl.js";
+import { useLabels } from "../utils/index.js";
+import { strings } from "./intl.js";
+/**
+ * Provides the behavior and accessibility implementation for a single column treegrid component with
+ * interactive children (react-aria `useTree`). Reads state: bind values as accessors. Wire the grid
+ * handlers of `../grid-list/behaviour.ts` (`gridListKeyDown`, `gridListFocus`, …) on the element.
+ */
+export function treeProps(props, state, hasTabbableChild = false) {
+    const { gridProps } = gridListProps(props, state, hasTabbableChild);
+    gridProps.role = "treegrid";
+    return { gridProps };
+}
+/**
+ * Provides the behavior and accessibility implementation for a row in a tree grid list (react-aria
+ * `useTreeItem`). Reads state: bind values as accessors. Row handlers: `gridListItem<Event>`.
+ */
+export function treeItemProps(props, state) {
+    const gridListAria = gridListItemProps(props, state);
+    const isExpanded = gridListAria.rowProps["aria-expanded"] === true;
+    const locale = props.locale ?? localeOf();
+    const rowId = gridListAria.rowProps.id;
+    const labelProps = useLabels({
+        id: rowId ? `${rowId}-chevron` : undefined,
+        "aria-label": isExpanded ? formatMessage(strings, locale, "collapse") : formatMessage(strings, locale, "expand"),
+        "aria-labelledby": rowId,
+    });
+    const expandButtonProps = {
+        onPress: (event) => treeItemExpandPress(event, props, state, gridListAria.isDisabled),
+        excludeFromTabOrder: true,
+        preventFocusOnPress: true,
+        "data-rv-prevent-focus": true,
+        ...labelProps,
+        id: labelProps.id,
+    };
+    // TODO (upstream): should it return a state specifically for isExpanded? Or is the aria attribute sufficient?
+    return { ...gridListAria, expandButtonProps };
+}
+/**
+ * The expand button's `onPress` (react-aria useTreeItem): toggles the row's expansion and moves
+ * focus state to it, unless the row is disabled. `isDisabled` defaults to the manager's answer.
+ */
+export function treeItemExpandPress(_event, props, state, isDisabled = state.selectionManager.isDisabled(props.node.key)) {
+    if (!isDisabled) {
+        const key = props.node.key;
+        state.toggleKey?.(key);
+        state.selectionManager.setFocused(true);
+        state.selectionManager.setFocusedKey(key);
+    }
+}

package/tree/cdk-index.d.ts

@@ -0,0 +1,2 @@
+export { TreeKeyManager, TREE_KEY_MANAGER, type Subscribable, type TreeKeyManagerFactory, type TreeKeyManagerItem, type TreeKeyManagerItems, type TreeKeyManagerOptions, type TreeKeyManagerStrategy, } from "./tree-key-manager.js";
+export { BaseTreeControl, FlatTreeControl, NestedTreeControl, type FlatTreeControlOptions, type NestedTreeControlOptions, type TreeChildren, type TreeControl, } from "./control.js";

package/tree/cdk-index.js

@@ -0,0 +1,6 @@
+// `@rivetjs/cdk/tree/cdk`: the Angular CDK tree pieces of the merged tree module (MIT, © Google LLC):
+// TreeKeyManager (src/cdk/a11y/key-manager/tree-key-manager*.ts) and the tree controls
+// (src/cdk/tree/control/*). The React Aria tree is `@rivetjs/cdk/tree` (RAC Tree) +
+// `@rivetjs/cdk/tree/behaviour` (useTree / useTreeItem).
+export { TreeKeyManager, TREE_KEY_MANAGER, } from "./tree-key-manager.js";
+export { BaseTreeControl, FlatTreeControl, NestedTreeControl, } from "./control.js";

package/tree/collection.d.ts

@@ -0,0 +1,16 @@
+import { BaseCollection } from "../collections/base.js";
+import type { Key, Node } from "../collections/types.js";
+export declare class TreeCollection<T> extends BaseCollection<T> {
+    private expandedKeys;
+    withExpandedKeys(lastExpandedKeys: Set<Key>, expandedKeys: Set<Key>): TreeCollection<T>;
+    private static cloneAncestorSections;
+    /** Whether `key` is expanded in this flattened view. */
+    isExpanded(key: Key): boolean;
+    [Symbol.iterator](): IterableIterator<Node<T>>;
+    getLastKey(): Key | null;
+    getKeyAfter(key: Key): Key | null;
+    getKeyBefore(key: Key): Key | null;
+    getChildren(key: Key): Iterable<Node<T>>;
+    getTextValue(key: Key): string;
+}
+export declare function areSetsEqual<T>(a: Set<T>, b: Set<T>): boolean;

package/tree/collection.js

@@ -0,0 +1,138 @@
+// Ported from react-aria-components (src/Tree.tsx: TreeCollection, areSetsEqual), Apache-2.0, © Adobe.
+//
+// The collection a RAC Tree renders: the BaseCollection built from `<TreeItem>` / `<TreeSection>`
+// parts, flattened for display by the expanded keys — iteration, `getKeyAfter` / `getKeyBefore` /
+// `getLastKey` only walk into expanded items (sections always), so keyboard navigation and the
+// rendered row list skip collapsed subtrees.
+// Rivet:
+// - `withExpandedKeys` clones ancestor section nodes exactly as upstream (React re-render trigger;
+//   harmless here, kept so virtualized sections see a new node object).
+// Deviation: none.
+import { BaseCollection } from "../collections/base.js";
+export class TreeCollection extends BaseCollection {
+    expandedKeys = new Set();
+    withExpandedKeys(lastExpandedKeys, expandedKeys) {
+        const collection = this.clone();
+        collection.expandedKeys = expandedKeys;
+        // Clone ancestor section nodes so a re-render sees a new node object for the changed section.
+        TreeCollection.cloneAncestorSections(expandedKeys, lastExpandedKeys, collection);
+        TreeCollection.cloneAncestorSections(lastExpandedKeys, expandedKeys, collection);
+        collection.frozen = this.frozen;
+        return collection;
+    }
+    // Diff lastExpandedKeys and expandedKeys so only what changed is cloned.
+    static cloneAncestorSections(keys, excludeSet, collection) {
+        for (const key of keys) {
+            if (!excludeSet.has(key)) {
+                let currentKey = key;
+                while (currentKey != null) {
+                    const item = collection.getItem(currentKey);
+                    if (item?.type === "section") {
+                        collection.keyMap.set(currentKey, item.clone());
+                        break;
+                    }
+                    else {
+                        currentKey = item?.parentKey ?? null;
+                    }
+                }
+            }
+        }
+    }
+    /** Whether `key` is expanded in this flattened view. */
+    isExpanded(key) {
+        return this.expandedKeys.has(key);
+    }
+    *[Symbol.iterator]() {
+        const firstKey = this.getFirstKey();
+        let node = firstKey != null ? this.getItem(firstKey) : null;
+        while (node) {
+            yield node;
+            if (node.type === "section") {
+                node = node.nextKey != null ? this.getItem(node.nextKey) : null;
+            }
+            else {
+                // This includes both item and content nodes; renderers skip content nodes.
+                const key = this.getKeyAfter(node.key);
+                node = key != null ? this.getItem(key) : null;
+            }
+        }
+    }
+    getLastKey() {
+        // Find the deepest expanded child: start from the last top-level key and walk down.
+        const key = this.lastKey;
+        if (key == null)
+            return null;
+        let node = this.getItem(key);
+        while (node?.lastChildKey != null && (node.type !== "item" || this.expandedKeys.has(node.key))) {
+            node = this.getItem(node.lastChildKey);
+        }
+        return node?.key ?? null;
+    }
+    getKeyAfter(key) {
+        let node = this.getItem(key);
+        if (!node)
+            return null;
+        if ((this.expandedKeys.has(node.key) || node.type !== "item") && node.firstChildKey != null) {
+            return node.firstChildKey;
+        }
+        while (node) {
+            if (node.nextKey != null)
+                return node.nextKey;
+            if (node.parentKey != null)
+                node = this.getItem(node.parentKey);
+            else
+                return null;
+        }
+        return null;
+    }
+    getKeyBefore(key) {
+        let node = this.getItem(key);
+        if (!node)
+            return null;
+        if (node.prevKey != null) {
+            node = this.getItem(node.prevKey);
+            // If the previous sibling is expanded, descend to its last visible descendant.
+            while (node && (node.type !== "item" || this.expandedKeys.has(node.key)) && node.lastChildKey != null) {
+                node = this.getItem(node.lastChildKey);
+            }
+            return node?.key ?? null;
+        }
+        return node.parentKey;
+    }
+    getChildren(key) {
+        const self = this;
+        return {
+            *[Symbol.iterator]() {
+                const parent = self.getItem(key);
+                let node = parent?.firstChildKey != null ? self.getItem(parent.firstChildKey) : null;
+                if (parent && parent.type === "section" && node) {
+                    // Stop once the node is null or the node is the parent's sibling.
+                    while (node && node.key !== parent.nextKey) {
+                        yield self.getItem(node.key);
+                        // This includes content nodes, which renderers skip.
+                        const next = self.getKeyAfter(node.key);
+                        node = next != null ? self.getItem(next) : null;
+                    }
+                }
+                else {
+                    while (node) {
+                        yield node;
+                        node = node.nextKey != null ? self.getItem(node.nextKey) : null;
+                    }
+                }
+            },
+        };
+    }
+    getTextValue(key) {
+        const item = this.getItem(key);
+        return item ? item.textValue : "";
+    }
+}
+export function areSetsEqual(a, b) {
+    if (a.size !== b.size)
+        return false;
+    for (const item of a)
+        if (!b.has(item))
+            return false;
+    return true;
+}

package/tree/control.d.ts

@@ -0,0 +1,125 @@
+import { SelectionModel } from "../collections/selection-model.js";
+import type { Subscribable } from "./tree-key-manager.js";
+/** Children of a data node: an array, a subscribable stream of arrays, or nothing. */
+export type TreeChildren<T> = Subscribable<T[]> | T[] | undefined | null;
+/**
+ * Tree control interface. User can implement TreeControl to expand/collapse dataNodes in the tree.
+ * The CdkTree uses this TreeControl to expand/collapse a node; it can also be used outside a tree.
+ *
+ * @deprecated Use one of levelAccessor or childrenAccessor instead.
+ */
+export interface TreeControl<T, K = T> {
+    /** The saved tree nodes data for `expandAll` action. */
+    dataNodes: T[];
+    /** The expansion model */
+    expansionModel: SelectionModel<K>;
+    /** Whether the data node is expanded or collapsed. Return true if it's expanded. */
+    isExpanded(dataNode: T): boolean;
+    /** Get all descendants of a data node */
+    getDescendants(dataNode: T): any[];
+    /** Expand or collapse data node */
+    toggle(dataNode: T): void;
+    /** Expand one data node */
+    expand(dataNode: T): void;
+    /** Collapse one data node */
+    collapse(dataNode: T): void;
+    /** Expand all the dataNodes in the tree */
+    expandAll(): void;
+    /** Collapse all the dataNodes in the tree */
+    collapseAll(): void;
+    /** Toggle a data node by expand/collapse it and all its descendants */
+    toggleDescendants(dataNode: T): void;
+    /** Expand a data node and all its descendants */
+    expandDescendants(dataNode: T): void;
+    /** Collapse a data node and all its descendants */
+    collapseDescendants(dataNode: T): void;
+    /** Get depth of a given data node, return the level number. This is for flat tree node. */
+    readonly getLevel: (dataNode: T) => number;
+    /** Whether the data node is expandable. Returns true if expandable. This is for flat tree node. */
+    readonly isExpandable: (dataNode: T) => boolean;
+    /** Gets a stream that emits whenever the given data node's children change. */
+    readonly getChildren: (dataNode: T) => TreeChildren<T>;
+}
+/**
+ * Base tree control. It has basic toggle/expand/collapse operations on a single data node.
+ *
+ * @deprecated Use one of levelAccessor or childrenAccessor.
+ */
+export declare abstract class BaseTreeControl<T, K = T> implements TreeControl<T, K> {
+    /** Gets a list of descendent data nodes of a subtree rooted at given data node recursively. */
+    abstract getDescendants(dataNode: T): T[];
+    /** Expands all data nodes in the tree. */
+    abstract expandAll(): void;
+    /** Saved data node for `expandAll` action. */
+    dataNodes: T[];
+    /** A selection model with multi-selection to track expansion status. */
+    expansionModel: SelectionModel<K>;
+    /** Returns the identifier by which a dataNode should be tracked, should its reference change. */
+    trackBy?: (dataNode: T) => K;
+    /** Get depth of a given data node, return the level number. This is for flat tree node. */
+    getLevel: (dataNode: T) => number;
+    /** Whether the data node is expandable. Returns true if expandable. This is for flat tree node. */
+    isExpandable: (dataNode: T) => boolean;
+    /** Gets a stream that emits whenever the given data node's children change. */
+    getChildren: (dataNode: T) => TreeChildren<T>;
+    /** Toggles one single data node's expanded/collapsed state. */
+    toggle(dataNode: T): void;
+    /** Expands one single data node. */
+    expand(dataNode: T): void;
+    /** Collapses one single data node. */
+    collapse(dataNode: T): void;
+    /** Whether a given data node is expanded or not. Returns true if the data node is expanded. */
+    isExpanded(dataNode: T): boolean;
+    /** Toggles a subtree rooted at `node` recursively. */
+    toggleDescendants(dataNode: T): void;
+    /** Collapse all dataNodes in the tree. */
+    collapseAll(): void;
+    /** Expands a subtree rooted at given data node recursively. */
+    expandDescendants(dataNode: T): void;
+    /** Collapses a subtree rooted at given data node recursively. */
+    collapseDescendants(dataNode: T): void;
+    protected _trackByValue(value: T | K): K;
+}
+/** Optional set of configuration that can be provided to the FlatTreeControl. */
+export interface FlatTreeControlOptions<T, K> {
+    trackBy?: (dataNode: T) => K;
+}
+/**
+ * Flat tree control. Able to expand/collapse a subtree recursively for flattened tree.
+ *
+ * @deprecated Use one of levelAccessor or childrenAccessor instead.
+ */
+export declare class FlatTreeControl<T, K = T> extends BaseTreeControl<T, K> {
+    options?: FlatTreeControlOptions<T, K> | undefined;
+    /** Construct with flat tree data node functions getLevel and isExpandable. */
+    constructor(getLevel: (dataNode: T) => number, isExpandable: (dataNode: T) => boolean, options?: FlatTreeControlOptions<T, K>);
+    /**
+     * Gets a list of the data node's subtree of descendent data nodes. The `dataNodes` of the
+     * TreeControl must be flattened tree nodes with correct levels.
+     */
+    getDescendants(dataNode: T): T[];
+    /** Expands all data nodes in the tree (`dataNodes` must be all flattened data nodes). */
+    expandAll(): void;
+}
+/** Optional set of configuration that can be provided to the NestedTreeControl. */
+export interface NestedTreeControlOptions<T, K> {
+    /** Function to determine if the provided node is expandable. */
+    isExpandable?: (dataNode: T) => boolean;
+    trackBy?: (dataNode: T) => K;
+}
+/**
+ * Nested tree control. Able to expand/collapse a subtree recursively for NestedNode type.
+ *
+ * @deprecated Use one of levelAccessor or childrenAccessor instead.
+ */
+export declare class NestedTreeControl<T, K = T> extends BaseTreeControl<T, K> {
+    options?: NestedTreeControlOptions<T, K> | undefined;
+    /** Construct with nested tree function getChildren. */
+    constructor(getChildren: (dataNode: T) => TreeChildren<T>, options?: NestedTreeControlOptions<T, K>);
+    /** Expands all dataNodes in the tree (`dataNodes` must be all root level data nodes). */
+    expandAll(): void;
+    /** Gets a list of descendant dataNodes of a subtree rooted at given data node recursively. */
+    getDescendants(dataNode: T): T[];
+    /** A helper function to get descendants recursively. */
+    protected _getDescendants(descendants: T[], dataNode: T): void;
+}