torch-glare 2.4.4 → 2.4.5

package/apps/lib/components/FormBuilder/fields/PhoneField.tsx

@@ -37,12 +37,37 @@ function splitPhone(value: unknown, defaultDial: string): { dial: string; number
  * `FormBuilder.Phone` — country dial-code (every country) + number. The picker is a
  * `SearchableSelect` keyed by the unique ISO code (dial codes repeat) — type to filter by
  * country name or dial. The value is stored as a `"+<dial> <number>"` string.
+ *
+ * **Inside a `FormBuilder.Table` cell** this collapses to a single plain number input: the
+ * fixed-width picker imposed a ~155px floor on the column and left the number truncated,
+ * and two controls in one cell is not a table column. Add a separate column (e.g. a
+ * `FormBuilder.Select` of dial codes) when a table needs the country code.
  */
 export function PhoneField(props: PhoneFieldProps) {
   const loading = useLoading();
   const cell = useCell();
   const defaultDial = props.defaultCountry ?? "+964"; // Iraq
 
+  if (cell) {
+    return (
+      <FieldShell {...props}>
+        {(field) => (
+          <InputField
+            type="tel"
+            inputMode="tel"
+            value={typeof field.value === "string" ? field.value : ""}
+            onChange={(e) => field.onChange(e.target.value.replace(/[^\d\s+-]/g, ""))}
+            onBlur={field.onBlur}
+            placeholder={props.placeholder ?? "Phone number"}
+            disabled={props.disabled || loading}
+            onTable
+            className="w-full"
+          />
+        )}
+      </FieldShell>
+    );
+  }
+
   return (
     <FieldShell {...props}>
       {(field) => {

package/apps/lib/components/FormBuilder/fields/TableField.tsx

@@ -21,7 +21,16 @@ import {
 
 import { cn } from "../../../utils/cn";
 import { SectionBlock } from "../../SectionBlock";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../Table";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableEndAction,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableScroller,
+} from "../../Table";
 import { Checkbox } from "../../Checkbox";
 import { Button } from "../../Button";
 import { CellContext, useLoading } from "../context";
@@ -50,6 +59,8 @@ export function TableField(props: TableFieldProps) {
 
   const [selected, setSelected] = useState<Set<string>>(new Set());
   const [sort, setSort] = useState<{ key: string; dir: "asc" | "desc" } | null>(null);
+  // Drag-resized column widths, keyed by column index; falls back to `column.width`.
+  const [resized, setResized] = useState<Record<number, number>>({});
 
   const sensors = useSensors(
     useSensor(PointerSensor),
@@ -112,6 +123,25 @@ export function TableField(props: TableFieldProps) {
 
   const totalCols = columns.length + (showHandle ? 1 : 0) + (showSelect ? 1 : 0);
 
+  // Under the browser's default `table-layout: auto`, a column's `width` is only a hint —
+  // content (an input's intrinsic size, a currency prefix) silently widens it, which is why
+  // a `width: 110` column used to render at 200-odd px. When every column declares a width
+  // we can switch to fixed layout and have them honoured exactly. Mixed/absent widths keep
+  // auto layout, since under fixed layout an unsized column would collapse to nothing.
+  //
+  // Fixed layout also needs a *definite* table width — with `width: auto` the browser sizes
+  // the table from content and then redistributes, throwing the declared widths (and any
+  // drag-resize) away. So the widths are owned here and totalled onto the table, which is
+  // what lets a drag grow the table instead of stealing space from the next column.
+  const DUMMY_COL_WIDTH = 40; // the design's onset / selector columns
+  const colWidth = (col: TableColumn, ci: number) => resized[ci] ?? col.width;
+  const fixedLayout = columns.length > 0 && columns.every((col, ci) => !!colWidth(col, ci));
+  const tableWidth = fixedLayout
+    ? columns.reduce((sum, col, ci) => sum + (colWidth(col, ci) ?? 0), 0) +
+      (showHandle ? DUMMY_COL_WIDTH : 0) +
+      (showSelect ? DUMMY_COL_WIDTH : 0)
+    : undefined;
+
   const rowCells = (rowName: string, index: number) => (
     <>
       {showSelect && (
@@ -126,11 +156,14 @@ export function TableField(props: TableFieldProps) {
       {columns.map((col, ci) => (
         <TableCell
           key={ci}
-          style={col.width ? { width: col.width } : undefined}
-          childrenClassName={cn(
-            "min-w-0 w-full [&:has(input)]:bg-transparent",
-            col.align && ALIGN[col.align],
-          )}
+          style={colWidth(col, ci) ? { width: colWidth(col, ci) } : undefined}
+          // Column widths come from `col.width`, so opt out of TableCell's 200px floor —
+          // otherwise a narrow column (e.g. `width: 110`) silently renders at 200px.
+          minWidth={0}
+          // Every cell here holds a form control, and the right-edge fade washes out whatever
+          // sits at its end — a Select's chevron, a date picker's button.
+          fade={false}
+          childrenClassName={cn("min-w-0 w-full", col.align && ALIGN[col.align])}
         >
           <CellContext.Provider value={true}>{col.cell(rowName, index)}</CellContext.Provider>
         </TableCell>
@@ -139,12 +172,19 @@ export function TableField(props: TableFieldProps) {
   );
 
   const table = (
-    <Table>
+    // `min-w-full` so the grid still spans the card when the columns are narrower than it,
+    // while staying free to overflow (and scroll) when they aren't.
+    <Table
+      className={cn("min-w-full", fixedLayout && "[table-layout:fixed]")}
+      style={tableWidth ? { width: tableWidth } : undefined}
+    >
       <TableHeader>
         <TableRow>
-          {showHandle && <TableHead isDummy />}
+          {/* Fixed 40px, per the design — and so these unsized columns can't absorb the
+              table's slack width and push the data columns off-screen. */}
+          {showHandle && <TableHead isDummy style={{ width: DUMMY_COL_WIDTH }} />}
           {showSelect && (
-            <TableHead isDummy>
+            <TableHead isDummy style={{ width: DUMMY_COL_WIDTH }}>
               <Checkbox
                 size="S"
                 checked={allSelected ? true : someSelected ? "indeterminate" : false}
@@ -155,7 +195,11 @@ export function TableField(props: TableFieldProps) {
           {columns.map((col, ci) => (
             <TableHead
               key={ci}
+              // Width goes on the <th> too, so header and body columns agree.
+              style={colWidth(col, ci) ? { width: colWidth(col, ci) } : undefined}
+              onResize={(w) => setResized((prev) => ({ ...prev, [ci]: w }))}
               sortType={col.sortKey && sort?.key === col.sortKey ? sort.dir : undefined}
+              sortLabel={typeof col.header === "string" ? col.header : undefined}
               onSort={col.sortKey ? () => applySort(col.sortKey as string) : undefined}
             >
               {col.header}
@@ -183,58 +227,40 @@ export function TableField(props: TableFieldProps) {
 
         {fields.length === 0 && (
           <TableRow>
-            <TableCell colSpan={totalCols}>
+            <TableCell colSpan={totalCols} minWidth={0}>
               <span className="typography-body-small-regular text-content-presentation-global-secondary">
                 No rows yet.
               </span>
             </TableCell>
           </TableRow>
         )}
-
-        <TableRow className="h-[40px]">
-          <TableCell
-            colSpan={totalCols}
-            className="border-t-2 border-transparent hover:border-border-presentation-table-action-hover hover:bg-background-presentation-table-acton-hover"
-          >
-            <button
-              type="button"
-              disabled={loading}
-              onClick={() => append((props.defaultItem ?? {}) as never)}
-              className="flex w-full items-center justify-start gap-2 typography-body-medium-semibold text-content-presentation-action-light-primary [&_i]:text-[20px]"
-            >
-              <i className="ri-add-line" />
-              {props.addLabel ?? "Add New"}
-            </button>
-          </TableCell>
-        </TableRow>
       </TableBody>
     </Table>
   );
 
   // Header actions on the right of the SectionBlock title row: a "Delete Row" that's disabled
-  // until rows are selected, and a primary "Add New".
+  // until rows are selected, and a primary "Add New". They live outside the scroll container,
+  // so they stay put while the grid scrolls sideways.
   const headerActions = (
     <>
       {selectable && (
         <Button
           type="button"
-          size="S"
+          size="M"
           variant="BorderStyle"
           disabled={loading || selected.size === 0}
           onClick={deleteSelected}
         >
-          <i className="ri-delete-bin-line" />
           Delete Row
         </Button>
       )}
       <Button
         type="button"
-        size="S"
+        size="M"
         variant="BluColStyle"
         disabled={loading}
         onClick={() => append((props.defaultItem ?? {}) as never)}
       >
-        <i className="ri-add-line" />
         {props.addLabel ?? "Add New"}
       </Button>
     </>
@@ -242,32 +268,34 @@ export function TableField(props: TableFieldProps) {
 
   return (
     <SectionBlock
+      variant="Table"
       title={props.title}
       color={props.color}
       icon={props.icon}
       action={headerActions}
-      bodyClassName="px-[16px]"
-      // The bottom "Add New" footer is the last element, so drop SectionBlock's default
-      // bottom padding to keep the table flush with the card edge (matches the Figma).
-      containerClassName="pb-0"
     >
-      <div className="flex w-full flex-col gap-2">
-        {props.description && (
-          <p className="typography-body-small-regular text-content-presentation-global-secondary">
-            {props.description}
-          </p>
+      {props.description && (
+        <p className="px-[16px] pt-[12px] typography-body-small-regular text-content-presentation-global-secondary">
+          {props.description}
+        </p>
+      )}
+
+      {/* The table is the only horizontally scrolling element … */}
+      <TableScroller>
+        {showHandle ? (
+          <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
+            {table}
+          </DndContext>
+        ) : (
+          table
         )}
+      </TableScroller>
 
-        <div className="w-full overflow-x-auto">
-          {showHandle ? (
-            <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
-              {table}
-            </DndContext>
-          ) : (
-            table
-          )}
-        </div>
-      </div>
+      {/* … so this stays visible no matter how far right the columns are scrolled. */}
+      <TableEndAction disabled={loading} onClick={() => append((props.defaultItem ?? {}) as never)}>
+        <i className="ri-add-line" />
+        {props.addLabel ?? "Add New"}
+      </TableEndAction>
     </SectionBlock>
   );
 }

package/apps/lib/components/FormBuilder/form-builder.tsx

@@ -6,7 +6,7 @@ import { useForm, type FieldValues } from "react-hook-form";
 
 import { cn } from "../../utils/cn";
 import { Form } from "../Form";
-import { SectionBlock, type SectionColor } from "../SectionBlock";
+import { SectionBlock, type SectionColor, type SectionVariant } from "../SectionBlock";
 import { LoadingContext, DirectionContext, StepperContext, FormIdContext } from "./context";
 import { Header } from "./header";
 import type { FormBuilderRootProps } from "./types";
@@ -57,13 +57,21 @@ export interface SectionProps {
   title?: ReactNode;
   color?: SectionColor;
   icon?: ReactNode;
+  /**
+   * `"Table"` switches to the full-bleed table shell — no body padding, a rule under
+   * the header, and the card clipped to its radius. `FormBuilder.Table` uses it; pass
+   * it here only when hand-composing a table inside a section.
+   */
+  variant?: SectionVariant;
+  /** Right-aligned content on the title row — e.g. action buttons. */
+  action?: ReactNode;
   children: ReactNode;
 }
 
 /** `FormBuilder.Section` — a titled Glare SectionBlock grouping fields. */
-function Section({ title, color, icon, children }: SectionProps) {
+function Section({ title, color, icon, variant, action, children }: SectionProps) {
   return (
-    <SectionBlock title={title} color={color} icon={icon}>
+    <SectionBlock title={title} color={color} icon={icon} variant={variant} action={action}>
       {children}
     </SectionBlock>
   );

package/apps/lib/components/Input.tsx

@@ -198,6 +198,9 @@ export const GroupStyles = cva(
           "hover:caret-border-presentation-state-negative",
         ],
       },
+      // Transparent border/background so the control blends into a table cell. The hover and
+      // focus shadows are deliberately left alone — a cell control lifts exactly like any
+      // other field.
       onTable: {
         true: ["border-transparent", "bg-transparent"],
       },

package/apps/lib/components/SearchableTable.tsx

@@ -224,12 +224,13 @@ export function SearchableTable<T extends Record<string, unknown>>({
                   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">
+                  <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 typography-body-medium-medium text-white"
+                          className="cursor-default"
+                          contentClassName="typography-body-medium-medium text-white"
                         >
                           {col.header}
                         </TableHead>
@@ -252,7 +253,7 @@ export function SearchableTable<T extends Record<string, unknown>>({
                           {columns.map((col) => (
                             <TableCell
                               key={col.key}
-                              className="border-b border-white-alpha-20 text-white px-[8px] !whitespace-nowrap !break-normal"
+                              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>

package/apps/lib/components/SectionBlock.tsx

@@ -21,9 +21,61 @@ const titleBadge = cva(
   },
 );
 
+const container = cva(
+  "flex w-full px-0 flex-col rounded-[16px] bg-background-presentation-form-base shadow-[0_0_32px_2px_rgba(0,0,0,0.05)]",
+  {
+    variants: {
+      variant: {
+        Default: "pt-[6px] pb-[24px]",
+        // No bottom padding — the table's end-action row is the last element and meets
+        // the card edge; `overflow-hidden` clips it to the 16px radius.
+        Table: "pt-[6px] pb-0 overflow-hidden",
+      },
+    },
+    defaultVariants: { variant: "Default" },
+  },
+);
+
+const header = cva("flex px-[6px] justify-between gap-3", {
+  variants: {
+    variant: {
+      Default: "items-center",
+      Table: "items-start",
+    },
+  },
+  defaultVariants: { variant: "Default" },
+});
+
+const body = cva("flex w-full flex-col", {
+  variants: {
+    variant: {
+      Default: "px-[42px] gap-[2px]",
+      // Full bleed, with the rule that separates the header from the table.
+      Table: "mt-[6px] border-t border-border-presentation-global-primary overflow-hidden",
+    },
+  },
+  defaultVariants: { variant: "Default" },
+});
+
+const rail = cva("flex w-full min-w-[300px] flex-col items-start", {
+  variants: {
+    variant: {
+      // Hairline between each direct child (form rows).
+      Default: "divide-y divide-gray-300",
+      // The table draws its own row borders — a divide rule would double up on the
+      // table / scroller / end-action siblings.
+      Table: "",
+    },
+  },
+  defaultVariants: { variant: "Default" },
+});
+
 export type SectionColor = NonNullable<VariantProps<typeof titleBadge>["color"]>;
+export type SectionVariant = NonNullable<VariantProps<typeof container>["variant"]>;
 
-export interface SectionBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+export interface SectionBlockProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "title">,
+    VariantProps<typeof container> {
   color?: SectionColor;
   title?: ReactNode;
   icon?: ReactNode;
@@ -39,6 +91,7 @@ export const SectionBlock = forwardRef<HTMLDivElement, SectionBlockProps>(
     {
       children,
       color,
+      variant,
       title,
       action,
       className,
@@ -53,15 +106,11 @@ export const SectionBlock = forwardRef<HTMLDivElement, SectionBlockProps>(
     return (
       <div
         ref={ref}
-        className={cn(
-          "flex  w-full pt-[6px] pb-[24px] px-0 flex-col rounded-[16px] bg-background-presentation-form-base shadow-[0_0_32px_2px_rgba(0,0,0,0.05)]",
-          className,
-          containerClassName,
-        )}
+        className={cn(container({ variant }), className, containerClassName)}
         {...props}
       >
         {(title || action) && (
-          <div className={cn("flex px-[6px] items-center justify-between gap-3", headerClassName)}>
+          <div className={cn(header({ variant }), headerClassName)}>
             {title ? (
               <div className={cn(titleBadge({ color }))}>
                 <span className="flex items-center gap-1.5">
@@ -75,10 +124,8 @@ export const SectionBlock = forwardRef<HTMLDivElement, SectionBlockProps>(
             {action && <div className="flex shrink-0 items-center gap-2">{action}</div>}
           </div>
         )}
-        <div className={cn("flex px-[42px] flex-col gap-[2px] px-[42px]", bodyClassName)}>
-          <div className="flex w-full divide-y divide-gray-300 min-w-[300px]  flex-col items-start ">
-            {children}
-          </div>
+        <div className={cn(body({ variant }), bodyClassName)}>
+          <div className={cn(rail({ variant }))}>{children}</div>
         </div>
       </div>
     );

package/apps/lib/components/Select.tsx

@@ -293,7 +293,9 @@ const PopoverTriggerStyles = cva(
           "hover:caret-border-presentation-state-negative",
         ],
       },
-      // Transparent border/background so the trigger blends into a table cell.
+      // Transparent border/background so the trigger blends into a table cell. The hover and
+      // focus shadows are deliberately left alone — a cell control lifts exactly like any
+      // other field.
       onTable: {
         true: ["border-transparent", "bg-transparent"],
       },