@payglocal_ui/flux-ui 0.2.6 → 0.3.1

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

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/calendar-date-chip.tsx

@@ -0,0 +1,262 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "./button";
+import { Calendar } from "./calendar";
+import { FilterChip, FilterChipActions, useFilterChipState } from "./filter-chips";
+import type { FilterChipControl } from "./filter-chips";
+import { formatDateOnly, parseApiDate } from "./format-datetime";
+import { cn } from "./utils";
+
+export type DatePickMode = "single" | "range";
+
+/** What the calendar hands back while the user is picking. */
+export type CalendarRange = { from: Date | undefined; to?: Date | undefined };
+
+/**
+ * A named span offered above the calendar — "Today", "Last 30 Days".
+ *
+ * `resolve` runs when the preset is chosen, not when it is declared, so "last
+ * 7 days" is counted from the day the user picks it rather than from whenever
+ * the options array happened to be built.
+ */
+export interface CalendarDatePreset {
+  value: string;
+  label: string;
+  resolve: () => { from: string; to: string };
+}
+
+/**
+ * The applied value: a span, plus which preset produced it.
+ *
+ * `preset` is `""` when the dates were picked by hand, and `to` equals `from`
+ * for a single day — so a caller that only wants a window can read `from`/`to`
+ * and ignore the rest.
+ */
+export interface CalendarDateValue {
+  preset: string;
+  /** YYYY-MM-DD */
+  from: string;
+  /** YYYY-MM-DD */
+  to: string;
+}
+
+export interface CalendarDateFilterChipProps extends FilterChipControl {
+  chipKey?: string;
+  label?: string;
+  value?: CalendarDateValue;
+  onChange: (next: CalendarDateValue | undefined) => void;
+  /** Named spans above the calendar. Omit for a calendar-only chip. */
+  presets?: readonly CalendarDatePreset[];
+  /** Offer "Single date" alongside "Date range". Default true. */
+  allowSingle?: boolean;
+  /** Months shown side by side in range mode. Default 2. */
+  numberOfMonths?: number;
+  align?: "start" | "center" | "end";
+}
+
+const PICK_MODES: { value: DatePickMode; label: string }[] = [
+  { value: "single", label: "Single date" },
+  { value: "range", label: "Date range" },
+];
+
+const toKey = (d: Date): string => {
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${d.getFullYear()}-${month}-${day}`;
+};
+
+const fromKey = (key: string): Date | undefined => parseApiDate(key) ?? undefined;
+
+/**
+ * A date filter over a real calendar, with optional named spans.
+ *
+ * Distinct from {@link DateRangeFilterChip}, which is two typed date fields.
+ * This one is for a filter people reach for by *looking* — "the week of the
+ * 14th", "that Tuesday" — where a pair of text inputs makes you count days in
+ * your head. Both exist because both are right somewhere, and picking between
+ * them is a call about the filter, not about the toolbar.
+ *
+ * Five features in pg-dashboard-v2 had built this chip separately, each with
+ * its own preset list and its own value shape. They are the same control.
+ */
+export function CalendarDateFilterChip({
+  chipKey,
+  label = "Date",
+  value,
+  onChange,
+  presets,
+  allowSingle = true,
+  numberOfMonths = 2,
+  align = "start",
+  open,
+  onOpenChange,
+}: CalendarDateFilterChipProps) {
+  const key = chipKey ?? label;
+  const chip = useFilterChipState(key, { open, onOpenChange });
+
+  const [mode, setMode] = useState<DatePickMode>("single");
+  const [singleDate, setSingleDate] = useState<Date | undefined>(undefined);
+  const [range, setRange] = useState<CalendarRange | undefined>(undefined);
+  // A preset and a hand-picked span are the same filter reached two ways, so
+  // choosing one clears the other rather than leaving both staged.
+  const [presetDraft, setPresetDraft] = useState("");
+
+  const activePreset = presets?.find((p) => p.value === value?.preset);
+  const isActive = !!value?.from;
+
+  const chipLabel = !isActive
+    ? label
+    : activePreset
+      ? `${label}: ${activePreset.label}`
+      : value!.to && value!.to !== value!.from
+        ? `${label}: ${formatDateOnly(fromKey(value!.from)!)} – ${formatDateOnly(fromKey(value!.to)!)}`
+        : `${label}: ${formatDateOnly(fromKey(value!.from)!)}`;
+
+  /** Reseeds the working selection from what is applied, on every open. */
+  const reseed = () => {
+    setPresetDraft(value?.preset ?? "");
+    const from = value?.from ? fromKey(value.from) : undefined;
+    const to = value?.to ? fromKey(value.to) : undefined;
+    const isSpan = !!value?.to && value.to !== value.from;
+    setMode(isSpan || !allowSingle ? "range" : "single");
+    setSingleDate(isSpan ? undefined : from);
+    setRange(isSpan ? { from, to } : undefined);
+  };
+
+  const clear = () => {
+    onChange(undefined);
+    setPresetDraft("");
+    setSingleDate(undefined);
+    setRange(undefined);
+    setMode(allowSingle ? "single" : "range");
+  };
+
+  const apply = () => {
+    if (presetDraft) {
+      const chosen = presets?.find((p) => p.value === presetDraft);
+      if (chosen) {
+        const span = chosen.resolve();
+        onChange({ preset: chosen.value, ...span });
+      }
+    } else if (mode === "single" && singleDate) {
+      const k = toKey(singleDate);
+      onChange({ preset: "", from: k, to: k });
+    } else if (mode === "range" && range?.from) {
+      const to = range.to ?? range.from;
+      onChange({ preset: "", from: toKey(range.from), to: toKey(to) });
+    } else {
+      onChange(undefined);
+    }
+    chip.onOpenChange(false);
+  };
+
+  const hasDraft = !!presetDraft || !!singleDate || !!range?.from;
+
+  return (
+    <FilterChip
+      chipKey={key}
+      label={chipLabel}
+      active={isActive}
+      align={align}
+      open={chip.open}
+      onOpenChange={chip.onOpenChange}
+      onOpen={reseed}
+      onClear={clear}
+    >
+      <div className="w-auto p-3">
+        {presets?.length ? (
+          <div className="mb-3 flex flex-wrap gap-1.5">
+            {presets.map((p) => (
+              <Button
+                key={p.value}
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  const next = presetDraft === p.value ? "" : p.value;
+                  setPresetDraft(next);
+                  // Picking a named span drops whatever was on the calendar,
+                  // so the panel never shows two answers at once.
+                  if (next) {
+                    setSingleDate(undefined);
+                    setRange(undefined);
+                  }
+                }}
+                className={cn(
+                  "h-auto min-h-0 rounded-full border px-2.5 py-1 text-[11.5px] font-normal",
+                  presetDraft === p.value
+                    ? "border-primary bg-primary/10 font-medium text-primary"
+                    : "border-border text-muted-foreground hover:text-foreground"
+                )}
+              >
+                {p.label}
+              </Button>
+            ))}
+          </div>
+        ) : null}
+
+        {allowSingle ? (
+          <div className="mb-3 flex items-center gap-1 rounded-lg border border-border bg-muted/50 p-1">
+            {PICK_MODES.map((m) => (
+              <Button
+                key={m.value}
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => setMode(m.value)}
+                className={cn(
+                  "h-auto min-h-0 flex-1 whitespace-nowrap rounded-md px-2.5 py-1.5 text-xs font-medium",
+                  mode === m.value
+                    ? "bg-card text-foreground shadow-sm"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                {m.label}
+              </Button>
+            ))}
+          </div>
+        ) : null}
+
+        {/* `bg-transparent p-0`: Calendar paints `bg-background` on itself and
+            only drops it via a `[[data-slot=popover-content]_&]` selector that
+            PopoverContent never sets. Left alone it renders the page's
+            off-white as a solid block inside the white popover, with its own
+            `p-3` on top of the popover's — a greyed, inset panel that reads as
+            disabled. */}
+        {mode === "single" && allowSingle ? (
+          <Calendar
+            mode="single"
+            selected={singleDate}
+            onSelect={(d) => {
+              setSingleDate(d);
+              setPresetDraft("");
+            }}
+            className="bg-transparent p-0"
+          />
+        ) : (
+          <Calendar
+            mode="range"
+            selected={range}
+            onSelect={(r) => {
+              setRange(r);
+              setPresetDraft("");
+            }}
+            numberOfMonths={numberOfMonths}
+            className="bg-transparent p-0"
+          />
+        )}
+      </div>
+
+      <FilterChipActions
+        onClear={() => {
+          clear();
+          chip.onOpenChange(false);
+        }}
+        clearDisabled={!hasDraft && !isActive}
+        applyDisabled={!hasDraft}
+        onApply={apply}
+      />
+    </FilterChip>
+  );
+}