@primitiv-ui/react 0.1.38 → 0.1.40

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

@@ -1,214 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { DirectionProvider } from "../../DirectionProvider/index.ts";
-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({ dir }: { dir?: "ltr" | "rtl" } = {}) {
-  return (
-    <MillerColumns.Root dir={dir}>
-      <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();
-    });
-  });
-
-  describe("reading direction", () => {
-    it("swaps the horizontal arrow pair under rtl", async () => {
-      const user = userEvent.setup();
-
-      render(<Tree dir="rtl" />);
-      screen.getByRole("treeitem", { name: "Fruit" }).focus();
-
-      // The child column sits to the LEFT in rtl, so ArrowLeft steps in.
-      await user.keyboard("{ArrowLeft}");
-      expect(screen.getByRole("treeitem", { name: "Apple" })).toHaveFocus();
-
-      // ...and ArrowRight walks back out to the parent.
-      await user.keyboard("{ArrowRight}");
-      expect(screen.getByRole("treeitem", { name: "Fruit" })).toHaveFocus();
-    });
-
-    it("inherits the direction from a DirectionProvider", async () => {
-      const user = userEvent.setup();
-
-      render(
-        <DirectionProvider dir="rtl">
-          <Tree />
-        </DirectionProvider>,
-      );
-      screen.getByRole("treeitem", { name: "Fruit" }).focus();
-
-      await user.keyboard("{ArrowLeft}");
-
-      expect(screen.getByRole("treeitem", { name: "Apple" })).toHaveFocus();
-    });
-  });
-});

package/src/MillerColumns/__tests__/MillerColumns.keyboard-selection-state.test.tsx

@@ -1,96 +0,0 @@
-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="documents">
-          Documents
-          <MillerColumns.Column>
-            <MillerColumns.Item value="work">Work</MillerColumns.Item>
-          </MillerColumns.Column>
-        </MillerColumns.Item>
-        <MillerColumns.Item value="pictures">
-          Pictures
-          <MillerColumns.Column>
-            <MillerColumns.Item value="holiday">
-              Holiday
-              <MillerColumns.Column>
-                <MillerColumns.Item value="beach">beach.jpg</MillerColumns.Item>
-                <MillerColumns.Item value="sunset">sunset.jpg</MillerColumns.Item>
-              </MillerColumns.Column>
-            </MillerColumns.Item>
-          </MillerColumns.Column>
-        </MillerColumns.Item>
-      </MillerColumns.Column>
-    </MillerColumns.Root>
-  );
-}
-
-const state = (name: string) =>
-  screen.getByRole("treeitem", { name }).getAttribute("data-state");
-const terminal = (name: string) =>
-  screen.getByRole("treeitem", { name }).hasAttribute("data-terminal");
-
-describe("MillerColumns — selection state under keyboard navigation", () => {
-  it("deselects the previous branch when arrowing to a sibling and stepping in", async () => {
-    const user = userEvent.setup();
-
-    render(<Tree />);
-
-    await user.click(screen.getByRole("treeitem", { name: "Documents" }));
-    expect(state("Documents")).toBe("selected");
-
-    // Down to Pictures, then right to open it — Documents must let go.
-    await user.keyboard("{ArrowDown}{ArrowRight}");
-
-    expect(state("Pictures")).toBe("selected");
-    expect(state("Documents")).toBe("unselected");
-  });
-
-  it("keeps exactly one terminal item as focus moves deeper", async () => {
-    const user = userEvent.setup();
-
-    render(<Tree />);
-
-    await user.click(screen.getByRole("treeitem", { name: "Pictures" }));
-    await user.click(screen.getByRole("treeitem", { name: "Holiday" }));
-
-    expect(state("Pictures")).toBe("selected");
-    expect(terminal("Pictures")).toBe(false);
-    expect(terminal("Holiday")).toBe(true);
-
-    // Arrowing within the revealed column moves focus only — it must not
-    // change which row is terminal.
-    await user.keyboard("{ArrowRight}{ArrowDown}");
-
-    expect(screen.getByRole("treeitem", { name: "sunset.jpg" })).toHaveFocus();
-    expect(terminal("Holiday")).toBe(true);
-    expect(terminal("sunset.jpg")).toBe(false);
-    expect(state("Documents")).toBe("unselected");
-  });
-});
-
-describe("MillerColumns — a selected leaf deep in the path", () => {
-  it("marks the leaf terminal and its ancestors selected", async () => {
-    const user = userEvent.setup();
-
-    render(<Tree />);
-
-    await user.click(screen.getByRole("treeitem", { name: "Pictures" }));
-    await user.click(screen.getByRole("treeitem", { name: "Holiday" }));
-    await user.click(screen.getByRole("treeitem", { name: "beach.jpg" }));
-
-    expect(state("Pictures")).toBe("selected");
-    expect(terminal("Pictures")).toBe(false);
-    expect(state("Holiday")).toBe("selected");
-    expect(terminal("Holiday")).toBe(false);
-
-    // The row the user actually landed on.
-    expect(state("beach.jpg")).toBe("selected");
-    expect(terminal("beach.jpg")).toBe(true);
-  });
-});

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

@@ -1,72 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { MillerColumns } from "../MillerColumns";
-
-describe("MillerColumns — preview panel", () => {
-  it("renders a panel at the trailing edge of the strip", () => {
-    const { container } = render(
-      <MillerColumns.Root defaultValue={["a"]}>
-        <MillerColumns.Column>
-          <MillerColumns.Item value="a">A</MillerColumns.Item>
-        </MillerColumns.Column>
-        <MillerColumns.PreviewPanel>preview</MillerColumns.PreviewPanel>
-      </MillerColumns.Root>,
-    );
-
-    const strip = container.querySelector("[data-miller-columns-strip]")!;
-    const panel = screen.getByText("preview");
-
-    expect(panel).toHaveAttribute("data-miller-columns-preview");
-    expect(strip).toContainElement(panel);
-    expect(strip.lastElementChild).toBe(panel);
-  });
-
-  // Only reachable under forceMount: without it the panel does not exist while
-  // nothing is selected, so there is nothing to flag.
-  it("flags a force-mounted panel as empty until something is selected", async () => {
-    const user = userEvent.setup();
-
-    render(
-      <MillerColumns.Root>
-        <MillerColumns.Column>
-          <MillerColumns.Item value="a">A</MillerColumns.Item>
-        </MillerColumns.Column>
-        <MillerColumns.PreviewPanel forceMount>
-          preview
-        </MillerColumns.PreviewPanel>
-      </MillerColumns.Root>,
-    );
-
-    const panel = screen.getByText("preview");
-    expect(panel).toHaveAttribute("data-empty");
-
-    await user.click(screen.getByRole("treeitem", { name: "A" }));
-
-    expect(panel).not.toHaveAttribute("data-empty");
-  });
-
-  it("forwards props to the panel element", () => {
-    render(
-      <MillerColumns.Root defaultValue={["a"]}>
-        <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.preview-visibility.test.tsx

@@ -1,79 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { MillerColumns } from "../MillerColumns";
-
-function Tree({ forceMount }: { forceMount?: boolean } = {}) {
-  return (
-    <MillerColumns.Root>
-      <MillerColumns.Column>
-        <MillerColumns.Item value="fruit">
-          Fruit
-          <MillerColumns.Column>
-            <MillerColumns.Item value="apple">Apple</MillerColumns.Item>
-          </MillerColumns.Column>
-        </MillerColumns.Item>
-        <MillerColumns.Item value="veg">Veg</MillerColumns.Item>
-      </MillerColumns.Column>
-      <MillerColumns.PreviewPanel forceMount={forceMount}>
-        preview
-      </MillerColumns.PreviewPanel>
-    </MillerColumns.Root>
-  );
-}
-
-/**
- * Finder's rule: the preview occupies the slot *after* the selected item, so it
- * exists only when that item has no children of its own. Select a folder and
- * you get its contents there instead; select nothing and there is no preview
- * at all.
- */
-describe("MillerColumns — preview panel visibility", () => {
-  it("renders no preview until something is selected", () => {
-    render(<Tree />);
-
-    expect(screen.queryByText("preview")).not.toBeInTheDocument();
-  });
-
-  it("renders no preview while a branch is selected", async () => {
-    const user = userEvent.setup();
-
-    render(<Tree />);
-    await user.click(screen.getByRole("treeitem", { name: "Fruit" }));
-
-    // The slot after Fruit belongs to its children, not to a preview.
-    expect(screen.getByRole("treeitem", { name: "Apple" })).toBeInTheDocument();
-    expect(screen.queryByText("preview")).not.toBeInTheDocument();
-  });
-
-  it("renders the preview once a leaf is selected", async () => {
-    const user = userEvent.setup();
-
-    render(<Tree />);
-    await user.click(screen.getByRole("treeitem", { name: "Veg" }));
-
-    expect(screen.getByText("preview")).toBeInTheDocument();
-  });
-
-  it("renders the preview for a leaf nested inside a branch", async () => {
-    const user = userEvent.setup();
-
-    render(<Tree />);
-    await user.click(screen.getByRole("treeitem", { name: "Fruit" }));
-    await user.click(screen.getByRole("treeitem", { name: "Apple" }));
-
-    expect(screen.getByText("preview")).toBeInTheDocument();
-  });
-
-  it("keeps the panel mounted throughout when forceMount is set", async () => {
-    const user = userEvent.setup();
-
-    render(<Tree forceMount />);
-
-    expect(screen.getByText("preview")).toBeInTheDocument();
-
-    await user.click(screen.getByRole("treeitem", { name: "Fruit" }));
-
-    expect(screen.getByText("preview")).toBeInTheDocument();
-  });
-});