@primitiv-ui/react 0.1.0

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

@@ -0,0 +1,200 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Tree } from "../Tree";
+
+function renderFlatTree() {
+  return render(
+    <Tree.Root selectionMode="multiple">
+      <Tree.Item value="a">Apples</Tree.Item>
+      <Tree.Item value="b">Bananas</Tree.Item>
+      <Tree.Item value="c">Cherries</Tree.Item>
+      <Tree.Item value="d">Dates</Tree.Item>
+    </Tree.Root>,
+  );
+}
+
+function renderNestedTree() {
+  return render(
+    <Tree.Root
+      selectionMode="multiple"
+      defaultExpandedValues={["src"]}
+    >
+      <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.Item value="button">button.ts</Tree.Item>
+        </Tree.BranchContent>
+      </Tree.Branch>
+      <Tree.Item value="pkg">package.json</Tree.Item>
+    </Tree.Root>,
+  );
+}
+
+describe("Tree range selection tests", () => {
+  it("should select a contiguous range with Shift+click using the previous click as anchor", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderFlatTree();
+
+    // 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",
+      "true",
+    );
+    expect(screen.getByText("Cherries")).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    expect(screen.getByText("Dates")).toHaveAttribute("aria-selected", "false");
+  });
+
+  it("should treat the clicked item as anchor when no previous click set one", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderFlatTree();
+
+    // Act
+    await user.keyboard("{Shift>}");
+    await user.click(screen.getByText("Bananas"));
+    await user.keyboard("{/Shift}");
+
+    // Assert — only Bananas selected
+    expect(screen.getByText("Bananas")).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    expect(screen.getByText("Apples")).toHaveAttribute("aria-selected", "false");
+  });
+
+  it("should support a backward Shift+click range", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderFlatTree();
+
+    // Act
+    await user.click(screen.getByText("Cherries"));
+    await user.keyboard("{Shift>}");
+    await user.click(screen.getByText("Apples"));
+    await user.keyboard("{/Shift}");
+
+    // Assert
+    expect(screen.getByText("Apples")).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByText("Bananas")).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    expect(screen.getByText("Cherries")).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+  });
+
+  it("should include visible nested items in a Shift+click range", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderNestedTree();
+
+    // Act
+    await user.click(screen.getByText("readme"));
+    await user.keyboard("{Shift>}");
+    await user.click(screen.getByText("button.ts"));
+    await user.keyboard("{/Shift}");
+
+    // Assert — readme, src (branch), index.ts, button.ts
+    expect(screen.getByText("readme")).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByText("index.ts")).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    expect(screen.getByText("button.ts")).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    expect(screen.getByText("package.json")).toHaveAttribute(
+      "aria-selected",
+      "false",
+    );
+  });
+
+  it("should fall back to just the clicked value when the anchor is no longer visible", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Tree.Root
+        selectionMode="multiple"
+        defaultExpandedValues={["src"]}
+      >
+        <Tree.Branch value="src">
+          <Tree.BranchControl>src</Tree.BranchControl>
+          <Tree.BranchContent>
+            <Tree.Item value="index">index.ts</Tree.Item>
+          </Tree.BranchContent>
+        </Tree.Branch>
+        <Tree.Item value="pkg">package.json</Tree.Item>
+      </Tree.Root>,
+    );
+
+    // Set anchor on the nested item without touching the parent branch
+    await user.click(screen.getByText("index.ts"));
+
+    // Collapse the parent via ArrowLeft on the focused nested item —
+    // ArrowLeft on a nested leaf focuses the parent, but a separate
+    // ArrowLeft on the now-focused branch collapses it without going
+    // through select(), so the anchor stays pointed at the (now-hidden)
+    // index.ts
+    await user.keyboard("{ArrowLeft}{ArrowLeft}");
+
+    // Act — Shift+click another item; anchor "index.ts" is no longer
+    // in the visible order
+    await user.keyboard("{Shift>}");
+    await user.click(screen.getByText("package.json"));
+    await user.keyboard("{/Shift}");
+
+    // Assert — fallback path selected just the clicked value
+    expect(screen.getByText("package.json")).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+  });
+
+  it("should skip collapsed branch children when ranging across a closed branch", async () => {
+    // Arrange — src is collapsed
+    const user = userEvent.setup();
+    render(
+      <Tree.Root selectionMode="multiple">
+        <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.Item value="pkg">package.json</Tree.Item>
+      </Tree.Root>,
+    );
+
+    // Act — click readme, then Shift+click package.json
+    await user.click(screen.getByText("readme"));
+    await user.keyboard("{Shift>}");
+    await user.click(screen.getByText("package.json"));
+    await user.keyboard("{/Shift}");
+
+    // Assert — readme, src, pkg selected; nested index.ts is not visible
+    expect(screen.getByText("readme")).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByText("package.json")).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    expect(screen.queryByText("index.ts")).not.toBeInTheDocument();
+  });
+});

package/src/Tree/__tests__/Tree.recursion-depth.test.tsx

@@ -0,0 +1,73 @@
+import { render, screen } from "@testing-library/react";
+
+import { Tree } from "../Tree";
+
+function renderNestedTree() {
+  return render(
+    <Tree.Root defaultExpandedValues={["src", "components"]}>
+      <Tree.Item value="root-leaf">root-leaf</Tree.Item>
+      <Tree.Branch value="src">
+        <Tree.BranchControl>src</Tree.BranchControl>
+        <Tree.BranchContent>
+          <Tree.Item value="index">index.ts</Tree.Item>
+          <Tree.Branch value="components">
+            <Tree.BranchControl>components</Tree.BranchControl>
+            <Tree.BranchContent>
+              <Tree.Item value="button">button.tsx</Tree.Item>
+            </Tree.BranchContent>
+          </Tree.Branch>
+        </Tree.BranchContent>
+      </Tree.Branch>
+    </Tree.Root>,
+  );
+}
+
+const treeitemOf = (text: string) =>
+  screen.getByText(text).closest('[role="treeitem"]') as HTMLElement;
+
+describe("Tree recursion depth tests", () => {
+  it("should render a root-level item at depth 0 with aria-level 1", () => {
+    // Arrange
+    renderNestedTree();
+
+    // Assert
+    expect(treeitemOf("root-leaf")).toHaveAttribute("data-depth", "0");
+    expect(treeitemOf("root-leaf")).toHaveAttribute("aria-level", "1");
+  });
+
+  it("should render a root-level branch at depth 0 with aria-level 1", () => {
+    // Arrange
+    renderNestedTree();
+
+    // Assert
+    expect(treeitemOf("src")).toHaveAttribute("data-depth", "0");
+    expect(treeitemOf("src")).toHaveAttribute("aria-level", "1");
+  });
+
+  it("should render a nested item one level deeper than its branch", () => {
+    // Arrange
+    renderNestedTree();
+
+    // Assert
+    expect(treeitemOf("index.ts")).toHaveAttribute("data-depth", "1");
+    expect(treeitemOf("index.ts")).toHaveAttribute("aria-level", "2");
+  });
+
+  it("should render a nested branch one level deeper than its parent branch", () => {
+    // Arrange
+    renderNestedTree();
+
+    // Assert
+    expect(treeitemOf("components")).toHaveAttribute("data-depth", "1");
+    expect(treeitemOf("components")).toHaveAttribute("aria-level", "2");
+  });
+
+  it("should render a deeply nested item at depth 2 with aria-level 3", () => {
+    // Arrange
+    renderNestedTree();
+
+    // Assert
+    expect(treeitemOf("button.tsx")).toHaveAttribute("data-depth", "2");
+    expect(treeitemOf("button.tsx")).toHaveAttribute("aria-level", "3");
+  });
+});

package/src/Tree/__tests__/Tree.roving-tabindex.test.tsx

@@ -0,0 +1,117 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Tree } from "../Tree";
+
+function renderTree() {
+  return render(
+    <Tree.Root>
+      <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 roving tabindex tests", () => {
+  it("should give only the first visible item a tabIndex of 0", () => {
+    // Arrange
+    renderTree();
+
+    // Assert
+    expect(screen.getByText("Apples")).toHaveAttribute("tabindex", "0");
+    expect(screen.getByText("Bananas")).toHaveAttribute("tabindex", "-1");
+    expect(screen.getByText("Cherries")).toHaveAttribute("tabindex", "-1");
+  });
+
+  it("should move focus to the next visible item on ArrowDown", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderTree();
+
+    // Act
+    screen.getByText("Apples").focus();
+    await user.keyboard("{ArrowDown}");
+
+    // Assert
+    expect(screen.getByText("Bananas")).toHaveFocus();
+    expect(screen.getByText("Bananas")).toHaveAttribute("tabindex", "0");
+    expect(screen.getByText("Apples")).toHaveAttribute("tabindex", "-1");
+  });
+
+  it("should move focus to the previous visible item on ArrowUp", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderTree();
+
+    // Act
+    screen.getByText("Bananas").focus();
+    await user.keyboard("{ArrowUp}");
+
+    // Assert
+    expect(screen.getByText("Apples")).toHaveFocus();
+  });
+
+  it("should move focus to the first visible item on Home", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderTree();
+
+    // Act
+    screen.getByText("Cherries").focus();
+    await user.keyboard("{Home}");
+
+    // Assert
+    expect(screen.getByText("Apples")).toHaveFocus();
+  });
+
+  it("should move focus to the last visible item on End", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderTree();
+
+    // Act
+    screen.getByText("Apples").focus();
+    await user.keyboard("{End}");
+
+    // Assert
+    expect(screen.getByText("Cherries")).toHaveFocus();
+  });
+
+  it("should move the tabstop when an item is clicked", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    renderTree();
+
+    // Act
+    await user.click(screen.getByText("Bananas"));
+
+    // Assert
+    expect(screen.getByText("Bananas")).toHaveAttribute("tabindex", "0");
+    expect(screen.getByText("Apples")).toHaveAttribute("tabindex", "-1");
+  });
+
+  it("should skip nested items inside collapsed branches when navigating", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Tree.Root>
+        <Tree.Item value="a">Apples</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.Item value="b">Bananas</Tree.Item>
+      </Tree.Root>,
+    );
+
+    // Act
+    screen.getByText("Apples").focus();
+    await user.keyboard("{ArrowDown}{ArrowDown}");
+
+    // Assert — moved through src branch into Bananas (index.ts hidden)
+    expect(screen.getByText("Bananas")).toHaveFocus();
+  });
+});