@1771technologies/lytenyte-pro 1.0.12-dev.1 → 1.0.12-dev.2

package/dist/tree-view/branch/branch.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect } from "react";
+import { depthContext, useDepth } from "../depth-provider.js";
+import { useEvent, useSlot, useTransitionedOpen, } from "@1771technologies/lytenyte-react-hooks";
+import { useTreeRoot } from "../context.js";
+import { useBranchKeys } from "./use-branch-keys.js";
+export const TreeBranch = forwardRef(function TreeBranch({ itemId, label, expander, transitionEnterMs, transitionExitMs, gridWrapped, labelWrap, ...props }, forwarded) {
+    const depth = useDepth();
+    const root = useTreeRoot();
+    // Manage the open and close state of the branch
+    const expanded = root.expansions[itemId] ?? root.expansionDefault ?? false;
+    const { open, shouldMount, state, toggle } = useTransitionedOpen({
+        initial: expanded,
+        timeEnter: transitionEnterMs ?? root.transitionEnterMs,
+        timeExit: transitionExitMs ?? root.transitionExitMs,
+    });
+    const onExpansionChange = useEvent((b) => {
+        root.onExpansionChange({
+            ...root.expansions,
+            [itemId]: b,
+        });
+    });
+    useEffect(() => {
+        if (expanded === open)
+            return;
+        toggle(expanded);
+    }, [expanded, open, toggle]);
+    // Component part rendering
+    const labelRendered = useSlot({
+        props: [],
+        slot: label ?? _jsx("div", {}),
+    });
+    const expandedProps = {
+        onClick: (e) => {
+            e.stopPropagation();
+            onExpansionChange(!expanded);
+        },
+    };
+    const expanderRendered = useSlot({
+        props: [expandedProps],
+        slot: expander ?? _jsx("button", { children: ">" }),
+        state: { toggle, expanded },
+    });
+    const wrapped = gridWrapped ?? root.gridWrappedBranches;
+    const labelWrapSlot = useSlot({
+        props: [
+            {
+                "data-tree-branch-label": true,
+                children: (_jsxs(_Fragment, { children: [expanderRendered, labelRendered] })),
+            },
+        ],
+        slot: labelWrap ?? _jsx("div", {}),
+    });
+    return (_jsx(depthContext.Provider, { value: depth + 1, children: _jsxs("li", { ...props, onKeyDown: useBranchKeys(itemId, root.expansionDefault ?? false, props.onKeyDown), tabIndex: -1, ref: forwarded, role: "treeitem", "aria-expanded": open, "aria-selected": root.selection.has(itemId), "aria-level": depth + 1, "data-ln-selected": root.selection.has(itemId), "data-ln-tree-node": true, "data-ln-tree-branch": true, "data-ln-tree-id": itemId, style: {
+                ...props.style,
+                "--ln-tree-depth": depth,
+            }, children: [labelWrapSlot, _jsx("div", { children: _jsx(Wrapped, { wrapped: wrapped, expanded: open, children: shouldMount && (_jsx("ul", { "data-tree-branch-children": true, "data-expanded": open, "data-open-state": state, role: "group", children: props.children })) }) })] }) }));
+});
+function Wrapped(props) {
+    if (!props.wrapped)
+        return _jsx(_Fragment, { children: props.children });
+    return (_jsx("div", { "data-tree-branch-grid-wrapped": true, "data-expanded": props.expanded, children: _jsx("div", { "data-tree-branch-grid-wrapped-content": true, children: props.children }) }));
+}

package/dist/tree-view/branch/use-branch-keys.d.ts

@@ -0,0 +1,2 @@
+import type { KeyboardEvent, KeyboardEventHandler } from "react";
+export declare function useBranchKeys(id: string, defaultExpansion: boolean, current?: KeyboardEventHandler): (ev: KeyboardEvent) => void;

package/dist/tree-view/branch/use-branch-keys.js

@@ -0,0 +1,87 @@
+import { useEvent } from "@1771technologies/lytenyte-react-hooks";
+import { useTreeRoot } from "../context.js";
+import { getFocusableNodes } from "../utils/get-focusable-nodes.js";
+import { getFocusedNode } from "../utils/get-focused-node.js";
+import { isBranchNode } from "../utils/is-branch-node.js";
+import { getTreeNodeId } from "../utils/get-tree-node-id.js";
+import { getParentNode } from "../utils/get-parent-node.js";
+import { getSiblingBranches } from "../utils/get-sibling-branches.js";
+import { getFocusables } from "@1771technologies/lytenyte-dom-utils";
+const accepted = ["ArrowRight", "ArrowLeft", "Enter", "*"];
+export function useBranchKeys(id, defaultExpansion, current) {
+    const ctx = useTreeRoot();
+    const onKeyDown = useEvent((ev) => {
+        current?.(ev);
+        if (!accepted.includes(ev.key))
+            return;
+        const isExpanded = ctx.expansions[id] ?? defaultExpansion;
+        if (ev.key === "*") {
+            const node = getFocusedNode();
+            const siblings = getSiblingBranches(node);
+            const next = { ...ctx.expansions };
+            siblings?.forEach((c) => {
+                next[getTreeNodeId(c)] = true;
+            });
+            ctx.onExpansionChange(next);
+            ev.stopPropagation();
+            return;
+        }
+        if (ev.key === "Enter") {
+            if (ev.currentTarget !== ev.target)
+                return;
+            const next = { ...ctx.expansions };
+            next[id] = !isExpanded;
+            ctx.onExpansionChange(next);
+            return;
+        }
+        if (ev.key === "ArrowRight") {
+            const branch = getFocusedNode();
+            if (ev.currentTarget !== branch)
+                return;
+            if (!isExpanded) {
+                const next = { ...ctx.expansions };
+                next[id] = !(next[id] ?? defaultExpansion);
+                ctx.onExpansionChange(next);
+                return;
+            }
+            const childNodes = getFocusables(branch.firstElementChild);
+            if (childNodes.length > 1 && childNodes.at(-1) !== document.activeElement) {
+                const current = childNodes.indexOf(document.activeElement);
+                const index = current === -1 || current === 0 ? 1 : current + 1;
+                childNodes[index]?.focus();
+                return;
+            }
+            // Get the first focusable node.
+            const nodes = getFocusableNodes(branch);
+            nodes.at(0)?.focus();
+        }
+        if (ev.key === "ArrowLeft") {
+            const node = getFocusedNode();
+            // We need to collapse this node
+            if (isBranchNode(node) && isExpanded) {
+                // Ensure we don't collapse the node when the event bubbles and the left arrow
+                // was pressed on a child element. Pressing left arrow on the child will focus the
+                // parent, and then run the parent's on keydown handler.
+                if (ev.target !== ev.currentTarget &&
+                    !ev.currentTarget.firstElementChild?.contains(document.activeElement))
+                    return;
+                const next = { ...ctx.expansions };
+                const id = getTreeNodeId(node);
+                next[id] = false;
+                ctx.onExpansionChange(next);
+                return;
+            }
+            else {
+                const parent = getParentNode(node);
+                if (!parent) {
+                    const focusNodes = getFocusableNodes(ctx.panel);
+                    focusNodes.at(0)?.focus();
+                }
+                else {
+                    parent.focus();
+                }
+            }
+        }
+    });
+    return onKeyDown;
+}

package/dist/tree-view/context.d.ts

@@ -0,0 +1,22 @@
+import { type Dispatch, type SetStateAction } from "react";
+export interface TreeViewRootContext {
+    readonly panel: HTMLUListElement | null;
+    readonly panelRef: Dispatch<SetStateAction<HTMLUListElement | null>>;
+    readonly expansions: Record<string, boolean>;
+    readonly onExpansionChange: (n: Record<string, boolean>) => void;
+    readonly expansionDefault: boolean;
+    readonly selectionMode: "single" | "multiple" | "none";
+    readonly selection: Set<string>;
+    readonly onSelectionChange: (c: Set<string>) => void;
+    readonly selectionPivotRef: {
+        current: string | null;
+    };
+    readonly transitionEnterMs: number;
+    readonly transitionExitMs: number;
+    readonly gridWrappedBranches: boolean;
+    readonly onFocusChange: (el: HTMLElement | null) => void;
+    readonly getAllIds: (panel: HTMLElement) => Set<string>;
+    readonly getIdsBetweenNodes: (start: HTMLElement, end: HTMLElement, panel: HTMLElement) => string[];
+}
+export declare const context: import("react").Context<TreeViewRootContext>;
+export declare const useTreeRoot: () => TreeViewRootContext;

package/dist/tree-view/context.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from "react";
+export const context = createContext({});
+export const useTreeRoot = () => useContext(context);

package/dist/tree-view/depth-provider.d.ts

@@ -0,0 +1,2 @@
+export declare const depthContext: import("react").Context<number>;
+export declare const useDepth: () => number;

package/dist/tree-view/depth-provider.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from "react";
+export const depthContext = createContext(0);
+export const useDepth = () => useContext(depthContext);

package/dist/tree-view/hooks/use-tree-view-paths.d.ts

@@ -0,0 +1,2 @@
+import { type PathProvidedItem } from "@1771technologies/lytenyte-shared";
+export declare function useTreeViewPaths<T extends PathProvidedItem>(paths: T[], nonAdjacentAreDistinct?: boolean): (import("@1771technologies/lytenyte-shared").PathBranch<T> | import("@1771technologies/lytenyte-shared").PathLeaf<T>)[];

package/dist/tree-view/hooks/use-tree-view-paths.js

@@ -0,0 +1,9 @@
+import { computePathTree } from "@1771technologies/lytenyte-shared";
+import { useMemo } from "react";
+export function useTreeViewPaths(paths, nonAdjacentAreDistinct) {
+    const tree = useMemo(() => {
+        const result = computePathTree(paths, {}, nonAdjacentAreDistinct);
+        return [...result.children.values()];
+    }, [nonAdjacentAreDistinct, paths]);
+    return tree;
+}

package/dist/tree-view/index.d.ts

@@ -0,0 +1,16 @@
+import { useTreeViewPaths } from "./hooks/use-tree-view-paths.js";
+import { ForceSyncScrolling } from "./virtualized/force-sync-scrolling.js";
+import { useVirtualizedTree } from "./virtualized/use-virtualized-tree.js";
+export declare const Tree: {
+    Leaf: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & import("./leaf.js").TreeLeafProps, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+    Branch: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & import("./index.js").TreeBranchProps, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+    Root: import("react").ForwardRefExoticComponent<Omit<import("react").PropsWithChildren<import("./root.js").TreeRootProps>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    Panel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+    usePaths: typeof useTreeViewPaths;
+    useVirtualTree: typeof useVirtualizedTree;
+    ForceSyncScrolling: typeof ForceSyncScrolling;
+};
+export type { TreeRootProps } from "./root.js";
+export type { TreeBranchProps } from "./branch/branch.js";
+export type { TreeLeafProps } from "./leaf.js";
+export type { VirtualizedTreeViewPathsArgs } from "./virtualized/use-virtualized-tree.js";

package/dist/tree-view/index.js

@@ -0,0 +1,16 @@
+import { TreeBranch } from "./branch/branch.js";
+import { useTreeViewPaths } from "./hooks/use-tree-view-paths.js";
+import { TreeLeaf } from "./leaf.js";
+import { TreePanel } from "./panel/panel.js";
+import { TreeRoot } from "./root.js";
+import { ForceSyncScrolling } from "./virtualized/force-sync-scrolling.js";
+import { useVirtualizedTree } from "./virtualized/use-virtualized-tree.js";
+export const Tree = {
+    Leaf: TreeLeaf,
+    Branch: TreeBranch,
+    Root: TreeRoot,
+    Panel: TreePanel,
+    usePaths: useTreeViewPaths,
+    useVirtualTree: useVirtualizedTree,
+    ForceSyncScrolling,
+};

package/dist/tree-view/leaf.d.ts

@@ -0,0 +1,4 @@
+export interface TreeLeafProps {
+    readonly itemId: string;
+}
+export declare const TreeLeaf: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & TreeLeafProps, "ref"> & import("react").RefAttributes<HTMLLIElement>>;

package/dist/tree-view/leaf.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDepth } from "./depth-provider.js";
+import { useTreeRoot } from "./context.js";
+import { getFocusables } from "@1771technologies/lytenyte-dom-utils";
+export const TreeLeaf = forwardRef(function TreeLeaf({ itemId, ...props }, forwarded) {
+    const depth = useDepth();
+    const root = useTreeRoot();
+    return (_jsx("li", { ...props, tabIndex: -1, "data-ln-tree-node": true, "data-ln-tree-leaf": true, "data-ln-selected": root.selection.has(itemId), "data-ln-tree-id": itemId, onKeyDown: (e) => {
+            props.onKeyDown?.(e);
+            if ((e.key !== "ArrowLeft" && e.key !== "ArrowRight") ||
+                e.metaKey ||
+                e.ctrlKey ||
+                e.shiftKey)
+                return;
+            e.preventDefault();
+            const nodes = getFocusables(e.currentTarget);
+            const index = nodes.indexOf(document.activeElement);
+            if (index === -1) {
+                nodes.at(0)?.focus();
+                return;
+            }
+            if (e.key === "ArrowLeft")
+                nodes[index === 0 ? nodes.length - 1 : index - 1].focus();
+            else
+                nodes[index === nodes.length - 1 ? 0 : index + 1].focus();
+        }, ref: forwarded, role: "treeitem", "aria-level": depth + 1, "aria-selected": root.selection.has(itemId), style: { ...props.style, "--tree-depth": depth }, children: props.children }));
+});

package/dist/tree-view/navigation/get-all-ids.d.ts

@@ -0,0 +1 @@
+export declare function getAllIds(panel: HTMLElement): Set<string>;

package/dist/tree-view/navigation/get-all-ids.js

@@ -0,0 +1,7 @@
+import { getFocusableNodes } from "../utils/get-focusable-nodes.js";
+import { getTreeNodeId } from "../utils/get-tree-node-id.js";
+export function getAllIds(panel) {
+    const focusables = getFocusableNodes(panel);
+    const allIds = new Set(focusables.map((c) => getTreeNodeId(c)));
+    return allIds;
+}

package/dist/tree-view/navigation/get-first-node.d.ts

@@ -0,0 +1 @@
+export declare function getFirstNode(panel: HTMLElement): HTMLElement | undefined;

package/dist/tree-view/navigation/get-first-node.js

@@ -0,0 +1,7 @@
+import { getFocusableNodes } from "../utils/get-focusable-nodes.js";
+import { isTreeNodeDisabled } from "../utils/is-tree-node-disabled.js";
+export function getFirstNode(panel) {
+    const focusables = getFocusableNodes(panel);
+    const first = focusables.find((c) => !isTreeNodeDisabled(c));
+    return first;
+}

package/dist/tree-view/navigation/get-last-node.d.ts

@@ -0,0 +1 @@
+export declare function getLastNode(panel: HTMLElement): HTMLElement | undefined;

package/dist/tree-view/navigation/get-last-node.js

@@ -0,0 +1,7 @@
+import { getFocusableNodes } from "../utils/get-focusable-nodes.js";
+import { isTreeNodeDisabled } from "../utils/is-tree-node-disabled.js";
+export function getLastNode(panel) {
+    const focusables = getFocusableNodes(panel);
+    const first = focusables.findLast((c) => !isTreeNodeDisabled(c));
+    return first;
+}

package/dist/tree-view/navigation/get-next-node.d.ts

@@ -0,0 +1 @@
+export declare function getNextNode(el: HTMLElement): HTMLElement | undefined;

package/dist/tree-view/navigation/get-next-node.js

@@ -0,0 +1,13 @@
+import { getFocusableNodes } from "../utils/get-focusable-nodes.js";
+import { getPanel } from "../utils/get-panel.js";
+// Assumes that el is a branch or leaf node
+export function getNextNode(el) {
+    const panel = getPanel(el);
+    if (!panel)
+        return;
+    const focusables = getFocusableNodes(panel);
+    const index = focusables.indexOf(el);
+    if (index === -1)
+        return;
+    return focusables.at(index + 1);
+}

package/dist/tree-view/navigation/get-prev-node.d.ts

@@ -0,0 +1 @@
+export declare function getPrevNode(el: HTMLElement): HTMLElement | undefined;

package/dist/tree-view/navigation/get-prev-node.js

@@ -0,0 +1,13 @@
+import { getFocusableNodes } from "../utils/get-focusable-nodes.js";
+import { getPanel } from "../utils/get-panel.js";
+// Assumes that el is a branch or leaf node
+export function getPrevNode(el) {
+    const panel = getPanel(el);
+    if (!panel)
+        return;
+    const focusables = getFocusableNodes(panel);
+    const index = focusables.indexOf(el);
+    if (index === -1)
+        return;
+    return focusables[index - 1];
+}

package/dist/tree-view/panel/make-handle-navigation.d.ts

@@ -0,0 +1,2 @@
+import type { TreeViewRootContext } from "../context.js";
+export declare function makeHandleNavigation(ctx: TreeViewRootContext): (ev: KeyboardEvent) => void;

package/dist/tree-view/panel/make-handle-navigation.js

@@ -0,0 +1,39 @@
+import { isInView } from "@1771technologies/lytenyte-dom-utils";
+import { getFirstNode } from "../navigation/get-first-node.js";
+import { getLastNode } from "../navigation/get-last-node.js";
+import { getNextNode } from "../navigation/get-next-node.js";
+import { getPrevNode } from "../navigation/get-prev-node.js";
+import { getFocusedNode } from "../utils/get-focused-node.js";
+export function makeHandleNavigation(ctx) {
+    const acceptedKeys = ["ArrowUp", "ArrowDown", "Home", "End"];
+    return (ev) => {
+        if (!acceptedKeys.includes(ev.key) || ev.shiftKey || ev.ctrlKey || ev.metaKey)
+            return;
+        const current = getFocusedNode();
+        if (!current)
+            return;
+        if (ev.key === "ArrowUp") {
+            const prev = getPrevNode(current);
+            if (!prev)
+                return;
+            const inView = isInView(prev, ctx.panel);
+            if (!inView)
+                prev?.scrollIntoView({ behavior: "instant", block: "start" });
+            prev?.focus();
+        }
+        if (ev.key === "ArrowDown") {
+            const node = getNextNode(current);
+            if (!node)
+                return;
+            const inView = isInView(node, ctx.panel);
+            if (!inView)
+                node?.scrollIntoView({ behavior: "instant", block: "end" });
+            node?.focus();
+        }
+        if (ev.key === "Home")
+            getFirstNode(ctx.panel)?.focus();
+        if (ev.key === "End")
+            getLastNode(ctx.panel)?.focus();
+        ev.preventDefault();
+    };
+}

package/dist/tree-view/panel/make-handle-selection.d.ts

@@ -0,0 +1,2 @@
+import type { TreeViewRootContext } from "../context.js";
+export declare function makeHandleSelection(ctx: TreeViewRootContext): (ev: KeyboardEvent) => void;

package/dist/tree-view/panel/make-handle-selection.js

@@ -0,0 +1,92 @@
+import { isInView } from "@1771technologies/lytenyte-dom-utils";
+import { getFirstNode } from "../navigation/get-first-node.js";
+import { getLastNode } from "../navigation/get-last-node.js";
+import { getNextNode } from "../navigation/get-next-node.js";
+import { getPrevNode } from "../navigation/get-prev-node.js";
+import { getFocusableNodes } from "../utils/get-focusable-nodes.js";
+import { getFocusedNode } from "../utils/get-focused-node.js";
+import { getIdsBetweenNodes } from "../utils/get-ids-between-nodes.js";
+import { getTreeNodeId } from "../utils/get-tree-node-id.js";
+import { selectNode } from "../utils/select-node.js";
+import { toggleAllSelections } from "../utils/toggle-all-selections.js";
+import { toggleSelection } from "../utils/toggle-selection.js";
+export function makeHandleSelection(ctx) {
+    const acceptedKeys = ["Enter", "Home", "End", "ArrowDown", "ArrowUp", "Space", " ", "a"];
+    const make = (ev) => {
+        if (ctx.selectionMode === "none")
+            return;
+        if (!acceptedKeys.includes(ev.key))
+            return;
+        ev.preventDefault();
+        const pivot = ctx.selectionPivotRef.current;
+        if (ev.key === " " && (ctx.selectionMode === "single" || !ev.shiftKey || !pivot)) {
+            const node = getFocusedNode();
+            toggleSelection(node, ctx);
+            return;
+        }
+        if (ctx.selectionMode !== "multiple")
+            return;
+        const focusables = getFocusableNodes(ctx.panel);
+        const focused = getFocusedNode();
+        const focusedIndex = focusables.indexOf(focused);
+        if (focusedIndex === -1)
+            return;
+        if (ev.ctrlKey || ev.metaKey) {
+            if (ev.key === "a") {
+                ev.preventDefault();
+                toggleAllSelections(ctx);
+                return;
+            }
+        }
+        if (!ev.shiftKey)
+            return;
+        if (ev.key === "ArrowUp" && focusedIndex !== 0) {
+            const node = getPrevNode(focused);
+            if (!isInView(node, ctx.panel))
+                node?.scrollIntoView({ behavior: "instant", block: "start" });
+            selectNode(node, ctx, true);
+            return;
+        }
+        if (ev.key === "ArrowDown" && focusedIndex !== focusables.length) {
+            const node = getNextNode(focused);
+            if (!isInView(node, ctx.panel))
+                node?.scrollIntoView({ behavior: "instant", block: "end" });
+            selectNode(node, ctx, true);
+            return;
+        }
+        if (ev.key === " ") {
+            const pivotNode = focusables.find((c) => getTreeNodeId(c) === pivot);
+            if (!pivotNode)
+                return;
+            const ids = ctx.getIdsBetweenNodes(pivotNode, focused, ctx.panel);
+            const next = new Set(ctx.selection);
+            ids.forEach((c) => next.add(c));
+            ctx.onSelectionChange(next);
+            ctx.selectionPivotRef.current = getTreeNodeId(focused);
+            return;
+        }
+        if (!ev.ctrlKey && !ev.metaKey)
+            return;
+        if (ev.key === "Home") {
+            const firstNode = getFirstNode(ctx.panel);
+            const ids = getIdsBetweenNodes(firstNode, focused, ctx.panel);
+            const next = new Set(ctx.selection);
+            ids.forEach((c) => next.add(c));
+            ctx.onSelectionChange(next);
+            firstNode?.focus();
+            ctx.selectionPivotRef.current = getTreeNodeId(firstNode);
+            return;
+        }
+        if (ev.key === "End") {
+            const lastNode = getLastNode(ctx.panel);
+            const ids = ctx.getIdsBetweenNodes(focused, lastNode, ctx.panel);
+            const next = new Set(ctx.selection);
+            ids.forEach((c) => next.add(c));
+            ctx.onSelectionChange(next);
+            lastNode?.focus();
+            ctx.selectionPivotRef.current = getTreeNodeId(lastNode);
+            return;
+        }
+    };
+    return make;
+}

package/dist/tree-view/panel/make-handle-typeahead.d.ts

@@ -0,0 +1 @@
+export declare function makeHandleTypeahead(): (panel: HTMLElement, ev: KeyboardEvent) => void;

package/dist/tree-view/panel/make-handle-typeahead.js

@@ -0,0 +1,45 @@
+import { getFocusableNodes } from "../utils/get-focusable-nodes.js";
+import { getFocusedNode } from "../utils/get-focused-node.js";
+import { isBranchNode } from "../utils/is-branch-node.js";
+export function makeHandleTypeahead() {
+    let typeaheadCapture = [];
+    let typeaheadTimeout = null;
+    const handleTypeahead = (panel, ev) => {
+        if (ev.ctrlKey || ev.shiftKey || ev.metaKey)
+            return;
+        if (ev.key.length === 1 && ev.key.match(/[\S\s]/) && ev.key != " ") {
+            // Begin the typeahead.
+            typeaheadCapture.push(ev.key);
+            if (typeaheadTimeout)
+                clearTimeout(typeaheadTimeout);
+            typeaheadTimeout = setTimeout(() => {
+                const text = typeaheadCapture.join("");
+                const nodes = getFocusableNodes(panel);
+                const focused = getFocusedNode();
+                if (!focused)
+                    return;
+                const index = nodes.indexOf(focused);
+                if (index === -1)
+                    return;
+                const nodesAfterCurrent = nodes.slice(index);
+                const nodeToFocus = nodesAfterCurrent.find((c) => {
+                    let textContent = "";
+                    if (isBranchNode(c)) {
+                        // On a branch node the text content of the expanded should not be included. We should simply
+                        // look at the text content of the node.
+                        textContent = c.firstElementChild?.lastElementChild?.textContent ?? "";
+                    }
+                    else {
+                        textContent = c.textContent ?? "";
+                    }
+                    return textContent?.toLowerCase()?.startsWith(text);
+                });
+                if (nodeToFocus)
+                    nodeToFocus.focus();
+                typeaheadCapture = [];
+                typeaheadTimeout = null;
+            }, 300);
+        }
+    };
+    return handleTypeahead;
+}

package/dist/tree-view/panel/panel.d.ts

@@ -0,0 +1 @@
+export declare const TreePanel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;

package/dist/tree-view/panel/panel.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { depthContext } from "../depth-provider.js";
+import { useTreeRoot } from "../context.js";
+import { useForkRef } from "@1771technologies/lytenyte-react-hooks";
+import { useTreeNavigation } from "./use-tree-navigation.js";
+import { getFocusedNode } from "../utils/get-focused-node.js";
+import { getFirstNode } from "../navigation/get-first-node.js";
+export const TreePanel = forwardRef(function TreePanel(props, forwarded) {
+    const ctx = useTreeRoot();
+    const ref = useForkRef(ctx.panelRef, forwarded);
+    const focused = useTreeNavigation();
+    const focusTime = useRef(null);
+    return (_jsxs(depthContext.Provider, { value: 0, children: [_jsx("ul", { ...props, role: "tree", ref: ref, tabIndex: focused ? -1 : 0, "aria-multiselectable": ctx.selectionMode === "multiple", "aria-orientation": "vertical", "data-ln-tree-panel": true, onFocus: () => {
+                    if (focusTime.current) {
+                        clearTimeout(focusTime.current);
+                        focusTime.current = null;
+                    }
+                    ctx.onFocusChange(getFocusedNode());
+                }, onBlur: () => {
+                    if (focusTime.current)
+                        return;
+                    focusTime.current = setTimeout(() => {
+                        ctx.onFocusChange(null);
+                        focusTime.current = null;
+                    }, 20);
+                }, children: props.children }), _jsx("div", { role: "presentation", tabIndex: focused ? -1 : 0, onFocus: () => {
+                    getFirstNode(ctx.panel)?.focus();
+                } })] }));
+});

package/dist/tree-view/panel/use-tree-navigation.d.ts

@@ -0,0 +1 @@
+export declare function useTreeNavigation(): boolean;

package/dist/tree-view/panel/use-tree-navigation.js

@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+import { useTreeRoot } from "../context.js";
+import { getFocusableNodes } from "../utils/get-focusable-nodes.js";
+import { makeHandleTypeahead } from "./make-handle-typeahead.js";
+import { makeHandleNavigation } from "./make-handle-navigation.js";
+import { makeHandleSelection } from "./make-handle-selection.js";
+import { getTreeNodeId } from "../utils/get-tree-node-id.js";
+import { getTabbables } from "@1771technologies/lytenyte-dom-utils";
+export function useTreeNavigation() {
+    const ctx = useTreeRoot();
+    const [focused, setFocused] = useState(false);
+    const panel = ctx.panel;
+    useEffect(() => {
+        if (!panel)
+            return;
+        const controller = new AbortController();
+        panel.addEventListener("focus", () => {
+            const focusNodes = getFocusableNodes(panel);
+            if (ctx.selectionMode !== "none" && ctx.selection.size > 0) {
+                const node = focusNodes.find((c) => ctx.selection.has(getTreeNodeId(c)));
+                if (node) {
+                    node.focus();
+                    return;
+                }
+            }
+            focusNodes.at(0)?.focus();
+        }, { signal: controller.signal });
+        panel.addEventListener("focusin", () => {
+            setFocused(true);
+        }, { signal: controller.signal });
+        panel.addEventListener("focusout", () => {
+            setFocused(false);
+        }, { signal: controller.signal });
+        const handleTypeahead = makeHandleTypeahead();
+        const handleNavigation = makeHandleNavigation(ctx);
+        const handleSelection = makeHandleSelection(ctx);
+        panel.addEventListener("keydown", (ev) => {
+            handleTypeahead(panel, ev);
+            handleNavigation(ev);
+            handleSelection(ev);
+            if (ev.key === "Tab") {
+                const els = getTabbables(panel);
+                if (!els.length)
+                    return;
+                const original = els.map((el) => {
+                    const o = el.getAttribute("tabindex");
+                    el.tabIndex = -1;
+                    return o;
+                });
+                requestAnimationFrame(() => {
+                    els.forEach((el, i) => {
+                        if (original[i] == null)
+                            el.removeAttribute("tabindex");
+                        else
+                            el.setAttribute("tabindex", original[i]);
+                    });
+                });
+            }
+        }, { signal: controller.signal });
+        return () => controller.abort();
+    }, [ctx, focused, panel]);
+    return focused;
+}