@payglocal_ui/flux-ui 0.3.2 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payglocal_ui/flux-ui",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Flux UI primitives — inputs, fields, dialog, data table, charts, calendar, and more (Tailwind v4 + Radix).",
   "license": "MIT",
   "type": "module",

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

@@ -138,3 +138,40 @@ describe("pickers inside a modal drawer", () => {
     await waitFor(() => expect(onChange).toHaveBeenCalledWith("2026-09-10 14:45"));
   });
 });
+
+/**
+ * The other half of the same problem. Pointer events are what stopped clicks;
+ * the scroll lock is what stopped the wheel — the drawer's lock cancels
+ * wheel events for anything portalled outside it, which is every picker panel.
+ * A panel opened under a lock takes over with one of its own, and only the
+ * topmost lock acts, so its scrollable regions work again.
+ */
+describe("pickers take over the scroll lock inside a drawer", () => {
+  it("DatePicker's panel pushes its own lock", async () => {
+    render(<DateHarness onChange={() => {}} />);
+    expect(document.body.getAttribute("data-scroll-locked")).toBe("1");
+
+    fireEvent.click(screen.getByText("10 Sep 2026"));
+
+    const day = await screen.findByRole("button", { name: "17" });
+    expect(day.closest("[data-scroll-lock-takeover]")).not.toBeNull();
+  });
+
+  it("TimePicker's panel pushes its own lock", async () => {
+    render(<TimeHarness onChange={() => {}} />);
+    expect(document.body.getAttribute("data-scroll-locked")).toBe("1");
+
+    fireEvent.click(screen.getByText("09:30 AM"));
+
+    const hours = await screen.findByText("Hr");
+    expect(hours.closest("[data-scroll-lock-takeover]")).not.toBeNull();
+  });
+
+  it("does not wrap the panel when there is no lock to take over", async () => {
+    render(<DatePicker value="2026-09-10" onChange={() => {}} />);
+    fireEvent.click(screen.getByText("10 Sep 2026"));
+
+    const day = await screen.findByRole("button", { name: "17" });
+    expect(day.closest("[data-scroll-lock-takeover]")).toBeNull();
+  });
+});

package/src/__tests__/select-search.test.tsx

@@ -0,0 +1,223 @@
+import { describe, expect, it, beforeAll } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { useState } from "react";
+import { Dialog, DialogContent } from "../dialog";
+import { SingleSelect } from "../single-select";
+import { CheckboxSelect } from "../checkbox-select";
+import { defaultOptionFilter } from "../option-filter";
+
+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() {}
+    };
+  }
+});
+
+const CURRENCIES = [
+  { value: "INR", label: "₹ - Indian Rupee" },
+  { value: "USD", label: "$ - US Dollar" },
+  { value: "GBP", label: "£ - Pound Sterling" },
+];
+
+function Single({ showSearch = true, filterOption }: any) {
+  const [value, setValue] = useState("");
+  return (
+    <>
+      <SingleSelect
+        options={CURRENCIES}
+        value={value}
+        onChange={setValue}
+        placeholder="Select currency"
+        showSearch={showSearch}
+        searchPlaceholder="Search currency"
+        filterOption={filterOption}
+      />
+      <output data-testid="value">{value}</output>
+    </>
+  );
+}
+
+describe("SingleSelect", () => {
+  it("picks a value and reports it once", () => {
+    render(<Single />);
+    fireEvent.click(screen.getByRole("button", { name: /select currency/i }));
+    fireEvent.click(screen.getByText("$ - US Dollar"));
+    expect(screen.getByTestId("value").textContent).toBe("USD");
+  });
+
+  it("searches the value as well as the label, so a raw code finds its row", () => {
+    render(<Single />);
+    fireEvent.click(screen.getByRole("button", { name: /select currency/i }));
+    // "GBP" appears only in the value; the label shows the symbol and name.
+    fireEvent.change(screen.getByLabelText("Search currency"), { target: { value: "gbp" } });
+    expect(screen.getByText("£ - Pound Sterling")).toBeDefined();
+    expect(screen.queryByText("₹ - Indian Rupee")).toBeNull();
+  });
+
+  it("honours a custom filterOption", () => {
+    // Matches nothing but INR, whatever is typed.
+    render(<Single filterOption={(o: any) => o.value === "INR"} />);
+    fireEvent.click(screen.getByRole("button", { name: /select currency/i }));
+    fireEvent.change(screen.getByLabelText("Search currency"), { target: { value: "dollar" } });
+    expect(screen.getByText("₹ - Indian Rupee")).toBeDefined();
+    expect(screen.queryByText("$ - US Dollar")).toBeNull();
+  });
+
+  it("shows the empty line when nothing matches", () => {
+    render(<Single />);
+    fireEvent.click(screen.getByRole("button", { name: /select currency/i }));
+    fireEvent.change(screen.getByLabelText("Search currency"), { target: { value: "zzz" } });
+    expect(screen.getByText("No options found.")).toBeDefined();
+  });
+});
+
+describe("CheckboxSelect search", () => {
+  it("matches the value too, not only the label", () => {
+    render(
+      <CheckboxSelect
+        options={CURRENCIES}
+        value={[]}
+        onChange={() => {}}
+        placeholder="Select currencies"
+        showSearch
+        searchPlaceholder="Search currency"
+      />
+    );
+    fireEvent.click(screen.getByRole("button", { name: /select currencies/i }));
+    fireEvent.change(screen.getByLabelText("Search currency"), { target: { value: "usd" } });
+    expect(screen.getByText("$ - US Dollar")).toBeDefined();
+    expect(screen.queryByText("₹ - Indian Rupee")).toBeNull();
+  });
+});
+
+describe("defaultOptionFilter", () => {
+  it("is case-insensitive across label and value", () => {
+    const o = { value: "INR", label: "₹ - Indian Rupee" };
+    expect(defaultOptionFilter(o, "inr")).toBe(true);
+    expect(defaultOptionFilter(o, "RUPEE")).toBe(true);
+    expect(defaultOptionFilter(o, "dollar")).toBe(false);
+  });
+});
+
+/**
+ * A picker inside a modal dialog: `react-remove-scroll` cancels wheel and
+ * touch-move for anything outside the locked subtree, and a portalled popover
+ * is outside it — so the list rendered but would not scroll. Only the topmost
+ * lock acts, so the panel has to bring its own.
+ *
+ * It does that with `ScrollLockTakeover` rather than by going `modal`: the
+ * modal route would also trap focus and swallow outside clicks, which would
+ * change how every existing popover in a dialog behaves for a fix that is only
+ * about the wheel.
+ */
+describe("SingleSelect inside a modal dialog", () => {
+  it("takes over the scroll lock so its list can scroll", async () => {
+    render(
+      <Dialog open onOpenChange={() => {}}>
+        <DialogContent>
+          <Single />
+        </DialogContent>
+      </Dialog>
+    );
+
+    expect(document.body.getAttribute("data-scroll-locked")).toBe("1");
+
+    fireEvent.click(screen.getByRole("button", { name: /select currency/i }));
+
+    const option = await screen.findByText("$ - US Dollar");
+    expect(option.closest("[data-scroll-lock-takeover]")).not.toBeNull();
+  });
+
+  it("stays modal-free: the dialog keeps the only lock counted on the body", async () => {
+    render(
+      <Dialog open onOpenChange={() => {}}>
+        <DialogContent>
+          <Single />
+        </DialogContent>
+      </Dialog>
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /select currency/i }));
+
+    await screen.findByText("$ - US Dollar");
+    // A `modal` popover would have pushed a second RemoveScrollBar here.
+    expect(document.body.getAttribute("data-scroll-locked")).toBe("1");
+  });
+
+  it("does not wrap the panel when there is no dialog around it", async () => {
+    render(<Single />);
+    fireEvent.click(screen.getByRole("button", { name: /select currency/i }));
+
+    const option = await screen.findByText("$ - US Dollar");
+    expect(option.closest("[data-scroll-lock-takeover]")).toBeNull();
+  });
+});
+
+describe("SingleSelect search threshold", () => {
+  const many = Array.from({ length: 8 }, (_, i) => ({
+    value: `v${i}`,
+    label: `Option ${i}`,
+  }));
+
+  function Harness({ options, ...rest }: any) {
+    const [value, setValue] = useState("");
+    return (
+      <SingleSelect
+        options={options}
+        value={value}
+        onChange={setValue}
+        placeholder="Pick one"
+        searchPlaceholder="Search options"
+        {...rest}
+      />
+    );
+  }
+
+  it("shows the box on its own once the list is long enough", () => {
+    render(<Harness options={many} />);
+    fireEvent.click(screen.getByRole("button", { name: /pick one/i }));
+    expect(screen.getByLabelText("Search options")).toBeDefined();
+  });
+
+  it("leaves a short list alone", () => {
+    render(<Harness options={many.slice(0, 3)} />);
+    fireEvent.click(screen.getByRole("button", { name: /pick one/i }));
+    expect(screen.queryByLabelText("Search options")).toBeNull();
+  });
+
+  it("takes an explicit showSearch either way", () => {
+    const { unmount } = render(<Harness options={many.slice(0, 3)} showSearch />);
+    fireEvent.click(screen.getByRole("button", { name: /pick one/i }));
+    expect(screen.getByLabelText("Search options")).toBeDefined();
+    unmount();
+
+    render(<Harness options={many} showSearch={false} />);
+    fireEvent.click(screen.getByRole("button", { name: /pick one/i }));
+    expect(screen.queryByLabelText("Search options")).toBeNull();
+  });
+
+  it("puts focus in the search box on open, and takes an id for its label", async () => {
+    render(<Harness options={many} id="currency-field" />);
+    const trigger = screen.getByRole("button", { name: /pick one/i });
+    expect(trigger.id).toBe("currency-field");
+
+    fireEvent.click(trigger);
+    await waitFor(() =>
+      expect(document.activeElement).toBe(screen.getByLabelText("Search options"))
+    );
+  });
+});

package/src/button.tsx

@@ -55,6 +55,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         disabled={disabled || isLoading}
         className={cn(
           "inline-flex items-center justify-center font-medium transition-colors duration-pg-fast ease-pg-standard",
+          // A button's label never wraps. Without this, a narrow button breaks
+          // the line between an icon and its text — and an icon passed as a
+          // child rather than through `leftIcon` sits inside the same span, so
+          // it wraps with the words. Pass `whitespace-normal` in `className`
+          // for the rare button that really should wrap.
+          "whitespace-nowrap",
           variant !== "link" && "disabled:cursor-not-allowed disabled:opacity-50",
           variant === "link" && "justify-center",
           variant !== "link" && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35",

package/src/checkbox-select.tsx

@@ -5,6 +5,8 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check, ChevronDown, Search } from "lucide-react";
 import { cn } from "./utils";
+import { filterOptions, type OptionFilter } from "./option-filter";
+import { ScrollLockTakeover } from "./scroll-lock";
 
 export interface CheckboxSelectOption {
   value: string;
@@ -18,6 +20,13 @@ export interface CheckboxSelectProps {
   onChange: (values: string[]) => void;
   placeholder?: string;
   showSearch?: boolean;
+  /** Placeholder inside the search box. Default "Search...". */
+  searchPlaceholder?: string;
+  /**
+   * Replaces the default match (label or value, case-insensitive) — for a list
+   * that has to be findable by something the row does not display.
+   */
+  filterOption?: OptionFilter<CheckboxSelectOption>;
   disabled?: boolean;
   maxDisplay?: number;
   className?: string;
@@ -48,6 +57,8 @@ const CheckboxSelect = React.forwardRef<HTMLButtonElement, CheckboxSelectProps>(
       onChange,
       placeholder = "Select options",
       showSearch = false,
+      searchPlaceholder = "Search...",
+      filterOption,
       disabled = false,
       maxDisplay = 2,
       className,
@@ -57,11 +68,12 @@ const CheckboxSelect = React.forwardRef<HTMLButtonElement, CheckboxSelectProps>(
     const [open, setOpen] = React.useState(false);
     const [search, setSearch] = React.useState("");
 
-    const filtered = React.useMemo(() => {
-      if (!search.trim()) return options;
-      const lower = search.toLowerCase();
-      return options.filter((o) => o.label.toLowerCase().includes(lower));
-    }, [options, search]);
+    // Shared with SingleSelect and SelectFilterChip: the value matches as well
+    // as the label, so a raw code finds its prettified row.
+    const filtered = React.useMemo(
+      () => filterOptions(options, search, filterOption),
+      [options, search, filterOption]
+    );
 
     const allFilteredValues = filtered.filter((o) => !o.disabled).map((o) => o.value);
     const allFilteredSelected =
@@ -121,113 +133,121 @@ const CheckboxSelect = React.forwardRef<HTMLButtonElement, CheckboxSelectProps>(
         </PopoverPrimitive.Trigger>
 
         <PopoverPrimitive.Portal>
-          <PopoverPrimitive.Content
-            align="start"
-            sideOffset={6}
-            className={cn(
-              "z-[120] min-w-[var(--radix-popover-trigger-width)] w-full rounded-xl border border-border bg-popover text-popover-foreground shadow-lg outline-none p-1",
-              "data-[state=open]:opacity-100 data-[state=closed]:opacity-0 transition-opacity duration-150"
-            )}
-          >
-            {showSearch && (
-              <div className="relative mb-1 px-1 pt-1">
-                <Search className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
-                <input
-                  type="text"
-                  value={search}
-                  onChange={(e) => setSearch(e.target.value)}
-                  placeholder="Search..."
-                  className={cn(
-                    "flex h-9 w-full rounded-md border border-border bg-card pl-8 pr-3 text-sm shadow-sm placeholder:text-muted-foreground",
-                    "transition-colors duration-pg-fast ease-pg-standard",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35"
-                  )}
-                />
-              </div>
-            )}
+          {/* Takes over the scroll lock when this opens inside a Dialog or
+              Drawer, so the list can be scrolled. See `scroll-lock.tsx`. */}
+          <ScrollLockTakeover>
+            <PopoverPrimitive.Content
+              align="start"
+              sideOffset={6}
+              collisionPadding={8}
+              className={cn(
+                "z-[120] min-w-[var(--radix-popover-trigger-width)] w-full rounded-xl border border-border bg-popover text-popover-foreground shadow-lg outline-none p-1",
+                "data-[state=open]:opacity-100 data-[state=closed]:opacity-0 transition-opacity duration-150"
+              )}
+            >
+              {showSearch && (
+                <div className="relative mb-1 px-1 pt-1">
+                  <Search className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+                  <input
+                    type="text"
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    placeholder={searchPlaceholder}
+                    aria-label={searchPlaceholder}
+                    className={cn(
+                      "flex h-9 w-full rounded-md border border-border bg-card pl-8 pr-3 text-sm shadow-sm placeholder:text-muted-foreground",
+                      "transition-colors duration-pg-fast ease-pg-standard",
+                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35"
+                    )}
+                  />
+                </div>
+              )}
 
-            <div className="flex items-center justify-between px-2 py-1.5">
-              <button
-                type="button"
-                onClick={handleSelectAll}
-                className={cn(
-                  "text-xs font-medium transition-colors duration-pg-fast ease-pg-standard",
-                  allFilteredSelected
-                    ? "text-primary hover:text-primary/80"
-                    : someFilteredSelected
-                    ? "text-primary hover:text-primary/80"
-                    : "text-muted-foreground hover:text-foreground"
-                )}
-              >
-                {allFilteredSelected ? "Deselect all" : "Select all"}
-              </button>
-              {value.length > 0 && (
+              <div className="flex items-center justify-between px-2 py-1.5">
                 <button
                   type="button"
-                  onClick={handleClearAll}
-                  className="text-xs font-medium text-muted-foreground transition-colors duration-pg-fast ease-pg-standard hover:text-foreground"
+                  onClick={handleSelectAll}
+                  className={cn(
+                    "text-xs font-medium transition-colors duration-pg-fast ease-pg-standard",
+                    allFilteredSelected
+                      ? "text-primary hover:text-primary/80"
+                      : someFilteredSelected
+                      ? "text-primary hover:text-primary/80"
+                      : "text-muted-foreground hover:text-foreground"
+                  )}
                 >
-                  Clear
+                  {allFilteredSelected ? "Deselect all" : "Select all"}
                 </button>
-              )}
-            </div>
+                {value.length > 0 && (
+                  <button
+                    type="button"
+                    onClick={handleClearAll}
+                    className="text-xs font-medium text-muted-foreground transition-colors duration-pg-fast ease-pg-standard hover:text-foreground"
+                  >
+                    Clear
+                  </button>
+                )}
+              </div>
 
-            <div className="my-0.5 h-px bg-border mx-1" />
+              <div className="my-0.5 h-px bg-border mx-1" />
 
-            <div className="max-h-60 overflow-y-auto py-0.5">
-              {filtered.length === 0 ? (
-                <div className="px-3 py-6 text-center text-sm text-muted-foreground">
-                  No options found.
-                </div>
-              ) : (
-                filtered.map((option) => {
-                  const checked = value.includes(option.value);
-                  return (
-                    <div
-                      key={option.value}
-                      role="option"
-                      aria-selected={checked}
-                      aria-disabled={option.disabled}
-                      onClick={() => !option.disabled && handleToggle(option.value)}
-                      className={cn(
-                        "flex items-center gap-2.5 px-3 py-2 rounded-md text-sm select-none",
-                        "transition-colors duration-pg-fast ease-pg-standard",
-                        option.disabled
-                          ? "cursor-not-allowed opacity-50"
-                          : "cursor-pointer hover:bg-muted"
-                      )}
-                    >
-                      <CheckboxPrimitive.Root
-                        checked={checked}
-                        disabled={option.disabled}
-                        onCheckedChange={() => !option.disabled && handleToggle(option.value)}
-                        onClick={(e) => e.stopPropagation()}
+              {/* Capped by the room the popover has, so a long list near the
+                  bottom of a dialog scrolls rather than running off-screen. */}
+              <div className="overflow-y-auto overscroll-contain py-0.5 max-h-[min(15rem,var(--radix-popover-content-available-height,15rem))]">
+                {filtered.length === 0 ? (
+                  <div className="px-3 py-6 text-center text-sm text-muted-foreground">
+                    No options found.
+                  </div>
+                ) : (
+                  filtered.map((option) => {
+                    const checked = value.includes(option.value);
+                    return (
+                      <div
+                        key={option.value}
+                        role="option"
+                        aria-selected={checked}
+                        aria-disabled={option.disabled}
+                        onClick={() => !option.disabled && handleToggle(option.value)}
                         className={cn(
-                          "peer h-4 w-4 shrink-0 rounded-md border border-border bg-card shadow-sm",
+                          "flex items-center gap-2.5 px-3 py-2 rounded-md text-sm select-none",
                           "transition-colors duration-pg-fast ease-pg-standard",
-                          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35",
-                          "disabled:cursor-not-allowed disabled:opacity-50",
-                          "data-[state=checked]:bg-primary data-[state=checked]:border-primary"
+                          option.disabled
+                            ? "cursor-not-allowed opacity-50"
+                            : "cursor-pointer hover:bg-muted"
                         )}
                       >
-                        <CheckboxPrimitive.Indicator className="flex items-center justify-center text-primary-foreground">
-                          <Check className="size-3" strokeWidth={3} />
-                        </CheckboxPrimitive.Indicator>
-                      </CheckboxPrimitive.Root>
-                      <span
-                        className={cn(
-                          "leading-none",
-                          checked ? "text-foreground" : "text-foreground"
-                        )}
-                      >
-                        {option.label}
-                      </span>
-                    </div>
-                  );
-                })
-              )}
-            </div>
-          </PopoverPrimitive.Content>
+                        <CheckboxPrimitive.Root
+                          checked={checked}
+                          disabled={option.disabled}
+                          onCheckedChange={() => !option.disabled && handleToggle(option.value)}
+                          onClick={(e) => e.stopPropagation()}
+                          className={cn(
+                            "peer h-4 w-4 shrink-0 rounded-md border border-border bg-card shadow-sm",
+                            "transition-colors duration-pg-fast ease-pg-standard",
+                            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35",
+                            "disabled:cursor-not-allowed disabled:opacity-50",
+                            "data-[state=checked]:bg-primary data-[state=checked]:border-primary"
+                          )}
+                        >
+                          <CheckboxPrimitive.Indicator className="flex items-center justify-center text-primary-foreground">
+                            <Check className="size-3" strokeWidth={3} />
+                          </CheckboxPrimitive.Indicator>
+                        </CheckboxPrimitive.Root>
+                        <span
+                          className={cn(
+                            "leading-none",
+                            checked ? "text-foreground" : "text-foreground"
+                          )}
+                        >
+                          {option.label}
+                        </span>
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+            </PopoverPrimitive.Content>
+          </ScrollLockTakeover>
         </PopoverPrimitive.Portal>
       </PopoverPrimitive.Root>
     );

package/src/code.tsx

@@ -41,6 +41,16 @@ export interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
   language?: string;
   /** Hide the copy button. Defaults to false. */
   hideCopy?: boolean;
+  /**
+   * Wrap long lines instead of scrolling them sideways.
+   *
+   * Worth turning on wherever the code is something to read and copy rather
+   * than to study — a snippet in a dialog, say, where a horizontal scrollbar
+   * hides the end of the only line that matters and no one thinks to drag it.
+   * Leave it off for real source, where wrapping would break the indentation
+   * that carries the structure.
+   */
+  wrap?: boolean;
 }
 
 export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
@@ -50,6 +60,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
       filename,
       language,
       hideCopy = false,
+      wrap = false,
       className,
       ...props
     },
@@ -103,7 +114,16 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
 
         {/* Code area */}
         <div className="relative">
-          <pre className="overflow-x-auto p-4 font-mono text-[13px] leading-relaxed">
+          <pre
+            className={cn(
+              "p-4 font-mono text-[13px] leading-relaxed",
+              wrap ? "whitespace-pre-wrap break-words" : "overflow-x-auto",
+              // Room for the floating copy button, which a wrapped line would
+              // otherwise run underneath. Only when wrapping: a scrolling block
+              // is unchanged from before this prop existed.
+              wrap && !hasHeader && !hideCopy && "pr-12"
+            )}
+          >
             <code>{code}</code>
           </pre>