@primitiv-ui/react 0.1.0

package/src/Tree/__tests__/Tree.disabled-items.test.tsx

@@ -0,0 +1,196 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Tree } from "../Tree";
+
+describe("Tree disabled items tests", () => {
+  it("should expose aria-disabled and data-disabled on a disabled item", () => {
+    // Arrange
+    render(
+      <Tree.Root>
+        <Tree.Item value="a" disabled>
+          Apples
+        </Tree.Item>
+      </Tree.Root>,
+    );
+
+    // Assert
+    const item = screen.getByText("Apples");
+
+    expect(item).toHaveAttribute("aria-disabled", "true");
+    expect(item).toHaveAttribute("data-disabled", "");
+  });
+
+  it("should not select a disabled item when clicked", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onSelectedValueChange = vi.fn();
+    render(
+      <Tree.Root onSelectedValueChange={onSelectedValueChange}>
+        <Tree.Item value="a" disabled>
+          Apples
+        </Tree.Item>
+      </Tree.Root>,
+    );
+
+    // Act
+    await user.click(screen.getByText("Apples"));
+
+    // Assert
+    expect(onSelectedValueChange).not.toHaveBeenCalled();
+    expect(screen.getByText("Apples")).toHaveAttribute("aria-selected", "false");
+  });
+
+  it("should skip disabled items when defaulting the roving tabstop", () => {
+    // Arrange
+    render(
+      <Tree.Root>
+        <Tree.Item value="a" disabled>
+          Apples
+        </Tree.Item>
+        <Tree.Item value="b">Bananas</Tree.Item>
+      </Tree.Root>,
+    );
+
+    // Assert
+    expect(screen.getByText("Apples")).toHaveAttribute("tabindex", "-1");
+    expect(screen.getByText("Bananas")).toHaveAttribute("tabindex", "0");
+  });
+
+  it("should skip disabled items in arrow navigation", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Tree.Root>
+        <Tree.Item value="a">Apples</Tree.Item>
+        <Tree.Item value="b" disabled>
+          Bananas
+        </Tree.Item>
+        <Tree.Item value="c">Cherries</Tree.Item>
+      </Tree.Root>,
+    );
+
+    // Act
+    screen.getByText("Apples").focus();
+    await user.keyboard("{ArrowDown}");
+
+    // Assert
+    expect(screen.getByText("Cherries")).toHaveFocus();
+  });
+
+  it("should not toggle or select a disabled branch on click", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Tree.Root>
+        <Tree.Branch value="src" disabled>
+          <Tree.BranchControl>src</Tree.BranchControl>
+          <Tree.BranchContent>
+            <Tree.Item value="index">index.ts</Tree.Item>
+          </Tree.BranchContent>
+        </Tree.Branch>
+      </Tree.Root>,
+    );
+
+    // Act
+    await user.click(screen.getByText("src"));
+
+    // Assert — branch stays collapsed and unselected
+    const branch = screen.getByText("src").closest('[role="treeitem"]');
+
+    expect(branch).toHaveAttribute("aria-expanded", "false");
+    expect(branch).toHaveAttribute("aria-selected", "false");
+  });
+
+  it("should not select a disabled item on Enter", async () => {
+    // Arrange — sibling enabled item so navigable isn't empty
+    const user = userEvent.setup();
+    render(
+      <Tree.Root>
+        <Tree.Item value="a" disabled>
+          Apples
+        </Tree.Item>
+        <Tree.Item value="b">Bananas</Tree.Item>
+      </Tree.Root>,
+    );
+
+    // Act
+    screen.getByText("Apples").focus();
+    await user.keyboard("{Enter}");
+
+    // Assert
+    expect(screen.getByText("Apples")).toHaveAttribute("aria-selected", "false");
+  });
+
+  it("should treat ArrowRight on a leaf as a no-op", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Tree.Root>
+        <Tree.Item value="a">Apples</Tree.Item>
+        <Tree.Item value="b">Bananas</Tree.Item>
+      </Tree.Root>,
+    );
+
+    // Act
+    screen.getByText("Apples").focus();
+    await user.keyboard("{ArrowRight}");
+
+    // Assert — focus stayed on Apples
+    expect(screen.getByText("Apples")).toHaveFocus();
+  });
+
+  it("should treat ArrowLeft on a disabled branch as a no-op", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Tree.Root defaultExpandedValues={["src"]}>
+        <Tree.Branch value="src" disabled>
+          <Tree.BranchControl>src</Tree.BranchControl>
+          <Tree.BranchContent>
+            <Tree.Item value="index">index.ts</Tree.Item>
+          </Tree.BranchContent>
+        </Tree.Branch>
+      </Tree.Root>,
+    );
+    const branch = screen.getByText("src").closest('[role="treeitem"]')!;
+
+    // Act
+    (branch as HTMLElement).focus();
+    await user.keyboard("{ArrowLeft}");
+
+    // Assert — branch stays expanded
+    expect(branch).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("should exclude disabled items from a Shift+click range selection", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Tree.Root selectionMode="multiple">
+        <Tree.Item value="a">Apples</Tree.Item>
+        <Tree.Item value="b" disabled>
+          Bananas
+        </Tree.Item>
+        <Tree.Item value="c">Cherries</Tree.Item>
+      </Tree.Root>,
+    );
+
+    // Act
+    await user.click(screen.getByText("Apples"));
+    await user.keyboard("{Shift>}");
+    await user.click(screen.getByText("Cherries"));
+    await user.keyboard("{/Shift}");
+
+    // Assert
+    expect(screen.getByText("Apples")).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByText("Bananas")).toHaveAttribute(
+      "aria-selected",
+      "false",
+    );
+    expect(screen.getByText("Cherries")).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+  });
+});

package/src/Tree/__tests__/Tree.error-handling.test.tsx

@@ -0,0 +1,71 @@
+import { render } from "@testing-library/react";
+
+import { Tree } from "../Tree";
+
+describe("Tree error handling tests", () => {
+  it("should throw when Tree.Item is rendered outside Tree.Root", () => {
+    // Act / Assert
+    expect(() => render(<Tree.Item value="a">Orphan</Tree.Item>)).toThrow(
+      "<Tree.Root>",
+    );
+  });
+
+  it("should throw when a branch declares more than one BranchControl", () => {
+    // Act / Assert
+    expect(() =>
+      render(
+        <Tree.Root>
+          <Tree.Branch value="src">
+            <Tree.BranchControl>src</Tree.BranchControl>
+            <Tree.BranchControl>src again</Tree.BranchControl>
+          </Tree.Branch>
+        </Tree.Root>,
+      ),
+    ).toThrow("at most one <Tree.BranchControl>");
+  });
+
+  it("should throw when a branch declares more than one BranchContent", () => {
+    // Act / Assert
+    expect(() =>
+      render(
+        <Tree.Root>
+          <Tree.Branch value="src">
+            <Tree.BranchControl>src</Tree.BranchControl>
+            <Tree.BranchContent>
+              <Tree.Item value="a">A</Tree.Item>
+            </Tree.BranchContent>
+            <Tree.BranchContent>
+              <Tree.Item value="b">B</Tree.Item>
+            </Tree.BranchContent>
+          </Tree.Branch>
+        </Tree.Root>,
+      ),
+    ).toThrow("at most one <Tree.BranchContent>");
+  });
+
+  it("should throw when Tree.BranchControl is rendered outside Tree.Branch", () => {
+    // Act / Assert
+    expect(() =>
+      render(
+        <Tree.Root>
+          <Tree.BranchControl>Orphan</Tree.BranchControl>
+        </Tree.Root>,
+      ),
+    ).toThrow("<Tree.Branch>");
+  });
+
+  it("should throw when a branch is missing a BranchControl", () => {
+    // Act / Assert
+    expect(() =>
+      render(
+        <Tree.Root>
+          <Tree.Branch value="src">
+            <Tree.BranchContent>
+              <Tree.Item value="a">A</Tree.Item>
+            </Tree.BranchContent>
+          </Tree.Branch>
+        </Tree.Root>,
+      ),
+    ).toThrow("must contain a <Tree.BranchControl>");
+  });
+});

package/src/Tree/__tests__/Tree.forceMount.test.tsx

@@ -0,0 +1,72 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Tree } from "../Tree";
+
+function renderTree(props?: { defaultExpandedValues?: string[] }) {
+  return render(
+    <Tree.Root {...props}>
+      <Tree.Branch value="src">
+        <Tree.BranchControl>src</Tree.BranchControl>
+        <Tree.BranchContent forceMount>
+          <Tree.Item value="index">index.ts</Tree.Item>
+        </Tree.BranchContent>
+      </Tree.Branch>
+    </Tree.Root>,
+  );
+}
+
+describe("Tree forceMount tests", () => {
+  it("should keep BranchContent mounted while the branch is collapsed", () => {
+    // Arrange
+    renderTree();
+
+    // Assert
+    expect(screen.getByRole("group", { hidden: true })).toBeInTheDocument();
+    expect(screen.getByText("index.ts")).toBeInTheDocument();
+  });
+
+  it("should mark collapsed forceMount content as closed and aria-hidden", () => {
+    // Arrange
+    renderTree();
+
+    // Assert
+    const group = screen.getByRole("group", { hidden: true });
+
+    expect(group).toHaveAttribute("data-state", "closed");
+    expect(group).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("should not apply the hidden attribute to forceMount content", () => {
+    // Arrange
+    renderTree();
+
+    // Assert
+    expect(screen.getByRole("group", { hidden: true })).not.toHaveAttribute(
+      "hidden",
+    );
+  });
+
+  it("should mark expanded forceMount content as open without aria-hidden", () => {
+    // Arrange
+    renderTree({ defaultExpandedValues: ["src"] });
+
+    // Assert
+    const group = screen.getByRole("group");
+
+    expect(group).toHaveAttribute("data-state", "open");
+    expect(group).not.toHaveAttribute("aria-hidden");
+  });
+
+  it("should update the forceMount content state when the branch is toggled", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderTree();
+
+    // Act
+    await user.click(screen.getByText("src"));
+
+    // Assert
+    expect(screen.getByRole("group")).toHaveAttribute("data-state", "open");
+  });
+});

package/src/Tree/__tests__/Tree.keyboard-interaction.test.tsx

@@ -0,0 +1,150 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Tree } from "../Tree";
+
+function renderNestedTree(props?: { defaultExpandedValues?: string[] }) {
+  return render(
+    <Tree.Root {...props}>
+      <Tree.Item value="readme">readme</Tree.Item>
+      <Tree.Branch value="src">
+        <Tree.BranchControl>src</Tree.BranchControl>
+        <Tree.BranchContent>
+          <Tree.Item value="index">index.ts</Tree.Item>
+        </Tree.BranchContent>
+      </Tree.Branch>
+    </Tree.Root>,
+  );
+}
+
+const branchTreeitem = () =>
+  screen.getByText("src").closest('[role="treeitem"]') as HTMLElement;
+
+describe("Tree keyboard interaction tests", () => {
+  it("should expand a collapsed branch on ArrowRight", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderNestedTree();
+
+    // Act
+    branchTreeitem().focus();
+    await user.keyboard("{ArrowRight}");
+
+    // Assert
+    expect(branchTreeitem()).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("should focus the first child on ArrowRight when the branch is already expanded", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderNestedTree({ defaultExpandedValues: ["src"] });
+
+    // Act
+    branchTreeitem().focus();
+    await user.keyboard("{ArrowRight}");
+
+    // Assert
+    expect(screen.getByText("index.ts")).toHaveFocus();
+  });
+
+  it("should collapse an expanded branch on ArrowLeft", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderNestedTree({ defaultExpandedValues: ["src"] });
+
+    // Act
+    branchTreeitem().focus();
+    await user.keyboard("{ArrowLeft}");
+
+    // Assert
+    expect(branchTreeitem()).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("should focus the parent branch on ArrowLeft from a nested item", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderNestedTree({ defaultExpandedValues: ["src"] });
+
+    // Act
+    screen.getByText("index.ts").focus();
+    await user.keyboard("{ArrowLeft}");
+
+    // Assert
+    expect(branchTreeitem()).toHaveFocus();
+  });
+
+  it("should leave a root-level leaf untouched on ArrowLeft", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderNestedTree();
+    const readme = screen.getByText("readme");
+
+    // Act
+    readme.focus();
+    await user.keyboard("{ArrowLeft}");
+
+    // Assert — focus stays on readme
+    expect(readme).toHaveFocus();
+  });
+
+  it("should select an item on Enter", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderNestedTree();
+
+    // Act
+    screen.getByText("readme").focus();
+    await user.keyboard("{Enter}");
+
+    // Assert
+    expect(screen.getByText("readme")).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("should select an item on Space", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderNestedTree();
+
+    // Act
+    screen.getByText("readme").focus();
+    await user.keyboard("{ }");
+
+    // Assert
+    expect(screen.getByText("readme")).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("should no-op on ArrowRight when an expanded branch has no following visible item", async () => {
+    // Arrange — an expanded but empty branch at the very end of the tree
+    const user = userEvent.setup();
+    render(
+      <Tree.Root defaultExpandedValues={["src"]}>
+        <Tree.Branch value="src">
+          <Tree.BranchControl>src</Tree.BranchControl>
+          <Tree.BranchContent>{null}</Tree.BranchContent>
+        </Tree.Branch>
+      </Tree.Root>,
+    );
+    const branch = screen.getByText("src").closest('[role="treeitem"]')!;
+
+    // Act
+    (branch as HTMLElement).focus();
+    await user.keyboard("{ArrowRight}");
+
+    // Assert — focus stays on the branch
+    expect(branch).toHaveFocus();
+  });
+
+  it("should toggle and select a branch on Enter", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderNestedTree();
+
+    // Act
+    branchTreeitem().focus();
+    await user.keyboard("{Enter}");
+
+    // Assert
+    expect(branchTreeitem()).toHaveAttribute("aria-expanded", "true");
+    expect(branchTreeitem()).toHaveAttribute("aria-selected", "true");
+  });
+});

package/src/Tree/__tests__/Tree.multiple-selection.test.tsx

@@ -0,0 +1,151 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Tree } from "../Tree";
+
+type MultipleSelectionOverrides = {
+  defaultSelectedValues?: string[];
+  selectedValues?: string[];
+  onSelectedValuesChange?: (values: string[]) => void;
+};
+
+function renderTree(props?: MultipleSelectionOverrides) {
+  return render(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    <Tree.Root selectionMode="multiple" {...(props as any)}>
+      <Tree.Item value="a">Apples</Tree.Item>
+      <Tree.Item value="b">Bananas</Tree.Item>
+      <Tree.Item value="c">Cherries</Tree.Item>
+    </Tree.Root>,
+  );
+}
+
+describe("Tree multiple selection tests", () => {
+  it("should expose aria-multiselectable on the tree root in multiple mode", () => {
+    // Arrange
+    renderTree();
+
+    // Assert
+    expect(screen.getByRole("tree")).toHaveAttribute(
+      "aria-multiselectable",
+      "true",
+    );
+  });
+
+  it("should reflect defaultSelectedValues on first render", () => {
+    // Arrange
+    renderTree({ defaultSelectedValues: ["a", "c"] });
+
+    // Assert
+    expect(screen.getByText("Apples")).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByText("Bananas")).toHaveAttribute(
+      "aria-selected",
+      "false",
+    );
+    expect(screen.getByText("Cherries")).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+  });
+
+  it("should replace selection on a plain click", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderTree({ defaultSelectedValues: ["a", "b"] });
+
+    // Act
+    await user.click(screen.getByText("Cherries"));
+
+    // Assert
+    expect(screen.getByText("Apples")).toHaveAttribute("aria-selected", "false");
+    expect(screen.getByText("Bananas")).toHaveAttribute(
+      "aria-selected",
+      "false",
+    );
+    expect(screen.getByText("Cherries")).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+  });
+
+  it("should add to selection on Ctrl+click", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderTree({ defaultSelectedValues: ["a"] });
+
+    // Act
+    await user.keyboard("{Control>}");
+    await user.click(screen.getByText("Bananas"));
+    await user.keyboard("{/Control}");
+
+    // Assert
+    expect(screen.getByText("Apples")).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByText("Bananas")).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+  });
+
+  it("should remove from selection on Ctrl+click of an already-selected item", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderTree({ defaultSelectedValues: ["a", "b"] });
+
+    // Act
+    await user.keyboard("{Control>}");
+    await user.click(screen.getByText("Apples"));
+    await user.keyboard("{/Control}");
+
+    // Assert
+    expect(screen.getByText("Apples")).toHaveAttribute("aria-selected", "false");
+    expect(screen.getByText("Bananas")).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+  });
+
+  it("should report onSelectedValuesChange with the next array", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onSelectedValuesChange = vi.fn();
+    renderTree({ defaultSelectedValues: ["a"], onSelectedValuesChange });
+
+    // Act
+    await user.keyboard("{Control>}");
+    await user.click(screen.getByText("Bananas"));
+    await user.keyboard("{/Control}");
+
+    // Assert
+    expect(onSelectedValuesChange).toHaveBeenCalledWith(["a", "b"]);
+  });
+
+  it("should not refire onSelectedValuesChange on a plain click of the only selected item", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onSelectedValuesChange = vi.fn();
+    renderTree({
+      defaultSelectedValues: ["a"],
+      onSelectedValuesChange,
+    });
+
+    // Act — plain click on the already-only-selected item
+    await user.click(screen.getByText("Apples"));
+
+    // Assert
+    expect(onSelectedValuesChange).not.toHaveBeenCalled();
+  });
+
+  it("should not expose aria-multiselectable in single mode", () => {
+    // Arrange
+    render(
+      <Tree.Root>
+        <Tree.Item value="a">Apples</Tree.Item>
+      </Tree.Root>,
+    );
+
+    // Assert
+    expect(screen.getByRole("tree")).not.toHaveAttribute(
+      "aria-multiselectable",
+    );
+  });
+});