@1771technologies/lytenyte-pro
Version:
Blazingly fast headless React data grid with 100s of features.
19 lines (18 loc) • 935 B
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useRef, useEffect, forwardRef } from "react";
import { useCompletionListContext } from "./completion-context.js";
import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
function CompletionListBase({ children, ...props }, ref) {
const { selectedIndex, items, loading } = useCompletionListContext();
const listRef = useRef(null);
useEffect(() => {
const list = listRef.current;
if (!list)
return;
const selected = list.querySelector("[data-ln-selected]");
selected?.scrollIntoView({ block: "nearest" });
}, [selectedIndex]);
const combined = useCombinedRefs(listRef, ref);
return (_jsx("ul", { ...props, ref: combined, role: "listbox", "data-ln-expression-completion-list": true, children: children?.({ items, loading }) }));
}
export const CompletionList = forwardRef(CompletionListBase);