feat(ui): expand workflow-ready components

2026-03-20 18:11:48 +08:00
parent 36822f05e0
commit a8c1d3f256
27 changed files with 1562 additions and 85 deletions
@@ -239,4 +239,81 @@ describe("DataTable", () => {
    expect(onSortingChange).toHaveBeenCalledWith([{ desc: false, id: "lane" }]);
    expect(onSelectionChange).toHaveBeenCalledWith({ support: true });
  });
+
+  it("toggles hideable columns from the built-in view menu", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <DataTable
+        columns={[
+          {
+            accessor: "lane",
+            header: "Lane",
+            hideable: false,
+            id: "lane"
+          },
+          {
+            accessor: "owner",
+            header: "Owner",
+            hideable: true,
+            id: "owner"
+          }
+        ]}
+        rows={rows.slice(0, 2)}
+      />
+    );
+
+    expect(screen.getByRole("columnheader", { name: /owner/i })).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "View" }));
+    await user.click(screen.getByRole("menuitemcheckbox", { name: "Owner" }));
+
+    expect(screen.queryByRole("columnheader", { name: /owner/i })).not.toBeInTheDocument();
+    expect(screen.queryByText("Ava")).not.toBeInTheDocument();
+  });
+
+  it("switches density from the built-in view menu", async () => {
+    const user = userEvent.setup();
+
+    render(<DataTable columns={columns} rows={rows.slice(0, 2)} />);
+
+    const root = screen.getByRole("table").closest('[data-slot="root"]');
+    expect(root).toHaveAttribute("data-density", "comfortable");
+
+    await user.click(screen.getByRole("button", { name: "View" }));
+    await user.click(screen.getByRole("menuitemradio", { name: "Compact" }));
+
+    expect(root).toHaveAttribute("data-density", "compact");
+    expect(screen.getByRole("columnheader", { name: /lane/i })).toHaveAttribute(
+      "data-density",
+      "compact"
+    );
+  });
+
+  it("opens row details inside a sheet", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <DataTable
+        columns={columns}
+        renderRowDetails={(row) => <div>{row.note}</div>}
+        rowDetailsDescription={(row) => `${row.lane} handoff`}
+        rowDetailsTitle={(row) => `${row.lane} detail`}
+        rows={rows.slice(0, 2)}
+      />
+    );
+
+    await user.click(screen.getAllByRole("button", { name: "Open details" })[0]);
+
+    const detailHeading = await screen.findByText("Legal detail");
+    const sheet = detailHeading.closest('[data-slot="content"]');
+
+    expect(detailHeading).toBeInTheDocument();
+    expect(screen.getByText("Legal handoff")).toBeInTheDocument();
+    expect(
+      within(sheet as HTMLElement).getByText(
+        "Footnote needs one more pass before the customer note goes out."
+      )
+    ).toBeInTheDocument();
+  });
 });