@payglocal_ui/flux-ui 0.2.6 → 0.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@payglocal_ui/flux-ui",
-  "version": "0.2.6",
-  "description": "Flux UI primitives — inputs, fields, dialog, data table, charts, calendar, and more (Tailwind v4 + Radix).",
+  "version": "0.3.0",
+  "description": "Flux UI primitives \u2014 inputs, fields, dialog, data table, charts, calendar, and more (Tailwind v4 + Radix).",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -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",
@@ -65,14 +68,21 @@
     "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__/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__/filter-chips.test.tsx

@@ -0,0 +1,237 @@
+import { describe, expect, it, beforeAll } from "vitest";
+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
+import { useState } from "react";
+import {
+  DateRangeFilterChip,
+  FilterToolbar,
+  SelectFilterChip,
+  AddFilterMenu,
+  FilterChipGroup,
+  useFilterChipState,
+} from "../filter-chips";
+
+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;
+  }
+  // Radix measures the trigger to position the popover.
+  if (!(globalThis as any).ResizeObserver) {
+    (globalThis as any).ResizeObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
+  }
+});
+
+// The real toolbar has ~10 options per category, which crosses
+// SelectFilterChip's searchThreshold and renders a search box in the panel.
+const MANY = Array.from({ length: 10 }, (_, i) => ({
+  value: `v${i}`,
+  label: `Option ${i}`,
+}));
+
+/** Mirrors TxnFilters: search, Date chip, two category chips, an add menu. */
+function Toolbar() {
+  const [date, setDate] = useState({ from: "", to: "" });
+  const [type, setType] = useState<string[]>([]);
+  const [status, setStatus] = useState<string[]>([]);
+  return (
+    <FilterToolbar
+      search={<input aria-label="Search" />}
+      chips={
+        <>
+          <DateRangeFilterChip value={date} onChange={setDate} />
+          <SelectFilterChip label="Transaction Type" options={MANY} selected={type} onChange={setType} />
+          <SelectFilterChip label="Transaction Status" options={MANY} selected={status} onChange={setStatus} />
+          <AddFilterMenu filters={[{ key: "x", label: "Country", options: MANY }]} onAddFilter={() => {}} />
+        </>
+      }
+    />
+  );
+}
+
+function press(el: Element) {
+  fireEvent.pointerDown(el, { pointerType: "mouse", button: 0, bubbles: true });
+  fireEvent.mouseDown(el, { button: 0, bubbles: true });
+  fireEvent.pointerUp(el, { pointerType: "mouse", button: 0, bubbles: true });
+  fireEvent.mouseUp(el, { button: 0, bubbles: true });
+  fireEvent.click(el, { button: 0, bubbles: true });
+}
+
+const which = () =>
+  screen.queryAllByPlaceholderText(/^Search /).map((i) => i.getAttribute("placeholder"));
+
+describe("switching straight between two open chips", () => {
+  it("closes the first and leaves the second open", async () => {
+    render(<Toolbar />);
+
+    press(screen.getByRole("button", { name: /Transaction Type/ }));
+    await waitFor(() => expect(which()).toContain("Search transaction type"));
+    console.log("after opening Type   :", which());
+
+    press(screen.getByRole("button", { name: /Transaction Status/ }));
+    await new Promise((r) => setTimeout(r, 300));
+    console.log("after clicking Status:", which());
+
+    expect(which()).toEqual(["Search transaction status"]);
+  });
+});
+
+describe("the handoff", () => {
+  it("never has two chip popovers open at once", async () => {
+    render(<Toolbar />);
+
+    press(screen.getByRole("button", { name: /Transaction Type/ }));
+    await waitFor(() => expect(which()).toContain("Search transaction type"));
+
+    press(screen.getByRole("button", { name: /Transaction Status/ }));
+
+    // Sample across the handoff frame; at no point should both be mounted.
+    for (let i = 0; i < 20; i++) {
+      expect(which().length).toBeLessThanOrEqual(1);
+      await new Promise((r) => setTimeout(r, 20));
+    }
+    expect(which()).toEqual(["Search transaction status"]);
+  });
+
+  it("still closes on a second click of the same chip", async () => {
+    render(<Toolbar />);
+    const type = screen.getByRole("button", { name: /Transaction Type/ });
+
+    press(type);
+    await waitFor(() => expect(which().length).toBe(1));
+    press(type);
+    await waitFor(() => expect(which().length).toBe(0));
+  });
+});
+
+/**
+ * The regression this file exists for.
+ *
+ * Radix restores focus to a popover's trigger on close, skipping it only when
+ * the popover was dismissed by an *outside interaction*. A handoff is neither:
+ * the group closes the outgoing chip programmatically, so Radix restores focus
+ * to its trigger — which lands outside the chip now opening and makes Radix
+ * dismiss that one. The chip appears and vanishes.
+ */
+describe("handoff focus suppression", () => {
+  it("suppresses the outgoing chip's focus restore exactly once", async () => {
+    const seen: Array<{ key: string; prevented: boolean }> = [];
+
+    function Probe() {
+      const a = useFilterChipState("a");
+      const b = useFilterChipState("b");
+      return (
+        <>
+          <button onClick={() => a.onOpenChange(true)}>open a</button>
+          <button onClick={() => b.onOpenChange(true)}>open b</button>
+          <button
+            onClick={() => {
+              for (const [key, chip] of [
+                ["a", a],
+                ["b", b],
+              ] as const) {
+                const e = new Event("x", { cancelable: true });
+                chip.onCloseAutoFocus(e);
+                seen.push({ key, prevented: e.defaultPrevented });
+              }
+            }}
+          >
+            close-auto-focus
+          </button>
+        </>
+      );
+    }
+
+    render(
+      <FilterChipGroup>
+        <Probe />
+      </FilterChipGroup>
+    );
+
+    fireEvent.click(screen.getByText("open a"));
+    fireEvent.click(screen.getByText("open b")); // handoff: a -> b
+    fireEvent.click(screen.getByText("close-auto-focus"));
+
+    // Only the chip handed off from suppresses its focus restore.
+    expect(seen).toEqual([
+      { key: "a", prevented: true },
+      { key: "b", prevented: false },
+    ]);
+
+    // And only once — a later close must restore focus normally.
+    seen.length = 0;
+    fireEvent.click(screen.getByText("close-auto-focus"));
+    expect(seen).toEqual([
+      { key: "a", prevented: false },
+      { key: "b", prevented: false },
+    ]);
+  });
+});
+
+/**
+ * Both footer buttons commit and close. Clear used to reset only the draft and
+ * leave the panel open, so the chip still read "Type 1" while the list in front
+ * of you showed nothing ticked — and closing the panel kept the old filter.
+ */
+describe("the Apply / Clear footer", () => {
+  function ApplyClearToolbar() {
+    const [type, setType] = useState<string[]>([]);
+    return (
+      <FilterToolbar
+        chips={<SelectFilterChip label="Type" options={MANY} selected={type} onChange={setType} />}
+      />
+    );
+  }
+
+  const openTypeChip = async () => {
+    fireEvent.click(screen.getByRole("button", { name: /^Type/ }));
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeTruthy());
+  };
+
+  it("Apply commits the draft and closes", async () => {
+    render(<ApplyClearToolbar />);
+    await openTypeChip();
+    fireEvent.click(screen.getByText("Option 1"));
+    fireEvent.click(screen.getByRole("button", { name: "Apply" }));
+
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeFalsy());
+    expect(screen.getByRole("button", { name: /^Type/ }).textContent).toContain("1");
+  });
+
+  it("Clear drops the applied filter and closes", async () => {
+    render(<ApplyClearToolbar />);
+    await openTypeChip();
+    fireEvent.click(screen.getByText("Option 1"));
+    fireEvent.click(screen.getByRole("button", { name: "Apply" }));
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeFalsy());
+
+    await openTypeChip();
+    fireEvent.click(screen.getByRole("button", { name: "Clear" }));
+
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeFalsy());
+    expect(screen.getByRole("button", { name: /^Type/ }).textContent).not.toContain("1");
+  });
+
+  it("Clear stays live over an applied filter whose draft has been emptied", async () => {
+    render(<ApplyClearToolbar />);
+    await openTypeChip();
+    fireEvent.click(screen.getByText("Option 1"));
+    fireEvent.click(screen.getByRole("button", { name: "Apply" }));
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeFalsy());
+
+    await openTypeChip();
+    // Untick it again: the draft is empty but there is still a filter applied.
+    fireEvent.click(screen.getByText("Option 1"));
+    const clear = screen.getByRole("button", { name: "Clear" }) as HTMLButtonElement;
+    expect(clear.disabled).toBe(false);
+  });
+});