@1771technologies/lytenyte-pro
Version:
Blazingly fast headless React data grid with 100s of features.
45 lines (44 loc) • 2.15 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useContext, useState } from "react";
import { useMenuItemEvents } from "../item/use-menu-item-events.js";
import { handleVerticalNavigation } from "../item/handle-vertical-navigation.js";
import { context } from "./context.js";
import { useDialogRoot } from "../../dialog/context.js";
import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
function ItemImpl({ value, disabled, children, closeOnAction, ...props }, ref) {
const [item, setItem] = useState(null);
const combinedRefs = useCombinedRefs(ref, setItem);
const [active, setActive] = useMenuItemEvents(item);
const ctx = useContext(context);
const Node = typeof children === "function" ? children(ctx.value === value) : children;
const d = useDialogRoot();
return (_jsx("div", { ...props, role: "menuitemradio", ref: combinedRefs, tabIndex: 0, "aria-checked": ctx.value === value, "data-ln-disabled": disabled ? true : undefined, inert: disabled ? true : undefined, "data-ln-menu-item": true, "data-ln-active": active, "data-ln-checked": ctx.value === value, 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;
ctx.onChange?.(value);
if (closeOnAction === false)
return;
d?.onOpenChange(false);
}, onKeyDown: (ev) => {
if (ev.key === "ArrowUp" || ev.key === "ArrowDown")
handleVerticalNavigation(ev);
if (ev.key === " " || ev.key === "Enter") {
ctx.onChange?.(value);
if (closeOnAction === false)
return;
d?.onOpenChange(false);
}
}, children: Node }));
}
export const RadioItem = forwardRef(ItemImpl);