torch-glare 2.4.0 → 2.4.2

package/apps/lib/components/SearchableSelect.tsx

@@ -38,6 +38,8 @@ interface Props {
   theme?: Themes;
   dir?: string;
   className?: string;
+  /** Transparent border/background so the trigger blends into a table cell. */
+  onTable?: boolean;
 
   // --- Async / backend pagination (all optional; static `options` still works) ---
   /**
@@ -91,7 +93,7 @@ const menuContentStyles = cva(
       },
     },
     defaultVariants: { variant: "PresentationStyle" },
-  }
+  },
 );
 
 export function SearchableSelect({
@@ -105,6 +107,7 @@ export function SearchableSelect({
   theme,
   dir,
   className,
+  onTable,
   filterClientSide = true,
   onSearchChange,
   searchDebounceMs = 300,
@@ -123,10 +126,7 @@ export function SearchableSelect({
 
   const groupRef = useClickOutside<HTMLDivElement>((e) => {
     const target = e?.target as Node;
-    if (
-      !groupRef.current?.contains(target) &&
-      !popoverContentRef.current?.contains(target)
-    ) {
+    if (!groupRef.current?.contains(target) && !popoverContentRef.current?.contains(target)) {
       setOpen(false);
     }
   });
@@ -168,7 +168,7 @@ export function SearchableSelect({
   };
 
   // Solid value: search text while typing, otherwise the selected label.
-  const displayValue = searching ? search : selectedOption?.label ?? "";
+  const displayValue = searching ? search : (selectedOption?.label ?? "");
 
   return (
     <Popover open={open}>
@@ -178,11 +178,13 @@ export function SearchableSelect({
           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)
           }
-          className={cn("flex w-full items-center gap-1 p-1", className)}
+          // Trigger styling mirrors the `Select` component's trigger so the two read identically.
+          className={cn("flex w-full items-center gap-1 rounded-[6px] p-[4px]", className)}
         >
           {icon && <Icon>{icon}</Icon>}
           <Input
@@ -221,14 +223,15 @@ export function SearchableSelect({
               }
             }}
             className={cn(
-              "shrink-0 h-[32px] w-[32px] rounded-[4px]",
-              open && "bg-background-presentation-action-hover text-white"
+              // Same box + open-state fill as the Select trigger's chevron.
+              "h-[32px] w-[32px] shrink-0",
+              open && "bg-background-presentation-action-hover text-white",
             )}
           >
             <i
               className={cn(
-                "ri-arrow-down-s-line text-[16px] transition-all duration-100 ease-in-out",
-                open && "rotate-180"
+                "ri-arrow-down-s-line !text-[26px] transition-all duration-100 ease-in-out",
+                open && "rotate-180",
               )}
             />
           </Button>
@@ -269,15 +272,13 @@ export function SearchableSelect({
                     data-highlighted={isSelected ? "" : undefined}
                     className={cn(
                       MenuItemStyles({ variant: "Default", size: "M" }),
-                      "shrink-0" // keep full row height; the list scrolls instead of squishing
+                      "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" />
-                      )}
+                      {isSelected && <i className="ri-check-line text-[16px] shrink-0" />}
                     </div>
                   </button>
                 );
@@ -298,7 +299,6 @@ export function SearchableSelect({
               <LoadingIcon size="M" />
             </div>
           )}
-
         </div>
       </PopoverContent>
     </Popover>

package/apps/lib/components/SearchableTable.tsx

@@ -11,22 +11,10 @@ import {
 } from "react";
 import { cn } from "../utils/cn";
 import { Themes } from "../utils/types";
-import {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogTitle,
-} from "./Dialog";
+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";
+import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from "./Table";
 
 /**
  * SearchableTable — a field that opens a modal Dialog to pick a row from a Table.
@@ -119,8 +107,7 @@ export function SearchableTable<T extends Record<string, unknown>>({
   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 label = (row: T) => getLabel?.(row) ?? String(row[columns[0]?.key] ?? "");
 
   const keysToSearch = searchKeys ?? columns.map((c) => c.key);
 
@@ -154,8 +141,10 @@ export function SearchableTable<T extends Record<string, unknown>>({
     if (!q) return rows;
     return rows.filter((row) =>
       keysToSearch.some((k) =>
-        String(row[k] ?? "").toLowerCase().includes(q)
-      )
+        String(row[k] ?? "")
+          .toLowerCase()
+          .includes(q),
+      ),
     );
   }, [rows, search, keysToSearch, filterClientSide]);
 
@@ -177,10 +166,7 @@ export function SearchableTable<T extends Record<string, unknown>>({
           size={size === "XS" ? "S" : size}
           role="button"
           tabIndex={0}
-          className={cn(
-            "flex w-full items-center gap-1 p-1 cursor-pointer",
-            className
-          )}
+          className={cn("flex w-full items-center gap-1 p-1 cursor-pointer", className)}
         >
           {icon && <Icon>{icon}</Icon>}
           <span
@@ -188,12 +174,12 @@ export function SearchableTable<T extends Record<string, unknown>>({
               "flex-1 px-1 truncate typography-body-medium-regular",
               value
                 ? "text-content-presentation-action-light-primary"
-                : "text-content-presentation-action-light-secondary"
+                : "text-content-presentation-action-light-secondary",
             )}
           >
             {value ? label(value) : placeholder}
           </span>
-          <i className="ri-arrow-down-s-line text-[16px] shrink-0 text-content-presentation-action-light-primary" />
+          <i className="ri-arrow-down-s-line text-[20px] shrink-0 text-content-presentation-action-light-primary" />
         </Group>
       </DialogTrigger>
 
@@ -206,7 +192,7 @@ export function SearchableTable<T extends Record<string, unknown>>({
           inputRef.current?.focus();
         }}
         className={cn(
-          "w-[min(640px,90vw)]  bg-transparent !items-stretch rounded-[14px] gap-3 shadow-none",
+          "w-[min(640px,90vw)]  bg-transparent !items-stretch rounded-[14px]  shadow-none",
         )}
       >
         {/* Visually-hidden title for accessibility (Radix requires a DialogTitle). */}
@@ -225,72 +211,74 @@ export function SearchableTable<T extends Record<string, unknown>>({
         />
 
         {/* Scrollable table area */}
-        <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"
+        <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)]"
             >
-              <TableHeader className="bg-black-alpha-20 shadow-[0px_4px_8px_0px_rgba(0,0,0,0.15)]">
-                <TableRow className="h-[44px] [&_button]:bg-white-alpha-40 [&>th]:border-white-alpha-20">
-                  {columns.map((col) => (
-                    <TableHead
-                      key={col.key}
-                      className="cursor-default 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"
-                      )}
-                    >
+              {filteredRows.length > 0 && (
+                <Table
+                  theme={theme as never}
+                  data-theme="dark"
+                  className="w-full rounded-[10px] overflow-hidden"
+                >
+                  <TableHeader className="bg-black-alpha-20 shadow-[0px_4px_8px_0px_rgba(0,0,0,0.15)]">
+                    <TableRow className="h-[44px] [&_button]:bg-white-alpha-40 [&>th]:border-white-alpha-20">
                       {columns.map((col) => (
-                        <TableCell
+                        <TableHead
                           key={col.key}
-                          className="border-b border-white-alpha-20 text-white px-[8px] !whitespace-nowrap !break-normal"
+                          className="cursor-default typography-body-medium-medium text-white"
                         >
-                          {col.render
-                            ? col.render(row)
-                            : String(row[col.key] ?? "")}
-                        </TableCell>
+                          {col.header}
+                        </TableHead>
                       ))}
                     </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          )}
+                  </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="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>
-          )}
+              {/* 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" />
+              {/* 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>
@@ -304,8 +292,7 @@ SearchableTable.displayName = "SearchableTable";
 /* The whole field + its text turn white on hover/focus, fully controlled here. */
 /* -------------------------------------------------------------------------- */
 
-interface SearchInputProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
   variant?: "SystemStyle" | "PresentationStyle";
   theme?: Themes;
   label?: string;
@@ -313,41 +300,44 @@ interface SearchInputProps
 
 const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
   ({ variant = "PresentationStyle", theme, label, className, ...props }, ref) => (
-    <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",
-        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}
+    <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(
-          "min-w-[100px] flex-1 !h-[24px] bg-transparent",
-          "text-content-presentation-action-light-primary",
-          "transition-colors group-hover:!text-white group-focus-within:!text-white"
+          "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" />
+          </>
         )}
-      />
-    </Group>
-  )
+
+        <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";