@primitiv-ui/react 0.1.29 → 0.1.31

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

@@ -67,6 +67,51 @@ describe("MillerColumns — aria", () => {
     );
   });
 
+  it("puts the tree role on an inner element, not the strip container", () => {
+    const { container } = render(<Tree />);
+
+    const strip = container.querySelector("[data-miller-columns-strip]");
+    const tree = screen.getByRole("tree");
+
+    expect(strip).not.toBe(tree);
+    expect(strip).toContainElement(tree);
+  });
+
+  it("keeps the preview panel outside the tree", () => {
+    render(
+      <MillerColumns.Root defaultValue={["a"]}>
+        <MillerColumns.Column>
+          <MillerColumns.Item value="a">A</MillerColumns.Item>
+        </MillerColumns.Column>
+        <MillerColumns.PreviewPanel data-testid="preview">
+          Preview
+        </MillerColumns.PreviewPanel>
+      </MillerColumns.Root>,
+    );
+
+    // A tree may only own treeitem and group; the panel is neither.
+    expect(screen.getByRole("tree")).not.toContainElement(
+      screen.getByTestId("preview"),
+    );
+  });
+
+  it("splits aria-* onto the tree widget and everything else onto the strip", () => {
+    const { container } = render(
+      <MillerColumns.Root aria-label="Files" className="strip" id="picker">
+        <MillerColumns.Column>
+          <MillerColumns.Item value="a">A</MillerColumns.Item>
+        </MillerColumns.Column>
+      </MillerColumns.Root>,
+    );
+
+    const strip = container.querySelector(".strip")!;
+
+    // The widget is what needs naming; the container is what needs styling.
+    expect(screen.getByRole("tree", { name: "Files" })).toBeInTheDocument();
+    expect(strip).not.toHaveAttribute("aria-label");
+    expect(strip).toHaveAttribute("id", "picker");
+  });
+
   it("keeps a treeitem's accessible name to its own cell content", async () => {
     const user = userEvent.setup();
 

package/src/MillerColumns/__tests__/MillerColumns.auto-scroll.test.tsx

@@ -32,9 +32,11 @@ describe("MillerColumns — auto-scroll", () => {
   it("scrolls the strip to reveal a newly opened column", async () => {
     const user = userEvent.setup();
 
-    render(<Tree />);
+    const { container } = render(<Tree />);
 
-    const strip = screen.getByRole("tree");
+    const strip = container.querySelector<HTMLElement>(
+      "[data-miller-columns-strip]",
+    )!;
     const scrollTo = vi.spyOn(strip, "scrollTo");
 
     await user.click(screen.getByRole("treeitem", { name: "Fruit" }));

package/src/MillerColumns/__tests__/MillerColumns.basic-rendering.test.tsx

@@ -3,8 +3,8 @@ import { render, screen } from "@testing-library/react";
 import { MillerColumns } from "../MillerColumns";
 
 describe("MillerColumns — basic rendering", () => {
-  it("renders the strip with role=tree and a horizontal orientation hook", () => {
-    render(
+  it("renders a strip container with a horizontal orientation hook", () => {
+    const { container } = render(
       <MillerColumns.Root>
         <MillerColumns.Column>
           <MillerColumns.Item value="a">A</MillerColumns.Item>
@@ -12,12 +12,27 @@ describe("MillerColumns — basic rendering", () => {
       </MillerColumns.Root>,
     );
 
-    const strip = screen.getByRole("tree");
+    const strip = container.querySelector("[data-miller-columns-strip]");
 
     expect(strip).toBeInTheDocument();
     expect(strip).toHaveAttribute("data-orientation", "horizontal");
   });
 
+  it("renders the tree widget inside the strip container", () => {
+    const { container } = render(
+      <MillerColumns.Root>
+        <MillerColumns.Column>
+          <MillerColumns.Item value="a">A</MillerColumns.Item>
+        </MillerColumns.Column>
+      </MillerColumns.Root>,
+    );
+
+    const tree = screen.getByRole("tree");
+
+    expect(tree).toHaveAttribute("data-miller-columns-tree");
+    expect(container.querySelector("[data-miller-columns-strip]")).toContainElement(tree);
+  });
+
   it("projects the top-level column into the strip as a group", () => {
     render(
       <MillerColumns.Root>

package/src/MillerColumns/__tests__/MillerColumns.data-attributes.test.tsx

@@ -33,6 +33,27 @@ describe("MillerColumns — data attributes", () => {
     expect(groups[1]).toHaveAttribute("data-depth", "1");
   });
 
+  it("flags a column with no items as empty", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <MillerColumns.Root>
+        <MillerColumns.Column>
+          <MillerColumns.Item value="empty-folder">
+            Empty folder
+            <MillerColumns.Column />
+          </MillerColumns.Item>
+        </MillerColumns.Column>
+      </MillerColumns.Root>,
+    );
+
+    await user.click(screen.getByRole("treeitem", { name: "Empty folder" }));
+
+    const [root, revealed] = screen.getAllByRole("group");
+    expect(root).not.toHaveAttribute("data-empty");
+    expect(revealed).toHaveAttribute("data-empty");
+  });
+
   it("reflects selection through data-state", async () => {
     const user = userEvent.setup();
 
@@ -46,6 +67,33 @@ describe("MillerColumns — data attributes", () => {
     expect(veg).toHaveAttribute("data-state", "selected");
   });
 
+  it("marks only the deepest selected item with data-terminal", async () => {
+    const user = userEvent.setup();
+
+    render(<Tree />);
+
+    const fruit = screen.getByRole("treeitem", { name: "Fruit" });
+
+    // Selected and deepest — it is the terminal selection.
+    await user.click(fruit);
+    expect(fruit).toHaveAttribute("data-terminal");
+
+    // Still selected, but now an ancestor of a deeper selection.
+    await user.click(screen.getByRole("treeitem", { name: "Apple" }));
+
+    expect(fruit).toHaveAttribute("data-state", "selected");
+    expect(fruit).not.toHaveAttribute("data-terminal");
+    expect(screen.getByRole("treeitem", { name: "Apple" })).toHaveAttribute(
+      "data-terminal",
+    );
+
+    // Unselected, but sitting at the same depth the terminal item once
+    // occupied — depth alone must not be what earns the attribute.
+    expect(
+      screen.getByRole("treeitem", { name: "Veg" }),
+    ).not.toHaveAttribute("data-terminal");
+  });
+
   it("flags branch items with data-has-children and omits it on leaves", () => {
     render(<Tree />);
 

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

@@ -1,6 +1,7 @@
 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";
 
@@ -16,9 +17,9 @@ function FlatList() {
   );
 }
 
-function Tree() {
+function Tree({ dir }: { dir?: "ltr" | "rtl" } = {}) {
   return (
-    <MillerColumns.Root>
+    <MillerColumns.Root dir={dir}>
       <MillerColumns.Column>
         <MillerColumns.Item value="fruit">
           Fruit
@@ -178,4 +179,36 @@ describe("MillerColumns — keyboard interaction", () => {
       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

@@ -0,0 +1,96 @@
+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,11 +1,12 @@
 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", () => {
-    render(
-      <MillerColumns.Root>
+    const { container } = render(
+      <MillerColumns.Root defaultValue={["a"]}>
         <MillerColumns.Column>
           <MillerColumns.Item value="a">A</MillerColumns.Item>
         </MillerColumns.Column>
@@ -13,7 +14,7 @@ describe("MillerColumns — preview panel", () => {
       </MillerColumns.Root>,
     );
 
-    const strip = screen.getByRole("tree");
+    const strip = container.querySelector("[data-miller-columns-strip]")!;
     const panel = screen.getByText("preview");
 
     expect(panel).toHaveAttribute("data-miller-columns-preview");
@@ -21,9 +22,33 @@ describe("MillerColumns — preview panel", () => {
     expect(strip.lastElementChild).toBe(panel);
   });
 
-  it("forwards props to the panel element", () => {
+  // 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>

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

@@ -0,0 +1,79 @@
+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();
+  });
+});

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

@@ -1,7 +1,27 @@
 import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import { MillerColumns } from "../MillerColumns";
 
+function Resizable({
+  dir,
+  ...handleProps
+}: {
+  dir?: "ltr" | "rtl";
+  minWidth?: number;
+  maxWidth?: number;
+  step?: number;
+}) {
+  return (
+    <MillerColumns.Root dir={dir}>
+      <MillerColumns.Column>
+        <MillerColumns.ResizeHandle aria-label="Resize" {...handleProps} />
+        <MillerColumns.Item value="a">A</MillerColumns.Item>
+      </MillerColumns.Column>
+    </MillerColumns.Root>
+  );
+}
+
 describe("MillerColumns — resize handle", () => {
   it("renders a vertical separator inside a column", () => {
     render(
@@ -19,6 +39,175 @@ describe("MillerColumns — resize handle", () => {
     expect(handle).toHaveAttribute("data-miller-columns-resize-handle");
   });
 
+  it("is a focusable splitter carrying its value range", () => {
+    render(
+      <MillerColumns.Root>
+        <MillerColumns.Column>
+          <MillerColumns.ResizeHandle
+            aria-label="Resize"
+            minWidth={120}
+            maxWidth={400}
+          />
+          <MillerColumns.Item value="a">A</MillerColumns.Item>
+        </MillerColumns.Column>
+      </MillerColumns.Root>,
+    );
+
+    const handle = screen.getByRole("separator", { name: "Resize" });
+
+    expect(handle).toHaveAttribute("tabindex", "0");
+    expect(handle).toHaveAttribute("aria-valuemin", "120");
+    expect(handle).toHaveAttribute("aria-valuemax", "400");
+    expect(handle).toHaveAttribute("aria-valuenow");
+  });
+
+  it("steps the column width with the arrow keys", async () => {
+    const user = userEvent.setup();
+
+    render(<Resizable minWidth={100} maxWidth={400} />);
+
+    const handle = screen.getByRole("separator");
+    const column = screen.getByRole("group");
+
+    // Seed a known width so stepping is measured from something.
+    fireEvent.pointerDown(handle, { clientX: 0 });
+    fireEvent.pointerMove(window, { clientX: 200 });
+    fireEvent.pointerUp(window);
+
+    handle.focus();
+    await user.keyboard("{ArrowRight}");
+    expect(column).toHaveStyle({ width: "210px" });
+
+    await user.keyboard("{ArrowLeft}{ArrowLeft}");
+    expect(column).toHaveStyle({ width: "190px" });
+  });
+
+  it("honours a custom step", async () => {
+    const user = userEvent.setup();
+
+    render(<Resizable minWidth={100} maxWidth={400} step={25} />);
+
+    const handle = screen.getByRole("separator");
+    const column = screen.getByRole("group");
+
+    fireEvent.pointerDown(handle, { clientX: 0 });
+    fireEvent.pointerMove(window, { clientX: 200 });
+    fireEvent.pointerUp(window);
+
+    handle.focus();
+    await user.keyboard("{ArrowRight}");
+
+    expect(column).toHaveStyle({ width: "225px" });
+  });
+
+  it("clamps stepping to the min and max width", async () => {
+    const user = userEvent.setup();
+
+    render(<Resizable minWidth={100} maxWidth={220} />);
+
+    const handle = screen.getByRole("separator");
+    const column = screen.getByRole("group");
+
+    fireEvent.pointerDown(handle, { clientX: 0 });
+    fireEvent.pointerMove(window, { clientX: 215 });
+    fireEvent.pointerUp(window);
+
+    handle.focus();
+    await user.keyboard("{ArrowRight}{ArrowRight}");
+
+    expect(column).toHaveStyle({ width: "220px" });
+    expect(handle).toHaveAttribute("aria-valuenow", "220");
+  });
+
+  it("jumps to the min and max width with Home and End", async () => {
+    const user = userEvent.setup();
+
+    render(<Resizable minWidth={100} maxWidth={400} />);
+
+    const handle = screen.getByRole("separator");
+    const column = screen.getByRole("group");
+
+    handle.focus();
+    await user.keyboard("{End}");
+    expect(column).toHaveStyle({ width: "400px" });
+
+    await user.keyboard("{Home}");
+    expect(column).toHaveStyle({ width: "100px" });
+  });
+
+  it("mirrors the stepping arrows under rtl", async () => {
+    const user = userEvent.setup();
+
+    render(<Resizable dir="rtl" minWidth={100} maxWidth={400} />);
+
+    const handle = screen.getByRole("separator");
+    const column = screen.getByRole("group");
+
+    fireEvent.pointerDown(handle, { clientX: 0 });
+    fireEvent.pointerMove(window, { clientX: 200 });
+    fireEvent.pointerUp(window);
+
+    handle.focus();
+    // The column grows leftwards in rtl, so ArrowLeft widens it.
+    await user.keyboard("{ArrowLeft}");
+
+    expect(column).toHaveStyle({ width: "210px" });
+  });
+
+  it("leaves the width alone for keys it does not handle", async () => {
+    const user = userEvent.setup();
+
+    render(<Resizable minWidth={100} maxWidth={400} />);
+
+    const handle = screen.getByRole("separator");
+    const column = screen.getByRole("group");
+
+    fireEvent.pointerDown(handle, { clientX: 0 });
+    fireEvent.pointerMove(window, { clientX: 200 });
+    fireEvent.pointerUp(window);
+
+    handle.focus();
+    await user.keyboard("{ArrowUp}{ArrowDown}a");
+
+    expect(column).toHaveStyle({ width: "200px" });
+  });
+
+  it("ignores End when no maxWidth bounds the column", async () => {
+    const user = userEvent.setup();
+
+    // Without a maxWidth there is no largest width to jump to, so End
+    // must not resize to Infinity.
+    render(<Resizable minWidth={100} />);
+
+    const handle = screen.getByRole("separator");
+    const column = screen.getByRole("group");
+
+    fireEvent.pointerDown(handle, { clientX: 0 });
+    fireEvent.pointerMove(window, { clientX: 200 });
+    fireEvent.pointerUp(window);
+
+    handle.focus();
+    await user.keyboard("{End}");
+
+    expect(handle).toHaveAttribute("aria-valuenow", "200");
+    expect(column).toHaveStyle({ width: "200px" });
+    expect(handle).not.toHaveAttribute("aria-valuemax");
+  });
+
+  it("clamps a pointer drag to the min and max width", () => {
+    render(<Resizable minWidth={120} maxWidth={260} />);
+
+    const handle = screen.getByRole("separator");
+    const column = screen.getByRole("group");
+
+    fireEvent.pointerDown(handle, { clientX: 0 });
+    fireEvent.pointerMove(window, { clientX: 1000 });
+    expect(column).toHaveStyle({ width: "260px" });
+
+    fireEvent.pointerMove(window, { clientX: -1000 });
+    expect(column).toHaveStyle({ width: "120px" });
+  });
+
   it("throws when ResizeHandle is rendered outside Column", () => {
     expect(() =>
       render(