@payglocal_ui/flux-ui 0.3.2 → 0.3.4

package/src/country-select.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Check, ChevronDown, Search } from "lucide-react";
 import { cn } from "./utils";
+import { ScrollLockTakeover } from "./scroll-lock";
 
 export interface Country {
   code: string;
@@ -142,96 +143,100 @@ const CountrySelect = React.forwardRef<HTMLButtonElement, CountrySelectProps>(
         </PopoverPrimitive.Trigger>
 
         <PopoverPrimitive.Portal>
-          <PopoverPrimitive.Content
-            align="start"
-            sideOffset={6}
-            className={cn(
-              "z-[120] w-[var(--radix-popover-trigger-width)] min-w-[260px] rounded-xl border border-border bg-popover text-popover-foreground shadow-lg outline-none",
-              "data-[state=open]:opacity-100 data-[state=closed]:opacity-0 transition-opacity duration-150"
-            )}
-            onOpenAutoFocus={(e) => e.preventDefault()}
-          >
-            {/* Search */}
-            <div className="flex items-center gap-2 border-b border-border px-3 py-2.5">
-              <Search className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true" />
-              <input
-                ref={searchRef}
-                type="text"
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                placeholder="Search countries…"
-                className={cn(
-                  "flex-1 bg-transparent text-[14px] text-foreground placeholder:text-muted-foreground",
-                  "focus-visible:outline-none"
-                )}
-                aria-label="Search countries"
-              />
-              {search && (
-                <button
-                  type="button"
-                  onClick={() => setSearch("")}
-                  className="shrink-0 text-muted-foreground hover:text-foreground transition-colors duration-pg-fast ease-pg-standard"
-                  aria-label="Clear search"
-                >
-                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
-                    <path d="M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-                  </svg>
-                </button>
+          {/* 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}
+              className={cn(
+                "z-[120] w-[var(--radix-popover-trigger-width)] min-w-[260px] rounded-xl border border-border bg-popover text-popover-foreground shadow-lg outline-none",
+                "data-[state=open]:opacity-100 data-[state=closed]:opacity-0 transition-opacity duration-150"
               )}
-            </div>
-
-            {/* List */}
-            <div
-              role="listbox"
-              aria-label="Countries"
-              className="max-h-64 overflow-y-auto p-1"
+              onOpenAutoFocus={(e) => e.preventDefault()}
             >
-              {filtered.length === 0 ? (
-                <div className="py-6 text-center text-sm text-muted-foreground">
-                  No countries found
-                </div>
-              ) : (
-                filtered.map((country) => {
-                  const isSelected = country.code === value;
-                  return (
-                    <button
-                      key={country.code}
-                      role="option"
-                      aria-selected={isSelected}
-                      type="button"
-                      onClick={() => {
-                        onValueChange?.(country.code);
-                        setOpen(false);
-                      }}
-                      className={cn(
-                        "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm",
-                        "transition-colors duration-pg-fast ease-pg-standard",
-                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35",
-                        "hover:bg-muted",
-                        isSelected && "bg-muted/60"
-                      )}
-                    >
-                      <span className="text-base leading-none" aria-hidden="true">
-                        {country.flag}
-                      </span>
-                      <span className="flex-1 truncate text-foreground">
-                        {country.name}
-                      </span>
-                      <span className="shrink-0 text-xs text-muted-foreground">
-                        {country.dialCode}
-                      </span>
-                      {isSelected && (
-                        <Check
-                          className="h-3.5 w-3.5 shrink-0 text-primary"
-                          aria-hidden="true"
-                        />
-                      )}
-                    </button>
-                  );
-                })
-              )}
-            </div>
-          </PopoverPrimitive.Content>
+              {/* Search */}
+              <div className="flex items-center gap-2 border-b border-border px-3 py-2.5">
+                <Search className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+                <input
+                  ref={searchRef}
+                  type="text"
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  placeholder="Search countries…"
+                  className={cn(
+                    "flex-1 bg-transparent text-[14px] text-foreground placeholder:text-muted-foreground",
+                    "focus-visible:outline-none"
+                  )}
+                  aria-label="Search countries"
+                />
+                {search && (
+                  <button
+                    type="button"
+                    onClick={() => setSearch("")}
+                    className="shrink-0 text-muted-foreground hover:text-foreground transition-colors duration-pg-fast ease-pg-standard"
+                    aria-label="Clear search"
+                  >
+                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+                      <path d="M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                    </svg>
+                  </button>
+                )}
+              </div>
+
+              {/* List */}
+              <div
+                role="listbox"
+                aria-label="Countries"
+                className="max-h-64 overflow-y-auto p-1"
+              >
+                {filtered.length === 0 ? (
+                  <div className="py-6 text-center text-sm text-muted-foreground">
+                    No countries found
+                  </div>
+                ) : (
+                  filtered.map((country) => {
+                    const isSelected = country.code === value;
+                    return (
+                      <button
+                        key={country.code}
+                        role="option"
+                        aria-selected={isSelected}
+                        type="button"
+                        onClick={() => {
+                          onValueChange?.(country.code);
+                          setOpen(false);
+                        }}
+                        className={cn(
+                          "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm",
+                          "transition-colors duration-pg-fast ease-pg-standard",
+                          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35",
+                          "hover:bg-muted",
+                          isSelected && "bg-muted/60"
+                        )}
+                      >
+                        <span className="text-base leading-none" aria-hidden="true">
+                          {country.flag}
+                        </span>
+                        <span className="flex-1 truncate text-foreground">
+                          {country.name}
+                        </span>
+                        <span className="shrink-0 text-xs text-muted-foreground">
+                          {country.dialCode}
+                        </span>
+                        {isSelected && (
+                          <Check
+                            className="h-3.5 w-3.5 shrink-0 text-primary"
+                            aria-hidden="true"
+                          />
+                        )}
+                      </button>
+                    );
+                  })
+                )}
+              </div>
+            </PopoverPrimitive.Content>
+          </ScrollLockTakeover>
         </PopoverPrimitive.Portal>
       </PopoverPrimitive.Root>
     );

package/src/date-picker.tsx

@@ -6,6 +6,7 @@ import { RemoveScroll } from "react-remove-scroll";
 import { ChevronLeft, ChevronRight, ChevronDown, CalendarDays } from "lucide-react";
 import { AnimatePresence, motion } from "framer-motion";
 import { cn } from "./utils";
+import { ScrollLockTakeover } from "./scroll-lock";
 
 /* ─── Constants ─────────────────────────────────────────────────────────── */
 const MONTHS = ["January","February","March","April","May","June",
@@ -655,8 +656,11 @@ export function DatePicker({ value, onChange, placeholder = "Select date", class
         <ChevronDown className={cn("size-[1.125rem] shrink-0 text-muted-foreground transition-transform", open && "rotate-180")} />
       </button>
 
-      {/* Portal */}
-      {mounted && createPortal(panel, document.body)}
+      {/* Portal. Wrapped so the panel takes over the scroll lock when it opens
+          inside a Dialog or Drawer — without it the year/month lists and the
+          time columns cannot be scrolled with the wheel. See `scroll-lock.tsx`. */}
+      {mounted &&
+        createPortal(<ScrollLockTakeover>{panel}</ScrollLockTakeover>, document.body)}
     </div>
   );
 }

package/src/index.ts

@@ -20,6 +20,11 @@ export { OtpInput } from "./otp-input";
 export type { OtpInputProps } from "./otp-input";
 export { CheckboxSelect } from "./checkbox-select";
 export type { CheckboxSelectProps, CheckboxSelectOption } from "./checkbox-select";
+export { SingleSelect } from "./single-select";
+export type { SingleSelectProps, SingleSelectOption } from "./single-select";
+export { defaultOptionFilter } from "./option-filter";
+export { isScrollLocked, ScrollLockTakeover } from "./scroll-lock";
+export type { OptionFilter, FilterableOption } from "./option-filter";
 export { Textarea } from "./textarea";
 export { Label } from "./label";
 export { Checkbox } from "./checkbox";

package/src/inline-dialog.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { X } from "lucide-react";
 import { cn } from "./utils";
+import { ScrollLockTakeover } from "./scroll-lock";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -103,44 +104,48 @@ const InlineDialogContent = React.forwardRef<
     ref
   ) => (
     <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        ref={ref}
-        side={side}
-        sideOffset={sideOffset}
-        className={cn(
-          // Base card
-          "relative z-[120] max-w-xs overflow-visible",
-          "rounded-xl border border-border bg-card p-4 text-foreground shadow-lg",
-          // Animation
-          "data-[state=open]:opacity-100 data-[state=closed]:opacity-0",
-          "transition-opacity duration-pg-fast ease-pg-standard",
-          "outline-none",
-          className
-        )}
-        {...props}
-      >
-        {/* Arrow pointer */}
-        <span className={getArrowClasses(side)} aria-hidden="true" />
-
-        {/* Close button */}
-        {!hideClose && (
-          <PopoverPrimitive.Close
-            className={cn(
-              "absolute right-2 top-2 z-10",
-              "inline-flex size-6 items-center justify-center rounded-md",
-              "text-muted-foreground hover:text-foreground",
-              "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"
-            )}
-            aria-label="Close"
-          >
-            <X className="size-3.5" />
-          </PopoverPrimitive.Close>
-        )}
-
-        {children}
-      </PopoverPrimitive.Content>
+      {/* Scrollable when opened from inside a Dialog or Drawer. See
+          `scroll-lock.tsx`. */}
+      <ScrollLockTakeover>
+        <PopoverPrimitive.Content
+          ref={ref}
+          side={side}
+          sideOffset={sideOffset}
+          className={cn(
+            // Base card
+            "relative z-[120] max-w-xs overflow-visible",
+            "rounded-xl border border-border bg-card p-4 text-foreground shadow-lg",
+            // Animation
+            "data-[state=open]:opacity-100 data-[state=closed]:opacity-0",
+            "transition-opacity duration-pg-fast ease-pg-standard",
+            "outline-none",
+            className
+          )}
+          {...props}
+        >
+          {/* Arrow pointer */}
+          <span className={getArrowClasses(side)} aria-hidden="true" />
+
+          {/* Close button */}
+          {!hideClose && (
+            <PopoverPrimitive.Close
+              className={cn(
+                "absolute right-2 top-2 z-10",
+                "inline-flex size-6 items-center justify-center rounded-md",
+                "text-muted-foreground hover:text-foreground",
+                "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"
+              )}
+              aria-label="Close"
+            >
+              <X className="size-3.5" />
+            </PopoverPrimitive.Close>
+          )}
+
+          {children}
+        </PopoverPrimitive.Content>
+      </ScrollLockTakeover>
     </PopoverPrimitive.Portal>
   )
 );

package/src/option-filter.ts

@@ -0,0 +1,47 @@
+/**
+ * Shared option-search behaviour for the select family.
+ *
+ * Every picker that can be searched matches the same way, so a user who learns
+ * that typing a raw code works in one dropdown can rely on it in the next.
+ */
+
+export interface FilterableOption {
+  value: string;
+  label: string;
+}
+
+/**
+ * A custom match. Return true to keep the option in the list.
+ *
+ * The `query` arrives trimmed but otherwise untouched, so a predicate that
+ * cares about case can have it.
+ */
+export type OptionFilter<T extends FilterableOption = FilterableOption> = (
+  option: T,
+  query: string
+) => boolean;
+
+/**
+ * The default: case-insensitive against the label **and** the value, so "nz"
+ * finds New Zealand and a raw status code finds its prettified row. Someone who
+ * thinks in codes should not have to know the display name.
+ *
+ * This is the rule `SelectFilterChip` already applied to its list; the form
+ * fields now share it rather than each picker inventing its own.
+ */
+export function defaultOptionFilter<T extends FilterableOption>(option: T, query: string): boolean {
+  const q = query.toLowerCase();
+  return option.label.toLowerCase().includes(q) || option.value.toLowerCase().includes(q);
+}
+
+/** Applies `filter` (or the default) to `options`, with an empty query passing everything. */
+export function filterOptions<T extends FilterableOption>(
+  options: T[],
+  query: string,
+  filter?: OptionFilter<T>
+): T[] {
+  const q = query.trim();
+  if (!q) return options;
+  const match = filter ?? defaultOptionFilter;
+  return options.filter((o) => match(o, q));
+}

package/src/popover.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { cn } from "./utils";
+import { ScrollLockTakeover } from "./scroll-lock";
 
 const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
@@ -11,12 +12,16 @@ const PopoverAnchor = PopoverPrimitive.Anchor;
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(
-  (
-    { className, align = "center", sideOffset = 6, collisionPadding = 12, ...props },
-    ref
-  ) => (
-    <PopoverPrimitive.Portal>
+>(({ className, align = "center", sideOffset = 6, collisionPadding = 12, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    {/* Every popover panel is portalled to `document.body`, which puts it
+        outside a Dialog's or Drawer's scroll lock — and that lock cancels the
+        wheel for everything outside itself, so a scrollable panel silently
+        refuses to scroll. The takeover is a no-op when no lock is held, so a
+        popover on a plain page behaves exactly as before, and unlike making the
+        popover `modal` it changes nothing about focus or outside clicks. See
+        `scroll-lock.tsx`. */}
+    <ScrollLockTakeover>
       <PopoverPrimitive.Content
         ref={ref}
         align={align}
@@ -32,9 +37,9 @@ const PopoverContent = React.forwardRef<
         )}
         {...props}
       />
-    </PopoverPrimitive.Portal>
-  )
-);
+    </ScrollLockTakeover>
+  </PopoverPrimitive.Portal>
+));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/src/scroll-lock.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import * as React from "react";
+import { RemoveScroll } from "react-remove-scroll";
+
+/**
+ * Scrolling inside an overlay that sits on top of another overlay.
+ *
+ * ## The defect this exists to prevent
+ *
+ * A modal `Dialog` or `Drawer` installs a `react-remove-scroll` lock. That lock
+ * listens for `wheel` and `touchmove` on `document` and, for any event whose
+ * target is **outside** the locked subtree, calls `preventDefault()` — the
+ * "outside or shard event" branch of its `SideEffect`. Radix passes only the
+ * dialog's own content as a shard.
+ *
+ * Every panel a picker opens is portalled to `document.body`, which puts it
+ * outside that subtree. So the panel renders, its list has `overflow-y-auto`,
+ * and the wheel does nothing. It is invisible in code review, because the
+ * component is correct on its own; it only misbehaves under an overlay.
+ *
+ * ## Why a lock, not an exception
+ *
+ * The same `SideEffect` returns early unless its own lock is the last one
+ * pushed. So the fix is not to poke a hole in the dialog's lock — it is for the
+ * panel to push a lock of its own while it is open, which suspends the one
+ * underneath and makes the panel's subtree the locked one. When it closes, its
+ * lock pops and the dialog's resumes.
+ *
+ * ## Why not just make the popover `modal`
+ *
+ * Radix installs a lock of its own for a `modal` popover, which would also fix
+ * the wheel — but it comes with a focus trap and with outside clicks being
+ * swallowed by the dismiss layer. Every popover already living inside a dialog
+ * would start behaving differently for the sake of a scrolling fix. So the lock
+ * is pushed directly, by {@link ScrollLockTakeover}, and modality is left
+ * alone. `PopoverContent` wraps every panel in it, which covers the pickers and
+ * anything an app composes; the hand-rolled `createPortal` panels
+ * (`DatePicker`, `TimePicker`) wrap theirs the same way.
+ */
+
+/**
+ * Whether a `react-remove-scroll` lock is currently held — by a modal Dialog,
+ * Drawer, AlertDialog, or another picker.
+ *
+ * `data-scroll-locked` is set on `<body>` by `react-remove-scroll-bar`, which
+ * every such lock goes through, so this is the library's own signal rather
+ * than a guess about which overlay is open.
+ */
+export function isScrollLocked(): boolean {
+  return typeof document !== "undefined" && document.body.hasAttribute("data-scroll-locked");
+}
+
+/**
+ * The same takeover for a panel that portals itself instead of going through
+ * Radix. Renders children untouched when no lock is held, so a picker on a
+ * plain page behaves exactly as before.
+ *
+ * `removeScrollBar` is off: the page's scrollbar is already gone, and a second
+ * `RemoveScrollBar` re-measures a gap that is now zero and writes it back over
+ * the dialog's, shifting the layout while the panel is open. The consequence is
+ * that this takeover does **not** bump `data-scroll-locked`; the wrapper's
+ * `data-scroll-lock-takeover` is the marker instead, in the DOM for debugging
+ * and for tests.
+ */
+export function ScrollLockTakeover({ children }: { children: React.ReactNode }) {
+  // Read once, when the panel mounts — that is the moment it opens.
+  const [active] = React.useState(isScrollLocked);
+  if (!active) return <>{children}</>;
+  return (
+    <RemoveScroll removeScrollBar={false} allowPinchZoom data-scroll-lock-takeover="">
+      {children}
+    </RemoveScroll>
+  );
+}