@1771technologies/lytenyte-pro
Version:
Blazingly fast headless React data grid with 100s of features.
43 lines (42 loc) • 2.07 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 { handleVerticalNavigation } from "./item/handle-vertical-navigation.js";
import { useDialogRoot } from "../dialog/context.js";
import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
function CheckboxItemImpl({ checked, onCheckChange, closeOnAction, disabled, children, ...props }, ref) {
const [item, setItem] = useState(null);
const combinedRefs = useCombinedRefs(ref, setItem);
const [active, setActive] = useMenuItemEvents(item);
const Node = typeof children === "function" ? children(checked) : children;
const d = useDialogRoot();
return (_jsx("div", { role: "menuitemcheckbox", ...props, ref: combinedRefs, tabIndex: 0, "data-ln-menu-item": true, "data-ln-active": active, "data-ln-checked": checked, "aria-checked": checked, "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;
onCheckChange?.(!checked);
if (closeOnAction === false)
return;
d?.onOpenChange(false);
}, onKeyDown: (ev) => {
if (ev.key === "ArrowUp" || ev.key === "ArrowDown")
handleVerticalNavigation(ev);
if (ev.key === " " || ev.key === "Enter") {
onCheckChange?.(!checked);
if (closeOnAction === false)
return;
d?.onOpenChange(false);
}
}, children: Node }));
}
export const CheckboxItem = forwardRef(CheckboxItemImpl);