@1771technologies/lytenyte-pro/dist/tree-view/leaf.js

Blazingly fast headless React data grid with 100s of features.

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-shared";
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 }));
});