@payglocal_ui/flux-ui 0.2.6 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payglocal_ui/flux-ui",
-  "version": "0.2.6",
+  "version": "0.3.1",
   "description": "Flux UI primitives — inputs, fields, dialog, data table, charts, calendar, and more (Tailwind v4 + Radix).",
   "license": "MIT",
   "type": "module",
@@ -37,6 +37,9 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-accordion": "^1.2.13",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-checkbox": "^1.3.4",
@@ -60,19 +63,27 @@
     "lucide-react": "^0.577.0",
     "next-themes": "^0.4.6",
     "react-day-picker": "^9.14.0",
+    "react-remove-scroll": "^2.7.2",
     "recharts": "^3.8.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^6.1.1",
     "esbuild": "^0.28.1",
+    "jsdom": "^29.1.1",
     "tsup": "^8.5.1",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vitest": "^5.0.1"
   },
   "scripts": {
     "build": "tsup",
-    "check-types": "tsc --noEmit"
+    "check-types": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
 }

package/src/__tests__/copyable-cell-tooltip.test.tsx

@@ -0,0 +1,81 @@
+import { describe, expect, it, beforeAll, vi } from "vitest";
+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
+import { CopyableCell } from "../copyable-cell";
+
+/**
+ * The full value belongs to the text that was shortened, not to the copy
+ * button. Reading an id used to mean hovering the control that copies it.
+ */
+
+const FULL = "286234f3-6b18-4445-ba1f-0c814f154b0e";
+const SHORT = "286234f3-6b1…4f154b0e";
+
+beforeAll(() => {
+  if (!(globalThis as any).PointerEvent) {
+    class PE extends MouseEvent {
+      pointerType: string;
+      constructor(type: string, props: any = {}) {
+        super(type, props);
+        this.pointerType = props.pointerType ?? "mouse";
+      }
+    }
+    (globalThis as any).PointerEvent = PE;
+  }
+  if (!(globalThis as any).ResizeObserver) {
+    (globalThis as any).ResizeObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
+  }
+  if (!(globalThis as any).DOMRect) {
+    (globalThis as any).DOMRect = class {
+      constructor(public x = 0, public y = 0, public width = 0, public height = 0) {}
+    };
+  }
+});
+
+describe("CopyableCell tooltips", () => {
+  it("shows the whole value from the elided text, not from the copy button", async () => {
+    render(<CopyableCell value={FULL} display={SHORT} label="Payout ID" />);
+
+    // The copy button says what it does, and no longer carries the value.
+    const button = screen.getByRole("button", { name: "Copy Payout ID" });
+    fireEvent.pointerEnter(button);
+    fireEvent.focus(button);
+    await waitFor(() => expect(screen.getAllByText("Copy Payout ID").length).toBeGreaterThan(0));
+    expect(screen.queryByText(`Copy ${FULL}`)).toBeNull();
+
+    // Hovering the text is what reveals the id.
+    fireEvent.pointerEnter(screen.getByText(SHORT));
+    await waitFor(() => expect(screen.getAllByText(FULL).length).toBeGreaterThan(0));
+  });
+
+  it("does not add a tooltip when nothing was elided", async () => {
+    render(<CopyableCell value="SHORTID" label="Batch" />);
+
+    const text = screen.getByText("SHORTID");
+    // The native title still covers a value the column's own truncate may cut.
+    expect(text.getAttribute("title")).toBe("SHORTID");
+    expect(text.getAttribute("aria-hidden")).toBeNull();
+  });
+
+  it("gives a screen reader the whole value, once", () => {
+    const { container } = render(<CopyableCell value={FULL} display={SHORT} />);
+
+    // The elided form is decorative; the sr-only twin is what gets read.
+    expect(screen.getByText(SHORT).getAttribute("aria-hidden")).toBe("true");
+    expect(container.querySelector(".sr-only")?.textContent).toBe(FULL);
+  });
+
+  it("names a clickable value with the full id instead of the elided one", () => {
+    const onClick = vi.fn();
+    render(<CopyableCell value={FULL} display={SHORT} onClick={onClick} />);
+
+    const link = screen.getByRole("button", { name: FULL });
+    fireEvent.click(link);
+    expect(onClick).toHaveBeenCalled();
+    // No second copy of the value for a control that already names itself.
+    expect(link.parentElement?.querySelector(".sr-only")).toBeNull();
+  });
+});

package/src/__tests__/data-card-list.test.tsx

@@ -0,0 +1,74 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { DataCardList } from "../data-card-list";
+
+const rows = Array.from({ length: 25 }, (_, i) => ({ id: `r${i}`, name: `Row ${i}` }));
+const card = (r: { name: string }) => <span>{r.name}</span>;
+
+describe("DataCardList", () => {
+  it("slices locally in client mode and pages through", () => {
+    render(
+      <DataCardList
+        rows={rows}
+        rowKey={(r) => r.id}
+        renderCard={card}
+        pagination={{ mode: "client", pageSize: 10 }}
+      />
+    );
+    expect(screen.getAllByText(/^Row /).length).toBe(10);
+    expect(screen.getByText(/Page 1 of 3/)).toBeTruthy();
+  });
+
+  it("does NOT slice in page mode — the caller sent this page", () => {
+    const onPageChange = vi.fn();
+    render(
+      <DataCardList
+        rows={rows.slice(0, 10)}
+        rowKey={(r) => r.id}
+        renderCard={card}
+        pagination={{ mode: "page", page: 2, pageSize: 10, total: 25, onPageChange }}
+      />
+    );
+    expect(screen.getAllByText(/^Row /).length).toBe(10);
+    expect(screen.getByText(/Page 2 of 3/)).toBeTruthy();
+    fireEvent.click(screen.getByText("Next"));
+    expect(onPageChange).toHaveBeenCalledWith(3);
+  });
+
+  it("shows no total in cursor mode, and hides Next at the end", () => {
+    const onNext = vi.fn();
+    const { rerender } = render(
+      <DataCardList
+        rows={rows.slice(0, 5)}
+        rowKey={(r) => r.id}
+        renderCard={card}
+        pagination={{ mode: "cursor", page: 2, pageSize: 5, hasNext: true, onNext, onPrev: () => {} }}
+      />
+    );
+    expect(screen.getByText("Page 2")).toBeTruthy();
+    expect(screen.queryByText(/of/)).toBeNull();
+    fireEvent.click(screen.getByText("Next"));
+    expect(onNext).toHaveBeenCalled();
+
+    rerender(
+      <DataCardList
+        rows={rows.slice(0, 5)}
+        rowKey={(r) => r.id}
+        renderCard={card}
+        pagination={{ mode: "cursor", page: 2, pageSize: 5, hasNext: false, onNext, onPrev: () => {} }}
+      />
+    );
+    expect(screen.getByText("Next").closest("button")?.disabled).toBe(true);
+  });
+
+  it("shows skeletons while loading and an empty state with no rows", () => {
+    const { rerender, container } = render(
+      <DataCardList rows={[]} rowKey={(r: any) => r.id} renderCard={card} isLoading skeletonCount={4} />
+    );
+    // Four skeleton cards, each built from several Shimmer elements.
+    expect(container.querySelectorAll(".shimmer").length).toBeGreaterThanOrEqual(4);
+
+    rerender(<DataCardList rows={[]} rowKey={(r: any) => r.id} renderCard={card} emptyTitle="Nothing here" />);
+    expect(screen.getByText("Nothing here")).toBeTruthy();
+  });
+});

package/src/__tests__/data-table-row-click.test.tsx

@@ -0,0 +1,113 @@
+import { describe, expect, it, beforeAll, vi } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { DataTable } from "../data-table";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+
+beforeAll(() => {
+  if (!(globalThis as any).PointerEvent) {
+    class PE extends MouseEvent {
+      pointerType: string;
+      constructor(type: string, props: any = {}) {
+        super(type, props);
+        this.pointerType = props.pointerType ?? "mouse";
+      }
+    }
+    (globalThis as any).PointerEvent = PE;
+  }
+  if (!(globalThis as any).ResizeObserver) {
+    (globalThis as any).ResizeObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
+  }
+});
+
+type Row = { id: string; name: string };
+const ROWS: Row[] = [{ id: "a", name: "Widget" }];
+const COLUMNS = [{ key: "name", header: "Name", render: (r: Row) => <span>{r.name}</span> }];
+
+/** Mirrors SkuRowActions: a portalled popover menu in the row-action slot. */
+function RowMenu({ onEdit }: { onEdit: () => void }) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button type="button" aria-label="Actions">
+          ...
+        </button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <button type="button" onClick={onEdit}>
+          Edit item
+        </button>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+describe("onRowClick", () => {
+  it("does not fire when a portalled row menu item is chosen", async () => {
+    const onRowClick = vi.fn();
+    const onEdit = vi.fn();
+    render(
+      <DataTable<Row>
+        columns={COLUMNS}
+        data={ROWS}
+        rowKey={(r) => r.id}
+        onRowClick={onRowClick}
+        rowAction={() => <RowMenu onEdit={onEdit} />}
+      />
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Actions" }));
+    await waitFor(() => expect(screen.queryByText("Edit item")).toBeTruthy());
+    fireEvent.click(screen.getByText("Edit item"));
+
+    expect(onEdit).toHaveBeenCalledTimes(1);
+    // The menu is portalled to document.body, so React routes its click through
+    // the row. Before the fix this opened the row's own view as well.
+    expect(onRowClick).not.toHaveBeenCalled();
+  });
+
+  it("still fires for a click on the row body", () => {
+    const onRowClick = vi.fn();
+    render(
+      <DataTable<Row>
+        columns={COLUMNS}
+        data={ROWS}
+        rowKey={(r) => r.id}
+        onRowClick={onRowClick}
+      />
+    );
+
+    fireEvent.click(screen.getByText("Widget"));
+    expect(onRowClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not fire for a control inside a cell", () => {
+    const onRowClick = vi.fn();
+    const onInner = vi.fn();
+    render(
+      <DataTable<Row>
+        columns={[
+          {
+            key: "name",
+            header: "Name",
+            render: (r: Row) => (
+              <button type="button" onClick={onInner}>
+                {r.name}
+              </button>
+            ),
+          },
+        ]}
+        data={ROWS}
+        rowKey={(r) => r.id}
+        onRowClick={onRowClick}
+      />
+    );
+
+    fireEvent.click(screen.getByText("Widget"));
+    expect(onInner).toHaveBeenCalledTimes(1);
+    expect(onRowClick).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/date-picker-show-time.test.tsx

@@ -0,0 +1,189 @@
+import { describe, expect, it, beforeAll, vi } from "vitest";
+import { render, screen, waitFor, fireEvent, within } from "@testing-library/react";
+import { useState } from "react";
+import { DatePicker } from "../date-picker";
+
+/**
+ * `showTime` follows antd: time columns beside the calendar, a Now/OK footer,
+ * and a day click that no longer closes the panel because the day is only half
+ * the answer.
+ */
+
+beforeAll(() => {
+  Element.prototype.scrollIntoView = vi.fn();
+  Element.prototype.scrollTo = vi.fn();
+});
+
+function Harness({
+  initial,
+  showTime,
+  onChange,
+}: {
+  initial: string;
+  showTime?: boolean | Record<string, unknown>;
+  onChange?: (v: string) => void;
+}) {
+  const [value, setValue] = useState(initial);
+  return (
+    <DatePicker
+      value={value}
+      showTime={showTime as never}
+      onChange={(v) => {
+        setValue(v);
+        onChange?.(v);
+      }}
+    />
+  );
+}
+
+/** The scrollable list under a column heading. */
+function column(label: string) {
+  return screen.getByText(label).parentElement as HTMLElement;
+}
+
+/**
+ * A day cell in the calendar grid. Scoped by shape rather than by text, because
+ * with the time columns up a label like "17" is also a minute.
+ */
+function day(n: number) {
+  const cell = screen
+    .getAllByRole("button", { name: String(n) })
+    .find((b) => b.className.includes("rounded-full"));
+  if (!cell) throw new Error(`no day cell ${n}`);
+  return cell;
+}
+
+describe("DatePicker showTime", () => {
+  it("leaves the date-only picker untouched", async () => {
+    const onChange = vi.fn();
+    render(<Harness initial="2026-09-10" onChange={onChange} />);
+
+    fireEvent.click(screen.getByText("10 Sep 2026"));
+    await screen.findByText("Su");
+    fireEvent.click(day(17));
+
+    // Date-only value, and the panel closes on the day click as it always did.
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith("2026-09-17"));
+    expect(screen.queryByText("OK")).toBeNull();
+    await waitFor(() => expect(screen.queryByText("Hr")).toBeNull());
+  });
+
+  it("widens the value to date and time, and keeps the panel open on a day click", async () => {
+    const onChange = vi.fn();
+    render(<Harness initial="2026-09-10 14:30" showTime onChange={onChange} />);
+
+    // Trigger reads back in 12-hour, like every other flux timestamp.
+    fireEvent.click(screen.getByText("10 Sep 2026, 02:30 PM"));
+
+    await screen.findByText("Hr");
+    fireEvent.click(day(17));
+
+    // Time carried across, and the panel is still up so a time can be picked.
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith("2026-09-17 14:30"));
+    expect(screen.getByText("OK")).toBeTruthy();
+  });
+
+  it("edits hour, minute and meridiem independently", async () => {
+    const onChange = vi.fn();
+    render(<Harness initial="2026-09-10 14:30" showTime onChange={onChange} />);
+    fireEvent.click(screen.getByText("10 Sep 2026, 02:30 PM"));
+    await screen.findByText("Hr");
+
+    // 09 in the 12-hour column, still PM.
+    fireEvent.click(within(column("Hr")).getByRole("button", { name: "09" }));
+    await waitFor(() => expect(onChange).toHaveBeenLastCalledWith("2026-09-10 21:30"));
+
+    fireEvent.click(within(column("Min")).getByRole("button", { name: "45" }));
+    await waitFor(() => expect(onChange).toHaveBeenLastCalledWith("2026-09-10 21:45"));
+
+    fireEvent.click(within(column("AM/PM")).getByRole("button", { name: "AM" }));
+    await waitFor(() => expect(onChange).toHaveBeenLastCalledWith("2026-09-10 09:45"));
+  });
+
+  it("orders the 12-hour column 12 first, so midnight is the first AM hour", async () => {
+    render(<Harness initial="2026-09-10 14:30" showTime />);
+    fireEvent.click(screen.getByText("10 Sep 2026, 02:30 PM"));
+    await screen.findByText("Hr");
+
+    const labels = within(column("Hr"))
+      .getAllByRole("button")
+      .map((b) => b.textContent);
+    expect(labels.slice(0, 3)).toEqual(["12", "01", "02"]);
+    expect(labels).toHaveLength(12);
+
+    // 12 AM is midnight, not noon.
+    fireEvent.click(within(column("Hr")).getByRole("button", { name: "12" }));
+    fireEvent.click(within(column("AM/PM")).getByRole("button", { name: "AM" }));
+    await waitFor(() =>
+      expect(screen.getByText("10 Sep 2026, 12:30 AM")).toBeTruthy()
+    );
+  });
+
+  it("OK closes the panel and Now fills in the current instant", async () => {
+    const onChange = vi.fn();
+    render(<Harness initial="2026-09-10 14:30" showTime onChange={onChange} />);
+    fireEvent.click(screen.getByText("10 Sep 2026, 02:30 PM"));
+
+    fireEvent.click(await screen.findByText("OK"));
+    await waitFor(() => expect(screen.queryByText("Hr")).toBeNull());
+
+    fireEvent.click(screen.getByText("10 Sep 2026, 02:30 PM"));
+    fireEvent.click(await screen.findByText("Now"));
+
+    await waitFor(() => expect(onChange).toHaveBeenCalled());
+    const emitted = onChange.mock.calls.at(-1)![0] as string;
+    expect(emitted).toMatch(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/);
+    // Now also dismisses, since it answers both halves at once.
+    await waitFor(() => expect(screen.queryByText("Hr")).toBeNull());
+  });
+
+  it("honours showSecond and the step options", async () => {
+    const onChange = vi.fn();
+    render(
+      <Harness
+        initial="2026-09-10 14:30:00"
+        showTime={{ showSecond: true, minuteStep: 15, use12Hours: false }}
+        onChange={onChange}
+      />
+    );
+    fireEvent.click(screen.getByText("10 Sep 2026, 02:30:00 PM"));
+    await screen.findByText("Sec");
+
+    // 24-hour column, so no meridiem beside it.
+    expect(screen.queryByText("AM/PM")).toBeNull();
+    expect(within(column("Hr")).getAllByRole("button")).toHaveLength(24);
+    expect(
+      within(column("Min")).getAllByRole("button").map((b) => b.textContent)
+    ).toEqual(["00", "15", "30", "45"]);
+
+    fireEvent.click(within(column("Sec")).getByRole("button", { name: "20" }));
+    await waitFor(() => expect(onChange).toHaveBeenLastCalledWith("2026-09-10 14:30:20"));
+  });
+
+  it("stamps today's date when a time is picked before a day", async () => {
+    const onChange = vi.fn();
+    render(<Harness initial="" showTime onChange={onChange} />);
+
+    fireEvent.click(screen.getByText("Select date"));
+    await screen.findByText("Hr");
+
+    fireEvent.click(within(column("Min")).getByRole("button", { name: "45" }));
+
+    const now = new Date();
+    const expected = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(
+      now.getDate()
+    ).padStart(2, "0")} 00:45`;
+    await waitFor(() => expect(onChange).toHaveBeenLastCalledWith(expected));
+  });
+
+  it("reads a date-only value written before showTime was turned on", async () => {
+    const onChange = vi.fn();
+    render(<Harness initial="2026-09-10" showTime onChange={onChange} />);
+
+    // Parsed as midnight rather than dropped.
+    fireEvent.click(screen.getByText("10 Sep 2026, 12:00 AM"));
+    await screen.findByText("Hr");
+    fireEvent.click(day(17));
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith("2026-09-17 00:00"));
+  });
+});