@1771technologies/lytenyte-pro
Version:
Blazingly fast headless React data grid with 100s of features.
46 lines (45 loc) • 1.97 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useState } from "react";
import { useMenuItemEvents } from "./use-menu-item-events.js";
import { handleVerticalNavigation } from "./handle-vertical-navigation.js";
import { useDialogRoot } from "../../dialog/context.js";
import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
function ItemImpl({ onAction, closeOnAction, disabled, ...props }, ref) {
const [item, setItem] = useState(null);
const combinedRefs = useCombinedRefs(ref, setItem);
const [active, setActive] = useMenuItemEvents(item);
const d = useDialogRoot();
return (_jsx("div", { role: "menuitem", ...props, ref: combinedRefs, tabIndex: 0, "data-ln-menu-item": true, "data-ln-active": active, "data-ln-disabled": disabled ? true : undefined, inert: disabled ? true : undefined, onFocus: (ev) => {
props.onFocus?.(ev);
if (ev.isPropagationStopped())
return;
setActive(true);
}, onBlur: (ev) => {
props.onBlur?.(ev);
if (ev.isPropagationStopped())
return;
setActive(false);
}, onClick: (ev) => {
props.onClick?.(ev);
if (ev.isPropagationStopped())
return;
onAction?.();
ev.stopPropagation();
ev.preventDefault();
if (closeOnAction === false)
return;
d?.onOpenChange(false);
}, onKeyDown: (ev) => {
if (ev.key === "ArrowUp" || ev.key === "ArrowDown")
handleVerticalNavigation(ev);
if (ev.key === " " || ev.key === "Enter") {
onAction?.();
ev.stopPropagation();
ev.preventDefault();
if (closeOnAction === false)
return;
d?.onOpenChange(false);
}
} }));
}
export const Item = forwardRef(ItemImpl);