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

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

@@ -1,63 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

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

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

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

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

@@ -1,3 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

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

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

@@ -1,7 +0,0 @@
-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

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

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

@@ -1,7 +0,0 @@
-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

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

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

@@ -1,7 +0,0 @@
-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

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

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

@@ -1,13 +0,0 @@
-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

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

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

@@ -1,13 +0,0 @@
-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

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

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

@@ -1,39 +0,0 @@
-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

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

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

@@ -1,92 +0,0 @@
-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

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

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

@@ -1,45 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

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

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

@@ -1,63 +0,0 @@
-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;
-}