@1771technologies/lytenyte-pro
Version:
Blazingly fast headless React data grid with 100s of features.
25 lines (24 loc) • 1.29 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useState } from "react";
import { useMenuItemEvents } from "../item/use-menu-item-events.js";
import { comboContext } from "./combo-context.js";
import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
function ComboMenuImpl(props, ref) {
const [item, setItem] = useState(null);
const combinedRefs = useCombinedRefs(ref, setItem);
const [active] = useMenuItemEvents(item, undefined, () => {
const input = item?.querySelector('[data-ln-combomenu-input="true"]');
if (input)
input.blur();
});
const [activeEl, setActiveEl] = useState(null);
return (_jsx(comboContext.Provider, { value: { activeEl, setActiveEl, menu: item }, children: _jsx("div", { role: "menuitem", ...props, ref: combinedRefs, tabIndex: 0, "data-ln-menu-item": true, "data-ln-combo": true, "data-ln-active": active, onFocus: (ev) => {
props.onFocus?.(ev);
if (ev.isPropagationStopped())
return;
const input = ev.currentTarget.querySelector('[data-ln-combomenu-input="true"]');
if (input)
input.focus();
} }) }));
}
export const ComboMenu = forwardRef(ComboMenuImpl);