@payglocal_ui/flux-ui 0.3.0 → 0.3.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@payglocal_ui/flux-ui",
-  "version": "0.3.0",
-  "description": "Flux UI primitives \u2014 inputs, fields, dialog, data table, charts, calendar, and more (Tailwind v4 + Radix).",
+  "version": "0.3.1",
+  "description": "Flux UI primitives — inputs, fields, dialog, data table, charts, calendar, and more (Tailwind v4 + Radix).",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -63,6 +63,7 @@
     "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"

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__/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"));
+  });
+});

package/src/__tests__/picker-in-dialog.test.tsx

@@ -0,0 +1,140 @@
+import { describe, expect, it, beforeAll, vi } from "vitest";
+import { render, screen, waitFor, fireEvent, within } from "@testing-library/react";
+import { useState } from "react";
+import { Drawer, DrawerContent } from "../drawer";
+import { DatePicker } from "../date-picker";
+import { TimePicker } from "../time-picker";
+
+/**
+ * Both pickers portal their panel to `document.body`. A modal Radix Dialog sets
+ * `pointer-events: none` on `<body>` for as long as it is open, so a panel that
+ * does not re-enable pointer events for itself renders perfectly and answers no
+ * click — which is exactly how the MCA "Start a new batch" drawer's date and
+ * time fields failed.
+ */
+
+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() {}
+    };
+  }
+  // jsdom implements neither, and both pickers call them when opening.
+  Element.prototype.scrollIntoView = vi.fn();
+  Element.prototype.scrollTo = vi.fn();
+});
+
+function DateHarness({
+  onChange,
+  showTime = false,
+  initial = "2026-09-10",
+}: {
+  onChange: (v: string) => void;
+  showTime?: boolean;
+  initial?: string;
+}) {
+  const [value, setValue] = useState(initial);
+  return (
+    <Drawer open onOpenChange={() => {}} side="right">
+      <DrawerContent>
+        <DatePicker
+          value={value}
+          showTime={showTime}
+          onChange={(v) => {
+            setValue(v);
+            onChange(v);
+          }}
+        />
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+function TimeHarness({ onChange }: { onChange: (v: string) => void }) {
+  const [value, setValue] = useState("09:30");
+  return (
+    <Drawer open onOpenChange={() => {}} side="right">
+      <DrawerContent>
+        <TimePicker
+          value={value}
+          onValueChange={(v) => {
+            setValue(v);
+            onChange(v);
+          }}
+        />
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+describe("pickers inside a modal drawer", () => {
+  it("DatePicker selects a day while the drawer holds body pointer events", async () => {
+    const onChange = vi.fn();
+    render(<DateHarness onChange={onChange} />);
+
+    expect(document.body.style.pointerEvents).toBe("none");
+
+    fireEvent.click(screen.getByText("10 Sep 2026"));
+
+    const day = await screen.findByRole("button", { name: "17" });
+    // The panel must opt back into pointer events, or this click never lands
+    // on the day in a real browser.
+    const panel = day.closest("[style*='position: fixed']") as HTMLElement;
+    expect(panel.style.pointerEvents).toBe("auto");
+
+    fireEvent.click(day);
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith("2026-09-17"));
+  });
+
+  it("TimePicker selects an hour while the drawer holds body pointer events", async () => {
+    const onChange = vi.fn();
+    render(<TimeHarness onChange={onChange} />);
+
+    expect(document.body.style.pointerEvents).toBe("none");
+
+    fireEvent.click(screen.getByText("09:30 AM"));
+
+    const panel = (await screen.findByText("Hr")).closest(
+      "[style*='position: fixed']"
+    ) as HTMLElement;
+    expect(panel.style.pointerEvents).toBe("auto");
+
+    // "11" appears once per column pair; the hour column is the first.
+    const eleven = screen.getAllByText("11")[0];
+    fireEvent.click(eleven);
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith("11:30"));
+  });
+
+  it("DatePicker's time columns are clickable inside the drawer too", async () => {
+    const onChange = vi.fn();
+    render(
+      <DateHarness onChange={onChange} showTime initial="2026-09-10 14:30" />
+    );
+
+    expect(document.body.style.pointerEvents).toBe("none");
+
+    fireEvent.click(screen.getByText("10 Sep 2026, 02:30 PM"));
+
+    // The whole panel, time columns and footer included, opts back in.
+    const panel = (await screen.findByText("OK")).closest(
+      "[style*='position: fixed']"
+    ) as HTMLElement;
+    expect(panel.style.pointerEvents).toBe("auto");
+
+    const minutes = screen.getByText("Min").parentElement as HTMLElement;
+    fireEvent.click(within(minutes).getByRole("button", { name: "45" }));
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith("2026-09-10 14:45"));
+  });
+});

package/src/copyable-cell.tsx

@@ -133,9 +133,9 @@ export function CopyableCell({
     valueClassName
   );
 
-  /** Names the full value when the screen only shows part of it. */
+  /** True when the screen is only showing part of the value. */
   const elided = display !== undefined && display !== value;
-  const copyHint = copied ? "Copied" : elided ? `Copy ${value}` : `Copy ${label}`;
+  const copyHint = copied ? "Copied" : `Copy ${label}`;
 
   if (variant === "cell") {
     // The whole box copies, so there is no separate button to reach for — in a
@@ -187,35 +187,74 @@ export function CopyableCell({
     );
   }
 
+  /**
+   * The value as drawn. An elided value carries the whole thing in the tooltip
+   * below; `title` is only for the other case — a value `display` did not
+   * shorten can still be cut by the column's own `truncate`, and there is no
+   * React-side way to know that it was.
+   */
+  const valueNode = onClick ? (
+    // A bare <button>, deliberately, where the rest of flux would reach for
+    // `Button variant="link"`. That variant hard-codes `text-[15px]`, and
+    // the obvious override — `text-[inherit]` — does not beat it: Tailwind
+    // and tailwind-merge read `text-[<non-length>]` as a COLOUR, so the
+    // size class survives and the cell renders 2px larger than every other
+    // cell in the row. Preflight already gives a bare button `font: inherit`,
+    // so this simply inherits the cell's size at whatever density the table
+    // is using, which is what a cell should do.
+    <button
+      type="button"
+      onClick={onClick}
+      title={elided ? undefined : value}
+      // The elided text is not the name of this control — the value is.
+      aria-label={elided ? value : undefined}
+      className={cn(
+        "cursor-pointer bg-transparent p-0 text-left underline-offset-4",
+        "hover:underline focus-visible:underline focus-visible:outline-none",
+        text
+      )}
+    >
+      {display ?? value}
+    </button>
+  ) : (
+    <span
+      className={text}
+      title={elided ? undefined : value}
+      // Hidden from assistive tech only when there is an sr-only twin below
+      // carrying the whole value — otherwise the elided form would be read out
+      // as well as it, twice for one id.
+      aria-hidden={elided || undefined}
+    >
+      {display ?? value}
+    </span>
+  );
+
   return (
     <div className={cn("group/copy flex min-w-0 items-center gap-1", className)}>
-      {onClick ? (
-        // A bare <button>, deliberately, where the rest of flux would reach for
-        // `Button variant="link"`. That variant hard-codes `text-[15px]`, and
-        // the obvious override — `text-[inherit]` — does not beat it: Tailwind
-        // and tailwind-merge read `text-[<non-length>]` as a COLOUR, so the
-        // size class survives and the cell renders 2px larger than every other
-        // cell in the row. Preflight already gives a bare button `font: inherit`,
-        // so this simply inherits the cell's size at whatever density the table
-        // is using, which is what a cell should do.
-        <button
-          type="button"
-          onClick={onClick}
-          title={value}
-          className={cn(
-            "cursor-pointer bg-transparent p-0 text-left underline-offset-4",
-            "hover:underline focus-visible:underline focus-visible:outline-none",
-            text
-          )}
-        >
-          {display ?? value}
-        </button>
+      {/* The full value hangs off the **text**, which is the part that was
+          shortened and so the part a reader reaches for. It used to hang off
+          the copy button instead, which meant the way to read an id was to
+          hover the control that copies it. Only mounted when something was
+          actually elided: a tooltip repeating text already fully on screen is
+          noise. */}
+      {elided ? (
+        <TooltipProvider delayDuration={200}>
+          <Tooltip>
+            <TooltipTrigger asChild>{valueNode}</TooltipTrigger>
+            <TooltipContent side="top" className="text-xs">
+              {value}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       ) : (
-        <span className={text} title={value}>
-          {display ?? value}
-        </span>
+        valueNode
       )}
 
+      {/* Elided text reads as noise aloud, so the full value is what goes to a
+          screen reader. The interactive case names itself with `aria-label`
+          above and needs none of this. */}
+      {elided && !onClick && <span className="sr-only">{value}</span>}
+
       <TooltipProvider delayDuration={200}>
         <Tooltip>
           <TooltipTrigger asChild>