@1771technologies/lytenyte-pro
Version:
Blazingly fast headless React data grid with 100s of features.
39 lines (38 loc) • 1.81 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useEffect, useState } from "react";
import { useComboContext } from "./combo-context.js";
import { useDialogRoot } from "../../dialog/context.js";
import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
function ComboCheckboxBase({ checked, onCheckChange, disabled, children, closeOnAction, ...props }, ref) {
const [item, setItem] = useState(null);
const ctx = useComboContext();
const d = useDialogRoot();
useEffect(() => {
if (!item)
return;
const controller = new AbortController();
item.addEventListener("ln-action", () => {
onCheckChange?.(!checked);
if (closeOnAction === false)
return;
d.onOpenChange?.(false);
}, { signal: controller.signal });
return () => controller.abort();
}, [checked, closeOnAction, d, item, onCheckChange]);
const active = ctx.activeEl === item;
const Node = typeof children === "function" ? children(checked) : children;
return (_jsx("div", { ...props, "data-ln-active": active, "data-ln-combomenu-option": true, "data-ln-checked": checked, "data-ln-disabled": disabled ? true : undefined, inert: disabled ? true : undefined, onClick: (ev) => {
props.onClick?.(ev);
if (ev.isPropagationStopped())
return;
onCheckChange?.(!checked);
if (closeOnAction === false)
return;
d.onOpenChange?.(false);
}, onMouseEnter: () => {
ctx.setActiveEl(item);
}, onMouseLeave: () => {
ctx.setActiveEl(null);
}, ref: useCombinedRefs(ref, setItem), children: Node }));
}
export const ComboCheckbox = forwardRef(ComboCheckboxBase);