@1771technologies/lytenyte-pro
Version:
Blazingly fast headless React data grid with 100s of features.
31 lines (30 loc) • 1.73 kB
JavaScript
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 { useTreeNavigation } from "./use-tree-navigation.js";
import { getFocusedNode } from "../utils/get-focused-node.js";
import { getFirstNode } from "../navigation/get-first-node.js";
import { useCombinedRefs } from "@1771technologies/lytenyte-core/yinternal";
export const TreePanel = forwardRef(function TreePanel(props, forwarded) {
const ctx = useTreeRoot();
const ref = useCombinedRefs(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();
} })] }));
});