torch-glare 2.5.5 → 2.6.0

package/apps/lib/components/SearchableSelect.tsx

@@ -1,318 +0,0 @@
-"use client";
-
-import { ReactNode, useEffect, useMemo, useRef, useState } from "react";
-import { cva } from "class-variance-authority";
-import { cn } from "../utils/cn";
-import { Themes } from "../utils/types";
-import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
-import { Icon, Input, Group } from "./Input";
-import { LoadingIcon } from "./Button";
-import { ActionButton } from "./ActionButton";
-import { useClickOutside } from "../hooks/useClickOutside";
-// Reuse the exact menu-item styling so rows look identical to DropdownMenuItem.
-import { MenuItemStyles } from "./DropdownMenu";
-
-/**
- * SearchableSelect — a searchable single-select combobox.
- *
- * Same search-on-focus behavior as SearchableTable, but the dropdown renders
- * DropdownMenu-style rows (MenuItemStyles) instead of a table. Built on Popover
- * so the text input keeps focus while filtering. Click an option to select it:
- * the dropdown closes and the input shows the option's label.
- */
-
-export interface SearchableSelectOption {
-  value: string;
-  label: string;
-  icon?: ReactNode;
-  /** Text used for client-side filtering. Defaults to `label` — set it to match on a subset
-   *  (e.g. a country name only, when the label also shows a dial code). */
-  searchText?: string;
-}
-
-interface Props {
-  options: SearchableSelectOption[];
-  /** Controlled selected value (optional). */
-  value?: string | null;
-  onValueChange?: (value: string, option: SearchableSelectOption) => void;
-  placeholder?: string;
-  size?: "XS" | "S" | "M";
-  variant?: "SystemStyle" | "PresentationStyle";
-  icon?: ReactNode;
-  theme?: Themes;
-  dir?: string;
-  className?: string;
-  inputClassName?: string;
-  /** Transparent border/background so the trigger blends into a table cell. */
-  onTable?: boolean;
-
-  // --- Async / backend pagination (all optional; static `options` still works) ---
-  /**
-   * When true (default), the component filters `options` by label locally.
-   * Set false for server-side search — `options` are rendered as-is and you
-   * refetch them in response to `onSearchChange`.
-   */
-  filterClientSide?: boolean;
-  /** Debounced as the user types — refetch your data here (server search). */
-  onSearchChange?: (query: string) => void;
-  /** Debounce for `onSearchChange`, in ms (default 300). */
-  searchDebounceMs?: number;
-  /** Whether more pages are available; gates the infinite-scroll loader. */
-  hasMore?: boolean;
-  /** Whether a fetch is in flight; shows a loading row and blocks onLoadMore. */
-  loading?: boolean;
-  /** Called when the bottom sentinel scrolls into view and `hasMore && !loading`. */
-  onLoadMore?: () => void;
-  /** Max rows visible before the list scrolls (default 5). */
-  maxVisibleItems?: number;
-}
-
-// One M-size row ≈ 32px height + 2px*2 padding + 1px gap.
-const ROW_HEIGHT = 37;
-
-// Popover surface styled like the DropdownMenu (self-contained, mirrors the
-// menu surface used by DropdownMenu/ContextMenu).
-const menuContentStyles = cva(
-  [
-    "p-1",
-    "rounded-[14px]",
-    "border-0",
-    "outline-none",
-    "overflow-hidden", // the inner scroll viewport owns scrolling
-    "backdrop-blur-[21px]",
-    "flex flex-col gap-1",
-    "data-[state=open]:animate-in",
-    "data-[state=open]:fade-in-0",
-  ],
-  {
-    variants: {
-      variant: {
-        PresentationStyle: [
-          "bg-[rgba(61,64,69,0.72)]",
-          "shadow-[0_0_32px_2px_rgba(0,0,0,0.20),0_0_48px_2px_rgba(0,0,0,0.05)]",
-        ],
-        SystemStyle: [
-          "bg-background-system-body-primary",
-          "shadow-[0px_0px_18px_0px_rgba(0,0,0,0.75)]",
-        ],
-      },
-    },
-    defaultVariants: { variant: "PresentationStyle" },
-  },
-);
-
-export function SearchableSelect({
-  options,
-  value,
-  onValueChange,
-  placeholder = "Search…",
-  size = "M",
-  variant = "PresentationStyle",
-  icon,
-  theme,
-  dir,
-  className,
-  inputClassName,
-  onTable,
-  filterClientSide = true,
-  onSearchChange,
-  searchDebounceMs = 300,
-  hasMore = false,
-  loading = false,
-  onLoadMore,
-  maxVisibleItems = 5,
-}: Props) {
-  const [open, setOpen] = useState(false);
-  const [search, setSearch] = useState("");
-  const [searching, setSearching] = useState(false);
-  const [dropdownWidth, setDropdownWidth] = useState(0);
-  const popoverContentRef = useRef<HTMLDivElement>(null);
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  const groupRef = useClickOutside<HTMLDivElement>((e) => {
-    const target = e?.target as Node;
-    if (!groupRef.current?.contains(target) && !popoverContentRef.current?.contains(target)) {
-      setOpen(false);
-    }
-  });
-
-  // Debounced server search: notify the consumer to refetch when the query
-  // settles. Skipped entirely if no onSearchChange is provided (static mode).
-  useEffect(() => {
-    if (!onSearchChange) return;
-    const id = setTimeout(() => onSearchChange(search.trim()), searchDebounceMs);
-    return () => clearTimeout(id);
-  }, [search, onSearchChange, searchDebounceMs]);
-
-  // Infinite scroll: when the scroll viewport nears the bottom, ask the consumer
-  // to load the next page. An onScroll handler is more reliable here than an
-  // IntersectionObserver, which races with Radix's async portal mount.
-  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
-    if (!onLoadMore || !hasMore || loading) return;
-    const el = e.currentTarget;
-    if (el.scrollHeight - el.scrollTop - el.clientHeight < 80) {
-      onLoadMore();
-    }
-  };
-
-  const filteredOptions = useMemo(() => {
-    // Server-side search mode: render options as-is (already filtered upstream).
-    if (!filterClientSide) return options;
-    const q = search.trim().toLowerCase();
-    if (!q) return options;
-    return options.filter((o) => (o.searchText ?? o.label).toLowerCase().includes(q));
-  }, [options, search, filterClientSide]);
-
-  const selectedOption = options.find((o) => o.value === value) ?? null;
-
-  const handleSelect = (option: SearchableSelectOption) => {
-    onValueChange?.(option.value, option);
-    setSearch("");
-    setSearching(false);
-    setOpen(false);
-  };
-
-  // Solid value: search text while typing, otherwise the selected label.
-  const displayValue = searching ? search : (selectedOption?.label ?? "");
-
-  return (
-    <Popover open={open}>
-      <PopoverTrigger asChild>
-        <Group
-          dir={dir}
-          data-theme={theme}
-          variant={variant}
-          size={size === "XS" ? "S" : size}
-          onTable={onTable}
-          ref={groupRef as never}
-          onFocus={(e: React.FocusEvent<HTMLDivElement>) =>
-            setDropdownWidth(e.currentTarget.offsetWidth)
-          }
-          // Trigger styling mirrors the `Select` component's trigger so the two read identically.
-          // `p-[3px]` so the end button lands 4px from the outer edge once the 1px border is added.
-          // The old `rounded-[6px]` here was dead but dangerous: `twMerge` cannot dedupe it against
-          // the Group's `rounded-radius-xl` (custom scale key vs arbitrary value), so both shipped
-          // and the 12px only won on CSS source order.
-          className={cn("flex w-full items-center gap-1 p-[3px]", className)}
-        >
-          {icon && <Icon>{icon}</Icon>}
-          <Input
-            ref={inputRef}
-            placeholder={placeholder}
-            value={displayValue}
-            onChange={(e) => {
-              setSearch(e.target.value);
-              setSearching(true);
-            }}
-            onFocus={() => {
-              setSearching(true);
-              setSearch("");
-              setOpen(true);
-            }}
-            onBlur={() => setSearching(false)}
-            className={cn("min-w-[100px] flex-1", inputClassName, {
-              "!h-[18px]": size === "XS",
-              "!h-[22px]": size === "S",
-              "!h-[24px]": size === "M",
-            })}
-          />
-          {/* Chevron toggle — the shared in-field action button (Figma `ActionButton` M). */}
-          <ActionButton
-            as="span"
-            size="M"
-            tabIndex={-1}
-            aria-label={open ? "Close" : "Open"}
-            onMouseDown={(e: React.MouseEvent) => {
-              e.preventDefault();
-              if (open) {
-                setOpen(false);
-              } else {
-                inputRef.current?.focus();
-                setOpen(true);
-              }
-            }}
-            className={cn("shrink-0", open && "bg-background-presentation-action-hover text-white")}
-          >
-            <i
-              className={cn(
-                "ri-arrow-down-s-line !text-[26px] transition-all duration-100 ease-in-out",
-                open && "rotate-180",
-              )}
-            />
-          </ActionButton>
-        </Group>
-      </PopoverTrigger>
-
-      <PopoverContent
-        dir={dir}
-        data-theme={theme}
-        ref={popoverContentRef}
-        variant={variant}
-        onOpenAutoFocus={(e) => e.preventDefault()}
-        onWheel={(e) => e.stopPropagation()}
-        className={cn(menuContentStyles({ variant }))}
-        // The panel carries the cap — `maxVisibleItems` rows, but never more than the room Radix has
-        // on screen. Inline beats the `max-h-[…]` class popoverStyles contributes.
-        style={{
-          width: dropdownWidth || undefined,
-          maxHeight: `min(${maxVisibleItems * ROW_HEIGHT}px, var(--radix-popover-content-available-height, 100vh))`,
-        }}
-      >
-        {/* Dedicated scroll viewport. The height cap lives on the panel above; this just fills what is
-            left and scrolls. `min-h-0` is required — a flex item will not shrink below its content, so
-            without it the list grew past the panel and was clipped instead of scrolling. */}
-        <div
-          ref={scrollRef}
-          onScroll={handleScroll}
-          className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden rounded-[10px] scrollbar-hide"
-        >
-          {filteredOptions.length > 0 && (
-            // Boxed group container — matches the DropdownMenu's auto-grouped look.
-            <div className="flex flex-col gap-[1px] rounded-[10px] overflow-hidden">
-              {filteredOptions.map((option) => {
-                const isSelected = option.value === value;
-                return (
-                  // Same structure as DropdownMenuItem: MenuItemStyles on the
-                  // element + a single inner <div> the styles target via [&>div].
-                  <button
-                    type="button"
-                    key={option.value}
-                    onClick={() => handleSelect(option)}
-                    data-highlighted={isSelected ? "" : undefined}
-                    className={cn(
-                      MenuItemStyles({ variant: "Default", size: "M" }),
-                      "shrink-0", // keep full row height; the list scrolls instead of squishing
-                    )}
-                  >
-                    <div>
-                      {option.icon}
-                      <span className="flex-1 text-start">{option.label}</span>
-                      {isSelected && <i className="ri-check-line text-[16px] shrink-0" />}
-                    </div>
-                  </button>
-                );
-              })}
-            </div>
-          )}
-
-          {/* Empty state — only when nothing is loading. */}
-          {filteredOptions.length === 0 && !loading && (
-            <div className="px-3 py-2 typography-body-small-regular text-white-alpha-75">
-              No results found
-            </div>
-          )}
-
-          {/* Loading row (initial load or fetching the next page). */}
-          {loading && (
-            <div className="flex items-center justify-center py-2">
-              <LoadingIcon size="M" />
-            </div>
-          )}
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-SearchableSelect.displayName = "SearchableSelect";

package/apps/lib/components/SearchableTable.tsx

@@ -1,344 +0,0 @@
-"use client";
-
-import {
-  forwardRef,
-  InputHTMLAttributes,
-  ReactNode,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { cn } from "../utils/cn";
-import { Themes } from "../utils/types";
-import { Dialog, DialogTrigger, DialogContent, DialogTitle } from "./Dialog";
-import { Icon, Input, Group } from "./Input";
-import { LoadingIcon } from "./Button";
-import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from "./Table";
-
-/**
- * SearchableTable — a field that opens a modal Dialog to pick a row from a Table.
- *
- * The trigger shows a placeholder until something is selected, then shows the
- * selected row's label. Clicking it opens a dialog containing a search input and
- * the data Table; clicking a row selects it, sets the value, and closes the
- * dialog. Supports client- or server-side search and infinite-scroll pagination.
- */
-
-export interface SearchableTableColumn<T> {
-  /** Property on the row used for default rendering and search. */
-  key: keyof T & string;
-  header: ReactNode;
-  /** Custom cell renderer; defaults to String(row[key]). */
-  render?: (row: T) => ReactNode;
-}
-
-interface Props<T> {
-  columns: SearchableTableColumn<T>[];
-  rows: T[];
-  /** Controlled selected row (optional). */
-  value?: T | null;
-  onSelect?: (row: T) => void;
-  /** Text shown on the trigger after selection; defaults to the first column's value. */
-  getLabel?: (row: T) => string;
-  /** Stable id/key per row; defaults to JSON of the row. */
-  getRowId?: (row: T) => string;
-  /** Which fields the search matches; defaults to every column key. */
-  searchKeys?: (keyof T & string)[];
-  /** Trigger placeholder shown until a row is selected. */
-  placeholder?: string;
-  /** Placeholder for the search input inside the dialog. */
-  searchPlaceholder?: string;
-  /** Label shown on the dialog's search field. */
-  title?: string;
-  size?: "XS" | "S" | "M";
-  variant?: "SystemStyle" | "PresentationStyle";
-  icon?: ReactNode;
-  theme?: Themes;
-  dir?: string;
-  className?: string;
-
-  // --- Async / backend pagination (all optional; static `rows` still works) ---
-  /**
-   * When true (default), the component filters `rows` by searchKeys locally.
-   * Set false for server-side search — `rows` are rendered as-is and you
-   * refetch them in response to `onSearchChange`.
-   */
-  filterClientSide?: boolean;
-  /** Debounced as the user types — refetch your data here (server search). */
-  onSearchChange?: (query: string) => void;
-  /** Debounce for `onSearchChange`, in ms (default 300). */
-  searchDebounceMs?: number;
-  /** Whether more pages are available; gates the infinite-scroll loader. */
-  hasMore?: boolean;
-  /** Whether a fetch is in flight; shows a loading row and blocks onLoadMore. */
-  loading?: boolean;
-  /** Called when the list nears the bottom and `hasMore && !loading`. */
-  onLoadMore?: () => void;
-}
-
-export function SearchableTable<T extends Record<string, unknown>>({
-  columns,
-  rows,
-  value,
-  onSelect,
-  getLabel,
-  getRowId,
-  searchKeys,
-  placeholder = "Select…",
-  searchPlaceholder = "Search…",
-  title = "Select an item",
-  size = "M",
-  variant = "PresentationStyle",
-  icon,
-  theme,
-  dir,
-  className,
-  filterClientSide = true,
-  onSearchChange,
-  searchDebounceMs = 300,
-  hasMore = false,
-  loading = false,
-  onLoadMore,
-}: Props<T>) {
-  const [open, setOpen] = useState(false);
-  const [search, setSearch] = useState("");
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  const rowId = (row: T) => getRowId?.(row) ?? JSON.stringify(row);
-  const label = (row: T) => getLabel?.(row) ?? String(row[columns[0]?.key] ?? "");
-
-  const keysToSearch = searchKeys ?? columns.map((c) => c.key);
-
-  // Debounced server search: notify the consumer to refetch when the query
-  // settles. Skipped entirely if no onSearchChange is provided (static mode).
-  useEffect(() => {
-    if (!onSearchChange) return;
-    const id = setTimeout(() => onSearchChange(search.trim()), searchDebounceMs);
-    return () => clearTimeout(id);
-  }, [search, onSearchChange, searchDebounceMs]);
-
-  // Reset the query whenever the dialog closes so it reopens clean.
-  useEffect(() => {
-    if (!open) setSearch("");
-  }, [open]);
-
-  // Infinite scroll: when the scroll viewport nears the bottom, ask the consumer
-  // to load the next page.
-  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
-    if (!onLoadMore || !hasMore || loading) return;
-    const el = e.currentTarget;
-    if (el.scrollHeight - el.scrollTop - el.clientHeight < 80) {
-      onLoadMore();
-    }
-  };
-
-  const filteredRows = useMemo(() => {
-    // Server-side search mode: render rows as-is (already filtered upstream).
-    if (!filterClientSide) return rows;
-    const q = search.trim().toLowerCase();
-    if (!q) return rows;
-    return rows.filter((row) =>
-      keysToSearch.some((k) =>
-        String(row[k] ?? "")
-          .toLowerCase()
-          .includes(q),
-      ),
-    );
-  }, [rows, search, keysToSearch, filterClientSide]);
-
-  const selectedId = value ? rowId(value) : undefined;
-
-  const handleSelect = (row: T) => {
-    onSelect?.(row);
-    setOpen(false);
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        {/* Trigger: shows placeholder until a row is selected, then its label. */}
-        <Group
-          dir={dir}
-          data-theme={theme}
-          variant={variant}
-          size={size === "XS" ? "S" : size}
-          role="button"
-          tabIndex={0}
-          className={cn("flex w-full items-center gap-1 p-1 cursor-pointer", className)}
-        >
-          {icon && <Icon>{icon}</Icon>}
-          <span
-            className={cn(
-              "flex-1 px-1 truncate typography-body-medium-regular",
-              value
-                ? "text-content-presentation-action-light-primary"
-                : "text-content-presentation-action-light-secondary",
-            )}
-          >
-            {value ? label(value) : placeholder}
-          </span>
-          <i className="ri-arrow-down-s-line text-[20px] shrink-0 text-content-presentation-action-light-primary" />
-        </Group>
-      </DialogTrigger>
-
-      <DialogContent
-        dir={dir}
-        data-theme={theme}
-        onOpenAutoFocus={(e) => {
-          // Focus the search input instead of the first row.
-          e.preventDefault();
-          inputRef.current?.focus();
-        }}
-        className={cn(
-          "w-[min(640px,90vw)]  bg-transparent !items-stretch rounded-[14px]  shadow-none",
-        )}
-      >
-        {/* Visually-hidden title for accessibility (Radix requires a DialogTitle). */}
-        <DialogTitle className="sr-only">{title ?? "Select an item"}</DialogTitle>
-
-        {/* Search input — local inline-label field (full control over colors). */}
-        <SearchInput
-          ref={inputRef}
-          variant={variant}
-          theme={theme}
-          dir={dir}
-          label={title}
-          value={search}
-          placeholder={searchPlaceholder}
-          onChange={(e) => setSearch(e.target.value)}
-        />
-
-        {/* Scrollable table area */}
-        <div className=" w-full flex justify-center">
-          <div className="bg-[#696a6f] pt-[8px] rounded-b-[14px] pr-[4px] pb-[4px] pl-[4px] w-[95%] shadow-[0_0_32px_2px_rgba(0,0,0,0.20),0_0_48px_2px_rgba(0,0,0,0.05)]">
-            <div
-              ref={scrollRef}
-              onScroll={handleScroll}
-              className="max-h-[55vh] overflow-auto scrollbar-hide rounded-[10px]  border border-white-alpha-40 bg-[rgba(184,192,204,0.5)]"
-            >
-              {filteredRows.length > 0 && (
-                <Table
-                  theme={theme as never}
-                  data-theme="dark"
-                  className="w-full rounded-[10px] overflow-hidden"
-                >
-                  <TableHeader className="backdrop-blur-none bg-black-alpha-20 shadow-[0px_4px_8px_0px_rgba(0,0,0,0.15)]">
-                    <TableRow className="h-[44px] [&_button:not([data-slot=resize-handle])]:bg-white-alpha-40 [&>th]:border-white-alpha-20">
-                      {columns.map((col) => (
-                        <TableHead
-                          key={col.key}
-                          className="cursor-default"
-                          contentClassName="typography-body-medium-medium text-white"
-                        >
-                          {col.header}
-                        </TableHead>
-                      ))}
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {filteredRows.map((row) => {
-                      const id = rowId(row);
-                      return (
-                        <TableRow
-                          key={id}
-                          state={selectedId === id ? "selected" : undefined}
-                          onClick={() => handleSelect(row)}
-                          className={cn(
-                            "cursor-pointer h-[40px]",
-                            selectedId === id && "bg-white-alpha-50",
-                          )}
-                        >
-                          {columns.map((col) => (
-                            <TableCell
-                              key={col.key}
-                              className="h-[40px] border-b border-white-alpha-20 text-white px-[8px] !whitespace-nowrap !break-normal"
-                            >
-                              {col.render ? col.render(row) : String(row[col.key] ?? "")}
-                            </TableCell>
-                          ))}
-                        </TableRow>
-                      );
-                    })}
-                  </TableBody>
-                </Table>
-              )}
-
-              {/* Empty state — only when nothing is loading. */}
-              {filteredRows.length === 0 && !loading && (
-                <div className="px-3 py-6 text-center typography-body-small-regular text-white-alpha-75">
-                  No results found
-                </div>
-              )}
-
-              {/* Loading row (initial load or fetching the next page). */}
-              {loading && (
-                <div className="flex items-center justify-center py-3">
-                  <LoadingIcon size="M" />
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-SearchableTable.displayName = "SearchableTable";
-
-/* -------------------------------------------------------------------------- */
-/* SearchInput — local inline-label search field (replaces InnerLabelField).  */
-/* The whole field + its text turn white on hover/focus, fully controlled here. */
-/* -------------------------------------------------------------------------- */
-
-interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
-  variant?: "SystemStyle" | "PresentationStyle";
-  theme?: Themes;
-  label?: string;
-}
-
-const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
-  ({ variant = "PresentationStyle", theme, label, className, ...props }, ref) => (
-    <div className="flex p-[3px] flex-col gap-[10px] rounded-[14px] bg-[rgba(61,64,69,0.65)] shadow-[0_0_18px_0_rgba(0,0,0,0.40)] backdrop-blur-[21px]">
-      <Group
-        data-theme={theme}
-        variant={variant}
-        size="M"
-        className={cn(
-          "group flex w-full items-center gap-2 p-1 rounded-[10px] transition-colors",
-          "border border-white-alpha-40 bg-[rgba(184,192,204,0.5)]",
-          "hover:bg-background-presentation-table-row-hover",
-          "focus-within:bg-background-presentation-table-row-hover rounded-[11px] border border-white-alpha-40 bg-[rgba(37,44,57,0.30)]",
-          className,
-        )}
-      >
-        <Icon className="shrink-0">
-          <i className="ri-search-line text-content-presentation-global-secondary transition-colors group-hover:text-white group-focus-within:text-white" />
-        </Icon>
-
-        {label && (
-          <>
-            <span className="shrink-0 px-1 typography-labels-small-regular text-content-presentation-global-secondary text-[14px] text-white transition-colors group-hover:text-white group-focus-within:text-white">
-              {label}
-            </span>
-            <span className="h-[14px] w-px shrink-0 rounded-full bg-border-presentation-action-labelless-divider transition-colors group-hover:bg-white-alpha-40" />
-          </>
-        )}
-
-        <Input
-          ref={ref}
-          {...props}
-          className={cn(
-            "min-w-[100px] flex-1 !h-[24px] bg-transparent",
-            "text-content-presentation-action-light-primary",
-            "placeholder:hover:text-white-alpha-75",
-            "transition-colors group-hover:!text-white group-focus-within:!text-white",
-          )}
-        />
-      </Group>
-    </div>
-  ),
-);
-SearchInput.displayName = "SearchInput";