export default function CheckboxList()

in packages/graph-explorer/src/components/CheckboxList.tsx [38:92]


export default function CheckboxList({
  className,
  checkboxes,
  selectedIds,
  onChange,
  onChangeAll,
}: CheckboxListProps) {
  const numOfSelections = selectedIds.size;
  const totalCheckboxes = checkboxes.length;

  return (
    <div className={cn("flex h-full grow flex-col space-y-2", className)}>
      <div className="flex h-full grow flex-col gap-3">
        <Virtuoso
          className="h-full grow"
          data={checkboxes}
          components={{
            Header: () => (
              <CheckboxRow
                isTop={true}
                isBottom={false}
                aria-label="checkbox for all"
                checked={
                  numOfSelections > 0 && numOfSelections !== totalCheckboxes
                    ? "indeterminate"
                    : numOfSelections === totalCheckboxes
                }
                onCheckedChange={isSelected => {
                  onChangeAll(Boolean(isSelected));
                }}
                className="font-bold"
              >
                {numOfSelections} selected of {totalCheckboxes}
              </CheckboxRow>
            ),
          }}
          itemContent={(index, checkbox) => (
            <CheckboxRow
              isBottom={index === checkboxes.length - 1}
              isTop={false}
              aria-label={`checkbox for ${checkbox.id}`}
              checked={selectedIds.has(checkbox.id)}
              onCheckedChange={isSelected =>
                onChange(checkbox.id, Boolean(isSelected))
              }
            >
              <div className="grow">{checkbox.text}</div>
              <div className="[&_svg]:size-5">{checkbox.endAdornment}</div>
            </CheckboxRow>
          )}
        />
      </div>
    </div>
  );
}