@primitiv-ui/react 0.1.0

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

@@ -0,0 +1,65 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { MillerColumns } from "../MillerColumns";
+
+describe("MillerColumns — disabled items", () => {
+  it("does not select a disabled item when it is clicked", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <MillerColumns.Root>
+        <MillerColumns.Column>
+          <MillerColumns.Item value="a" disabled>
+            A
+          </MillerColumns.Item>
+        </MillerColumns.Column>
+      </MillerColumns.Root>,
+    );
+
+    const item = screen.getByRole("treeitem", { name: "A" });
+    await user.click(item);
+
+    expect(item).toHaveAttribute("aria-selected", "false");
+  });
+
+  it("exposes aria-disabled and data-disabled on a disabled item only", () => {
+    render(
+      <MillerColumns.Root>
+        <MillerColumns.Column>
+          <MillerColumns.Item value="a" disabled>
+            A
+          </MillerColumns.Item>
+          <MillerColumns.Item value="b">B</MillerColumns.Item>
+        </MillerColumns.Column>
+      </MillerColumns.Root>,
+    );
+
+    const disabled = screen.getByRole("treeitem", { name: "A" });
+    expect(disabled).toHaveAttribute("aria-disabled", "true");
+    expect(disabled).toHaveAttribute("data-disabled");
+
+    const enabled = screen.getByRole("treeitem", { name: "B" });
+    expect(enabled).not.toHaveAttribute("aria-disabled");
+    expect(enabled).not.toHaveAttribute("data-disabled");
+  });
+
+  it("does not invoke a consumer onClick on a disabled item", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+
+    render(
+      <MillerColumns.Root>
+        <MillerColumns.Column>
+          <MillerColumns.Item value="a" disabled onClick={onClick}>
+            A
+          </MillerColumns.Item>
+        </MillerColumns.Column>
+      </MillerColumns.Root>,
+    );
+
+    await user.click(screen.getByRole("treeitem", { name: "A" }));
+
+    expect(onClick).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,57 @@
+import { render } from "@testing-library/react";
+
+import { MillerColumns } from "../MillerColumns";
+
+describe("MillerColumns — error handling", () => {
+  it("throws when Column is rendered outside Root", () => {
+    expect(() =>
+      render(
+        <MillerColumns.Column>
+          <MillerColumns.Item value="a">A</MillerColumns.Item>
+        </MillerColumns.Column>,
+      ),
+    ).toThrow("<MillerColumns.Root>");
+  });
+
+  it("throws when Item is rendered outside Column", () => {
+    expect(() =>
+      render(
+        <MillerColumns.Root>
+          <MillerColumns.Item value="a">A</MillerColumns.Item>
+        </MillerColumns.Root>,
+      ),
+    ).toThrow("<MillerColumns.Column>");
+  });
+
+  it("throws when ItemIndicator is rendered outside Item", () => {
+    expect(() =>
+      render(
+        <MillerColumns.Root>
+          <MillerColumns.Column>
+            <MillerColumns.ItemIndicator>▸</MillerColumns.ItemIndicator>
+          </MillerColumns.Column>
+        </MillerColumns.Root>,
+      ),
+    ).toThrow("<MillerColumns.Item>");
+  });
+
+  it("throws when an Item declares more than one nested Column", () => {
+    expect(() =>
+      render(
+        <MillerColumns.Root>
+          <MillerColumns.Column>
+            <MillerColumns.Item value="a">
+              A
+              <MillerColumns.Column>
+                <MillerColumns.Item value="a1">A1</MillerColumns.Item>
+              </MillerColumns.Column>
+              <MillerColumns.Column>
+                <MillerColumns.Item value="a2">A2</MillerColumns.Item>
+              </MillerColumns.Column>
+            </MillerColumns.Item>
+          </MillerColumns.Column>
+        </MillerColumns.Root>,
+      ),
+    ).toThrow("at most one nested");
+  });
+});

package/src/MillerColumns/__tests__/MillerColumns.fixtures.ts

@@ -0,0 +1,15 @@
+/**
+ * Shared, pure test data for the MillerColumns suite. No helpers, no JSX.
+ */
+
+/** Arrow / Home / End navigation within a single column (items A, B, C). */
+export const verticalArrowCases = [
+  { key: "{ArrowDown}", from: "A", to: "B" },
+  { key: "{ArrowDown}", from: "B", to: "C" },
+  { key: "{ArrowUp}", from: "C", to: "B" },
+  { key: "{ArrowUp}", from: "B", to: "A" },
+  { key: "{ArrowDown}", from: "C", to: "A" },
+  { key: "{ArrowUp}", from: "A", to: "C" },
+  { key: "{Home}", from: "B", to: "A" },
+  { key: "{End}", from: "B", to: "C" },
+] as const;

package/src/MillerColumns/__tests__/MillerColumns.item-indicator.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { MillerColumns } from "../MillerColumns";
+
+function Tree() {
+  return (
+    <MillerColumns.Root>
+      <MillerColumns.Column>
+        <MillerColumns.Item value="fruit">
+          Fruit
+          <MillerColumns.ItemIndicator data-testid="fruit-indicator">
+            ▸
+          </MillerColumns.ItemIndicator>
+          <MillerColumns.Column>
+            <MillerColumns.Item value="apple">Apple</MillerColumns.Item>
+          </MillerColumns.Column>
+        </MillerColumns.Item>
+        <MillerColumns.Item value="veg">
+          Veg
+          <MillerColumns.ItemIndicator data-testid="veg-indicator">
+            ▸
+          </MillerColumns.ItemIndicator>
+        </MillerColumns.Item>
+      </MillerColumns.Column>
+    </MillerColumns.Root>
+  );
+}
+
+describe("MillerColumns — item indicator", () => {
+  it("renders the indicator for a branch item, hidden from assistive tech", () => {
+    render(<Tree />);
+
+    const indicator = screen.getByTestId("fruit-indicator");
+    expect(indicator).toBeInTheDocument();
+    expect(indicator).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("renders nothing for a leaf item", () => {
+    render(<Tree />);
+
+    expect(screen.queryByTestId("veg-indicator")).not.toBeInTheDocument();
+  });
+
+  it("reflects the parent item's selection through data-state", async () => {
+    const user = userEvent.setup();
+
+    render(<Tree />);
+
+    const indicator = screen.getByTestId("fruit-indicator");
+    expect(indicator).toHaveAttribute("data-state", "unselected");
+
+    await user.click(screen.getByRole("treeitem", { name: "Fruit" }));
+
+    expect(indicator).toHaveAttribute("data-state", "selected");
+  });
+});

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

@@ -0,0 +1,181 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { MillerColumns } from "../MillerColumns";
+import { verticalArrowCases } from "./MillerColumns.fixtures";
+
+function FlatList() {
+  return (
+    <MillerColumns.Root>
+      <MillerColumns.Column>
+        <MillerColumns.Item value="a">A</MillerColumns.Item>
+        <MillerColumns.Item value="b">B</MillerColumns.Item>
+        <MillerColumns.Item value="c">C</MillerColumns.Item>
+      </MillerColumns.Column>
+    </MillerColumns.Root>
+  );
+}
+
+function Tree() {
+  return (
+    <MillerColumns.Root>
+      <MillerColumns.Column>
+        <MillerColumns.Item value="fruit">
+          Fruit
+          <MillerColumns.Column>
+            <MillerColumns.Item value="apple">Apple</MillerColumns.Item>
+            <MillerColumns.Item value="pear">Pear</MillerColumns.Item>
+          </MillerColumns.Column>
+        </MillerColumns.Item>
+        <MillerColumns.Item value="veg">Veg</MillerColumns.Item>
+      </MillerColumns.Column>
+    </MillerColumns.Root>
+  );
+}
+
+describe("MillerColumns — keyboard interaction", () => {
+  describe("vertical navigation within a column", () => {
+    it.each(verticalArrowCases)(
+      "$key moves focus from $from to $to",
+      async ({ key, from, to }) => {
+        const user = userEvent.setup();
+
+        render(<FlatList />);
+        screen.getByRole("treeitem", { name: from }).focus();
+
+        await user.keyboard(key);
+
+        expect(screen.getByRole("treeitem", { name: to })).toHaveFocus();
+      },
+    );
+
+    it("skips disabled items during arrow navigation", async () => {
+      const user = userEvent.setup();
+
+      render(
+        <MillerColumns.Root>
+          <MillerColumns.Column>
+            <MillerColumns.Item value="a">A</MillerColumns.Item>
+            <MillerColumns.Item value="b" disabled>
+              B
+            </MillerColumns.Item>
+            <MillerColumns.Item value="c">C</MillerColumns.Item>
+          </MillerColumns.Column>
+        </MillerColumns.Root>,
+      );
+      screen.getByRole("treeitem", { name: "A" }).focus();
+
+      await user.keyboard("{ArrowDown}");
+
+      expect(screen.getByRole("treeitem", { name: "C" })).toHaveFocus();
+    });
+  });
+
+  describe("activation", () => {
+    it("Enter selects the focused item", async () => {
+      const user = userEvent.setup();
+
+      render(<FlatList />);
+      const item = screen.getByRole("treeitem", { name: "B" });
+      item.focus();
+
+      await user.keyboard("{Enter}");
+
+      expect(item).toHaveAttribute("aria-selected", "true");
+    });
+
+    it("Space selects the focused item", async () => {
+      const user = userEvent.setup();
+
+      render(<FlatList />);
+      const item = screen.getByRole("treeitem", { name: "C" });
+      item.focus();
+
+      await user.keyboard(" ");
+
+      expect(item).toHaveAttribute("aria-selected", "true");
+    });
+
+    it("Enter does not select a disabled focused item", async () => {
+      const user = userEvent.setup();
+
+      render(
+        <MillerColumns.Root>
+          <MillerColumns.Column>
+            <MillerColumns.Item value="a">A</MillerColumns.Item>
+            <MillerColumns.Item value="b" disabled>
+              B
+            </MillerColumns.Item>
+          </MillerColumns.Column>
+        </MillerColumns.Root>,
+      );
+      const item = screen.getByRole("treeitem", { name: "B" });
+      item.focus();
+
+      await user.keyboard("{Enter}");
+
+      expect(item).toHaveAttribute("aria-selected", "false");
+    });
+  });
+
+  describe("horizontal navigation between columns", () => {
+    it("ArrowRight on a branch selects it and focuses the first child item", async () => {
+      const user = userEvent.setup();
+
+      render(<Tree />);
+      screen.getByRole("treeitem", { name: "Fruit" }).focus();
+
+      await user.keyboard("{ArrowRight}");
+
+      expect(screen.getByRole("treeitem", { name: "Apple" })).toHaveFocus();
+    });
+
+    it("ArrowRight on an already-expanded branch focuses its child column", async () => {
+      const user = userEvent.setup();
+
+      render(<Tree />);
+      await user.click(screen.getByRole("treeitem", { name: "Fruit" }));
+      screen.getByRole("treeitem", { name: "Fruit" }).focus();
+
+      await user.keyboard("{ArrowRight}");
+
+      expect(screen.getByRole("treeitem", { name: "Apple" })).toHaveFocus();
+    });
+
+    it("ArrowRight on a leaf does nothing", async () => {
+      const user = userEvent.setup();
+
+      render(<Tree />);
+      const veg = screen.getByRole("treeitem", { name: "Veg" });
+      veg.focus();
+
+      await user.keyboard("{ArrowRight}");
+
+      expect(veg).toHaveFocus();
+    });
+
+    it("ArrowLeft focuses the selected item of the parent column", async () => {
+      const user = userEvent.setup();
+
+      render(<Tree />);
+      await user.click(screen.getByRole("treeitem", { name: "Fruit" }));
+      screen.getByRole("treeitem", { name: "Pear" }).focus();
+
+      await user.keyboard("{ArrowLeft}");
+
+      expect(screen.getByRole("treeitem", { name: "Fruit" })).toHaveFocus();
+    });
+
+    it("ArrowLeft in the root column does nothing", async () => {
+      const user = userEvent.setup();
+
+      render(<Tree />);
+      const veg = screen.getByRole("treeitem", { name: "Veg" });
+      veg.focus();
+
+      await user.keyboard("{ArrowLeft}");
+
+      expect(veg).toHaveFocus();
+    });
+  });
+});

package/src/MillerColumns/__tests__/MillerColumns.preview-panel.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from "@testing-library/react";
+
+import { MillerColumns } from "../MillerColumns";
+
+describe("MillerColumns — preview panel", () => {
+  it("renders a panel at the trailing edge of the strip", () => {
+    render(
+      <MillerColumns.Root>
+        <MillerColumns.Column>
+          <MillerColumns.Item value="a">A</MillerColumns.Item>
+        </MillerColumns.Column>
+        <MillerColumns.PreviewPanel>preview</MillerColumns.PreviewPanel>
+      </MillerColumns.Root>,
+    );
+
+    const strip = screen.getByRole("tree");
+    const panel = screen.getByText("preview");
+
+    expect(panel).toHaveAttribute("data-miller-columns-preview");
+    expect(strip).toContainElement(panel);
+    expect(strip.lastElementChild).toBe(panel);
+  });
+
+  it("forwards props to the panel element", () => {
+    render(
+      <MillerColumns.Root>
+        <MillerColumns.Column>
+          <MillerColumns.Item value="a">A</MillerColumns.Item>
+        </MillerColumns.Column>
+        <MillerColumns.PreviewPanel className="preview" aria-label="Preview">
+          preview
+        </MillerColumns.PreviewPanel>
+      </MillerColumns.Root>,
+    );
+
+    const panel = screen.getByText("preview");
+
+    expect(panel).toHaveClass("preview");
+    expect(panel).toHaveAttribute("aria-label", "Preview");
+  });
+
+  it("throws when PreviewPanel is rendered outside Root", () => {
+    expect(() =>
+      render(<MillerColumns.PreviewPanel>x</MillerColumns.PreviewPanel>),
+    ).toThrow("<MillerColumns.Root>");
+  });
+});

package/src/MillerColumns/__tests__/MillerColumns.resize.test.tsx

@@ -0,0 +1,137 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import { MillerColumns } from "../MillerColumns";
+
+describe("MillerColumns — resize handle", () => {
+  it("renders a vertical separator inside a column", () => {
+    render(
+      <MillerColumns.Root>
+        <MillerColumns.Column>
+          <MillerColumns.ResizeHandle />
+          <MillerColumns.Item value="a">A</MillerColumns.Item>
+        </MillerColumns.Column>
+      </MillerColumns.Root>,
+    );
+
+    const handle = screen.getByRole("separator");
+
+    expect(handle).toHaveAttribute("aria-orientation", "vertical");
+    expect(handle).toHaveAttribute("data-miller-columns-resize-handle");
+  });
+
+  it("throws when ResizeHandle is rendered outside Column", () => {
+    expect(() =>
+      render(
+        <MillerColumns.Root>
+          <MillerColumns.ResizeHandle />
+        </MillerColumns.Root>,
+      ),
+    ).toThrow("<MillerColumns.Column>");
+  });
+
+  it("resizes its column on pointer drag", () => {
+    render(
+      <MillerColumns.Root>
+        <MillerColumns.Column>
+          <MillerColumns.ResizeHandle />
+          <MillerColumns.Item value="a">A</MillerColumns.Item>
+        </MillerColumns.Column>
+      </MillerColumns.Root>,
+    );
+
+    const handle = screen.getByRole("separator");
+    const column = screen.getByRole("group");
+
+    fireEvent.pointerDown(handle, { clientX: 100 });
+    fireEvent.pointerMove(window, { clientX: 260 });
+    fireEvent.pointerUp(window);
+
+    expect(column).toHaveStyle({ width: "160px" });
+  });
+
+  it("continues a second drag from the already-resized width", () => {
+    render(
+      <MillerColumns.Root>
+        <MillerColumns.Column>
+          <MillerColumns.ResizeHandle />
+          <MillerColumns.Item value="a">A</MillerColumns.Item>
+        </MillerColumns.Column>
+      </MillerColumns.Root>,
+    );
+
+    const handle = screen.getByRole("separator");
+    const column = screen.getByRole("group");
+
+    fireEvent.pointerDown(handle, { clientX: 100 });
+    fireEvent.pointerMove(window, { clientX: 260 });
+    fireEvent.pointerUp(window);
+
+    fireEvent.pointerDown(handle, { clientX: 0 });
+    fireEvent.pointerMove(window, { clientX: 40 });
+    fireEvent.pointerUp(window);
+
+    expect(column).toHaveStyle({ width: "200px" });
+  });
+
+  it("does not resize a column below zero width", () => {
+    render(
+      <MillerColumns.Root>
+        <MillerColumns.Column>
+          <MillerColumns.ResizeHandle />
+          <MillerColumns.Item value="a">A</MillerColumns.Item>
+        </MillerColumns.Column>
+      </MillerColumns.Root>,
+    );
+
+    const handle = screen.getByRole("separator");
+    const column = screen.getByRole("group");
+
+    fireEvent.pointerDown(handle, { clientX: 100 });
+    fireEvent.pointerMove(window, { clientX: -500 });
+
+    expect(column).toHaveStyle({ width: "0px" });
+  });
+
+  it("exposes a data-dragging hook while a drag is in progress", () => {
+    render(
+      <MillerColumns.Root>
+        <MillerColumns.Column>
+          <MillerColumns.ResizeHandle />
+          <MillerColumns.Item value="a">A</MillerColumns.Item>
+        </MillerColumns.Column>
+      </MillerColumns.Root>,
+    );
+
+    const handle = screen.getByRole("separator");
+
+    expect(handle).not.toHaveAttribute("data-dragging");
+
+    fireEvent.pointerDown(handle, { clientX: 0 });
+    expect(handle).toHaveAttribute("data-dragging");
+
+    fireEvent.pointerUp(window);
+    expect(handle).not.toHaveAttribute("data-dragging");
+  });
+
+  it("composes a consumer onPointerDown with the drag", () => {
+    const onPointerDown = vi.fn();
+
+    render(
+      <MillerColumns.Root>
+        <MillerColumns.Column>
+          <MillerColumns.ResizeHandle onPointerDown={onPointerDown} />
+          <MillerColumns.Item value="a">A</MillerColumns.Item>
+        </MillerColumns.Column>
+      </MillerColumns.Root>,
+    );
+
+    const handle = screen.getByRole("separator");
+    const column = screen.getByRole("group");
+
+    fireEvent.pointerDown(handle, { clientX: 100 });
+    fireEvent.pointerMove(window, { clientX: 200 });
+
+    expect(onPointerDown).toHaveBeenCalledTimes(1);
+    expect(column).toHaveStyle({ width: "100px" });
+  });
+});

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

@@ -0,0 +1,91 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { MillerColumns } from "../MillerColumns";
+
+function FlatList() {
+  return (
+    <MillerColumns.Root>
+      <MillerColumns.Column>
+        <MillerColumns.Item value="a">A</MillerColumns.Item>
+        <MillerColumns.Item value="b">B</MillerColumns.Item>
+        <MillerColumns.Item value="c">C</MillerColumns.Item>
+      </MillerColumns.Column>
+    </MillerColumns.Root>
+  );
+}
+
+function Tree({ defaultValue }: { defaultValue?: string[] }) {
+  return (
+    <MillerColumns.Root defaultValue={defaultValue}>
+      <MillerColumns.Column>
+        <MillerColumns.Item value="fruit">
+          Fruit
+          <MillerColumns.Column>
+            <MillerColumns.Item value="apple">Apple</MillerColumns.Item>
+          </MillerColumns.Column>
+        </MillerColumns.Item>
+      </MillerColumns.Column>
+    </MillerColumns.Root>
+  );
+}
+
+describe("MillerColumns — roving tabindex", () => {
+  it("exposes the first root item as the only tabstop initially", () => {
+    render(<FlatList />);
+
+    expect(screen.getByRole("treeitem", { name: "A" })).toHaveAttribute(
+      "tabindex",
+      "0",
+    );
+    expect(screen.getByRole("treeitem", { name: "B" })).toHaveAttribute(
+      "tabindex",
+      "-1",
+    );
+    expect(screen.getByRole("treeitem", { name: "C" })).toHaveAttribute(
+      "tabindex",
+      "-1",
+    );
+  });
+
+  it("moves the tabstop to whichever item is focused", async () => {
+    const user = userEvent.setup();
+
+    render(<FlatList />);
+    screen.getByRole("treeitem", { name: "A" }).focus();
+
+    await user.keyboard("{ArrowDown}");
+
+    expect(screen.getByRole("treeitem", { name: "B" })).toHaveAttribute(
+      "tabindex",
+      "0",
+    );
+    expect(screen.getByRole("treeitem", { name: "A" })).toHaveAttribute(
+      "tabindex",
+      "-1",
+    );
+  });
+
+  it("uses the deepest selected item as the default tabstop", () => {
+    render(<Tree defaultValue={["fruit", "apple"]} />);
+
+    expect(screen.getByRole("treeitem", { name: "Apple" })).toHaveAttribute(
+      "tabindex",
+      "0",
+    );
+    expect(screen.getByRole("treeitem", { name: "Fruit" })).toHaveAttribute(
+      "tabindex",
+      "-1",
+    );
+  });
+
+  it("lands Tab on the single tabstop", async () => {
+    const user = userEvent.setup();
+
+    render(<FlatList />);
+
+    await user.tab();
+
+    expect(screen.getByRole("treeitem", { name: "A" })).toHaveFocus();
+  });
+});