v10/dist/dev/ui/menu/menu-checkbox-item.js

"use client";
import { renderElement } from "../../utils/use-render.js";
import { useMenuContext } from "./context.js";
import { forwardRef, useCallback, useEffect, useRef } from "react";
//#region src/ui/menu/menu-checkbox-item.tsx
/** A checkbox-style menu item. Renders a `<div>` with `role="menuitemcheckbox"`. */
const MenuCheckboxItem = forwardRef(function MenuCheckboxItem({ render, className, style, checked, onCheckedChange, disabled, onClick, ...elementProps }, forwardedRef) {
	const { menu, state } = useMenuContext();
	const elementRef = useRef(null);
	useEffect(() => {
		const element = elementRef.current;
		if (!element) return;
		return menu.registerItem(element);
	}, [menu]);
	const handleClick = useCallback((event) => {
		if (disabled) return;
		onClick?.(event);
		onCheckedChange(!checked);
	}, [
		disabled,
		onClick,
		onCheckedChange,
		checked
	]);
	const handlePointerEnter = useCallback(() => {
		const element = elementRef.current;
		if (!element || disabled) return;
		menu.highlight(element, { focus: false });
	}, [menu, disabled]);
	return renderElement("div", {
		render,
		className,
		style
	}, {
		state,
		ref: [forwardedRef, elementRef],
		props: [{
			role: "menuitemcheckbox",
			"aria-checked": checked,
			"aria-disabled": disabled ? true : void 0,
			onClick: handleClick,
			onPointerEnter: handlePointerEnter
		}, elementProps]
	});
});
//#endregion
export { MenuCheckboxItem };

//# sourceMappingURL=menu-checkbox-item.js.map