tests/client/src/components/map/MapTree/MapTreeCheckbox.tsx

import { Checkbox, Group, RenderTreeNodePayload, Text } from "@mantine/core";
import { IconChevronDown } from "@tabler/icons-react";

export const MapTreeCheckbox = ({
    node,
    expanded,
    hasChildren,
    elementProps,
    tree,
}: RenderTreeNodePayload) => {
    const checked = tree.isNodeChecked(node.value);
    const indeterminate = tree.isNodeIndeterminate(node.value);

    return (
        <Group gap="xs" {...elementProps}>
            <Checkbox.Indicator
                checked={checked}
                indeterminate={indeterminate}
                onClick={() => (!checked ? tree.checkNode(node.value) : tree.uncheckNode(node.value))}
            />

            <Group gap={5} onClick={() => tree.toggleExpanded(node.value)}>
                <Text size="xs">{node.label}</Text>

                {hasChildren && (
                    <IconChevronDown
                        size={14}
                        style={{ transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' }}
                    />
                )}
            </Group>
        </Group>
    );
};