feat(Tree): add component * 2

Author: tenphi

src/components/content/Tree/Tree.test.tsx

@@ -61,6 +61,40 @@ describe('<Tree />', () => {
     expect(info.node.key).toBe('fruits');
   });
 
+  it('reports the correct toggled node across multiple uncontrolled toggles', async () => {
+    const onExpand = vi.fn();
+    const { getAllByRole } = renderWithRoot(
+      <Tree
+        treeData={SAMPLE}
+        defaultExpandedKeys={['fruits']}
+        onExpand={onExpand}
+      />,
+    );
+
+    const rows = getAllByRole('row');
+    const fruitsToggle = rows[0].querySelector(
+      'button[data-element="Toggle"]',
+    ) as HTMLButtonElement;
+    const vegetablesToggle = rows[3].querySelector(
+      'button[data-element="Toggle"]',
+    ) as HTMLButtonElement;
+
+    await act(async () => await userEvent.click(vegetablesToggle));
+    let [, info] = onExpand.mock.calls[onExpand.mock.calls.length - 1];
+    expect(info.expanded).toBe(true);
+    expect(info.node.key).toBe('vegetables');
+
+    await act(async () => await userEvent.click(fruitsToggle));
+    [, info] = onExpand.mock.calls[onExpand.mock.calls.length - 1];
+    expect(info.expanded).toBe(false);
+    expect(info.node.key).toBe('fruits');
+
+    await act(async () => await userEvent.click(vegetablesToggle));
+    [, info] = onExpand.mock.calls[onExpand.mock.calls.length - 1];
+    expect(info.expanded).toBe(false);
+    expect(info.node.key).toBe('vegetables');
+  });
+
   describe('checkable mode', () => {
     it('renders checkboxes when isCheckable is true', () => {
       const { getAllByRole } = renderWithRoot(

src/components/content/Tree/Tree.tsx

@@ -198,16 +198,33 @@ function TreeBase(props: CubeTreeProps, ref: ForwardedRef<HTMLDivElement>) {
 
   const loadDataController = useLoadData({ nodesByKey, loadData });
 
+  /**
+   * Tracks the previously-expanded set so we can diff against the next set
+   * inside `handleExpandedChange`. In controlled mode the parent owns the
+   * truth (read from `effectiveExpandedKeys`); in uncontrolled mode this
+   * ref is the only source for the previous state — `effectiveExpandedKeys`
+   * is `undefined` and would otherwise produce an empty `previous` set,
+   * mis-identifying every toggle.
+   */
+  const previousExpandedRef = useRef<Set<Key>>(
+    new Set<Key>(expandedKeys ?? defaultExpandedKeys ?? []),
+  );
+
   /**
    * Translate Stately's `Set<Key>` callbacks into the public AntD-flavoured
    * `Key[]` shape and dispatch the per-key load.
    */
   const handleExpandedChange = useEvent((nextSet: Set<Key>) => {
     loadDataController.onExpandedChanged(nextSet);
 
+    const previous =
+      expandedKeys !== undefined
+        ? new Set<Key>(effectiveExpandedKeys ?? [])
+        : previousExpandedRef.current;
+    previousExpandedRef.current = new Set<Key>(nextSet);
+
     if (!onExpand) return;
     const nextArr: Key[] = Array.from(nextSet);
-    const previous = new Set<Key>(effectiveExpandedKeys ?? []);
 
     /**
      * Find the single key that toggled relative to the previous set.

src/components/content/Tree/use-checkbox-tree.ts

@@ -145,7 +145,14 @@ export function useCheckboxTree(opts: UseCheckboxTreeOptions): CheckboxTree {
       };
     }
 
-    if (isControlled) {
+    /**
+     * If the consumer passed the object shape (`{ checked, halfChecked }`),
+     * they own the half-checked set and we use it as-is. With the array
+     * shape we still need to derive `halfChecked` ourselves — the consumer
+     * only provides `checked`, so parents should still light up
+     * indeterminate when only some descendants are checked.
+     */
+    if (isControlled && wantsObjectShape) {
       return {
         checkedSet: new Set(sourceChecked),
         halfCheckedSet: new Set(controlled!.halfChecked),
@@ -209,7 +216,15 @@ export function useCheckboxTree(opts: UseCheckboxTreeOptions): CheckboxTree {
     }
 
     return { checkedSet: checked, halfCheckedSet: half };
-  }, [isCheckable, isControlled, sourceChecked, controlled, treeData, index]);
+  }, [
+    isCheckable,
+    isControlled,
+    wantsObjectShape,
+    sourceChecked,
+    controlled,
+    treeData,
+    index,
+  ]);
 
   const toggle = useEvent((key: string) => {
     const node = index.byKey.get(key);