Reactで、親子のチェックボックスの「一部だけ選択」を表す方法

export type TreeNode = {
  id: string;
  label: string;
  disabled?: boolean;
  children?: TreeNode[];
};

export const tree: TreeNode = {
  id: 'all',
  label: 'すべて',
  children: [
    {
      id: 'fruit',
      label: '果物',
      children: [
        { id: 'apple', label: 'りんご' },
        { id: 'grape', label: 'ぶどう' },
        { id: 'peach', label: 'もも（在庫なし）', disabled: true },
      ],
    },
    // 野菜（葉もの・根菜）は省略
  ],
};

// node の下にある、子を持たない項目（葉）をすべて集める
export function leaves(node: TreeNode): TreeNode[] {
  return node.children ? node.children.flatMap(leaves) : [node];
}

import { TriCheckbox } from './TriCheckbox';
import { leaves } from './tree';
import type { TreeNode } from './tree';

type Props = {
  node: TreeNode;
  selected: ReadonlySet<string>;
  onToggle: (node: TreeNode) => void;
};

export function CheckTree({ node, selected, onToggle }: Props) {
  // 親の状態は持たずに、下の葉が何個選ばれているかから毎回計算する
  const all = leaves(node);
  const count = all.filter((leaf) => selected.has(leaf.id)).length;
  const checked = count > 0 && count === all.length;
  const indeterminate = count > 0 && count < all.length;

  return (
    <li>
      <TriCheckbox
        label={node.label}
        checked={checked}
        indeterminate={indeterminate}
        disabled={all.every((leaf) => leaf.disabled)}
        onChange={() => onToggle(node)}
      />
      {node.children && (
        <ul>
          {node.children.map((child) => (
            <CheckTree key={child.id} node={child} selected={selected} onToggle={onToggle} />
          ))}
        </ul>
      )}
    </li>
  );
}

葉ものをクリック（押した直後: checked=true indeterminate=false）
  → すべてー 果物☐ 野菜ー 葉もの☑ 根菜☐ | 選んだもの：2件 / キャベツ、ほうれん草
根菜をクリック（押した直後: checked=true indeterminate=false）
  → すべてー 果物☐ 野菜☑ 葉もの☑ 根菜☑ | 選んだもの：4件 / キャベツ、ほうれん草、にんじん、だいこん

import { useLayoutEffect, useRef } from 'react';

type Props = {
  label: string;
  checked: boolean;
  indeterminate: boolean;
  disabled?: boolean;
  onChange: () => void;
};

export function TriCheckbox({ label, checked, indeterminate, disabled, onChange }: Props) {
  const ref = useRef<HTMLInputElement>(null);

  // indeterminate は HTML の属性がないので、描画のたびに DOM のプロパティへ入れ直す
  useLayoutEffect(() => {
    ref.current!.indeterminate = indeterminate;
  });

  return (
    <label>
      <input ref={ref} type="checkbox" checked={checked} disabled={disabled} onChange={onChange} />
      {label}
    </label>
  );
}

りんごをクリック → すべてー 果物ー 野菜☐ 葉もの☐ 根菜☐ | 選んだもの：1件 / りんご
果物をクリック → すべてー 果物☐ 野菜☐ 葉もの☐ 根菜☐ | 選んだもの：2件 / りんご、ぶどう

function toggle(node: TreeNode) {
    // 選べない項目（disabled）は、親を押しても変えない
    const targets = leaves(node).filter((leaf) => !leaf.disabled);
    const allOn = targets.every((leaf) => selected.has(leaf.id));
    const next = new Set(selected);
    for (const leaf of targets) {
      if (allOn) next.delete(leaf.id);
      else next.add(leaf.id);
    }
    setSelected(next);
  }

果物をクリック（押した直後: checked=true indeterminate=false）
  → すべてー 果物ー 野菜☐ 葉もの☐ 根菜☐ | 選んだもの：2件 / りんご、ぶどう
果物をクリック（押した直後: checked=true indeterminate=false）
  → すべて☐ 果物☐ 野菜☐ 葉もの☐ 根菜☐ | 選んだもの：0件 / なし

    - checkbox "すべて" [checked=mixed]
    - text: すべて
    - list:
      - listitem:
        - checkbox "果物" [checked=mixed]
        - text: 果物
        - list:
          - listitem:
            - checkbox "りんご" [checked]